How to create a website using 960 Grid System CSS Framework

Step1 : Getting started

Download and unzip the framework from the http://960.gs site Go to inside the code folder it contain demo.html file. Open this on your text editor.

Step2 :How to setting the basic grid

Before we get into the specifics of the 960 Grid System, let’s briefly discuss grid-based design in general. Grids are an invisible foundation that structure the websites we develop and design. This invisible foundation makes it possible for rapid development, concise code, and a much more organized layout.

-> Benefits of Implementing a Grid System

  • Gives your design consistency
  • Can make your designs more usable and legible
  • Reduces CSS coding errors
  • Makes it easier to embed images, text, and other visual aesthetics
  • Can save the time and money
  • Reduce the amount of css and markup you need to duplicate each time you start a new project
  • No need to refer to old projects to figure out how to implement layouts

Step3: How the grid system is working in 960grid

960.gs is based around putting all of your site’s elements in a 960px wide container, and dividing that container into 12, 16, or 24 equally sized columns.

In the 12-column version, the narrowest column is 60 pixels wide. Each column after that increases by 80 pixels.

So the available column widths are: 60, 140, 220, 300, 380, 460, 540, 620, 700, 780, 860 and 940.

Similarly, in the 16-column version, the narrowest column is 40 pixels wide and each column after that increases by 60 pixels. So the available column widths are: 40, 100, 160, 220, 280, 340, 400, 460, 520, 580, 640, 700, 760, 820, 880 and 940.

Open your demo.html in browser. You can see the layout something like this

Here full width Colum is 940 px that means it substrate margin(10+10=20) form total width.

Step4: How to use grid960 in your project

I will explain you how to create blog page. It contain header sidebar main container and and footer. I am going to use 12 column grid system. Full width (940px) for header and 700px for main container and 220px for sidebar with the following code

<h1><a href="http://960.gs/">960 Grid System</a></h1>

<div class="container_12">

<h2>12 Column Grid</h2>

<div class="grid_12">

<p>header</p>

</div>

<!-- end .grid_12 -->

<div class="clear">&nbsp;</div>

<div class="grid_9">

<p>main content</p>

</div>

<div class="grid_3">

<p>sidebar</p>

</div>

<div class="grid_12">

<p>footer</p>

</div>

</div>

<!-- end .container_12 -->

This is the basic structure of blog page. Now we will going to modify the grid system add some dummy text.

Check the updated code

 
<!DOCTYPE html "> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>My Blog</title> <link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/text.css" /> <link rel="stylesheet" type="text/css" media="all" href="css/960.css" /> </head> <body> <div class="container_12"> <div id="header" class="grid_12"> <h2>My Blog structure </h2> </div> <!-- end .grid_12 --> <div class="clear">&nbsp;</div> <div id="maincontent" class="grid_9"> <h1>Blog Title</h1> <p><strong>Published on Jan. 05, 2024 by Deepa manesh</strong></p>  <p> Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et
quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem
quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores
eos qui ratione voluptatem sequi nesciunt </p>  <p> Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur,
adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum
exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi
consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit
esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat
quo voluptas nulla pariatur </p></div> <div id="aside" class="grid_3">         <h3>Navigation</h3>         <ul>                <li><a href="#">Home</a></li>                <li><a href="#">About Me</a></li>                <li><a href="#">Contact</a></li>         </ul>                 <h3>More Articles:</h3>         <ul>                <li><a href="#">blog 1</a></li>                <li><a href="#">blog 2</a></li>                <li><a href="#">blog 3</a></li>                <li><a href="#">blog 4 </a></li>         </ul> </div> <div id="footer" class="grid_12"> <p> about footer </p> </div></div> <!-- end .container_12 --> </body> </html>

Output

 

Step5: How to add style in to the blog page

To do this the best practice is shouldn’t edit any existing css code, create new style sheet for your css.

Here I am going to create a style sheet called mystyle.css

Open mystyle.css in to editer and add the following css

 

body {background-color:#f2f2f2;color:#333;text-align:left;}

#header, #footer {background-color: #8F8F8E; border-bottom: 3px #3F4142 solid; margin-bottom: 20px;padding-top: 10px;color: #fff; text-align:center;}

#footer {border-top: 3px #3F4142 solid; border-bottom: none; padding-bottom: 20px; font-size: 14px ;}

You can add more style how you want to look your homepage more stylish.

The final result will be

Step6:Some more information about grid.css file

Open grid.css there we can see class name called “ push and pull “.Using this class The 960 Grid System allows you to reposition elements independently by pushing or pulling them horizontally along the page.

Before pushing/pulling

In this result company logo display first if you want to display logo on center, you would use the following HTML:

<div class="container_12">
<div class="grid_6 ">

<p>company logo</p>

</div>

<div class="grid_3 ">

<p>text column</p>

</div>

<div class="grid_3">

<p>text column</p>

</div>

<div class="grid_12">

<p>footer</p>

</div>

</div>

 

Output

prefix and suffix

If you want to create empty space in a layout (negative space is a good design device). To accomplish this, apply the prefix and suffix classes to your div. Check the following code.

 
<div class="container_12">

<div class="grid_6 ">

<p>company logo</p>

</div>

<div class="grid_3 prefix_3 ">

<p>text column</p>

</div>

<div class="grid_12">

<p>footer</p>

</div>

</div>

Output

That’s it. I think this tutorial will help you to create a website using Grid 960 frame work.. Enjoy……..

Leave a Reply

Your email address will not be published. Required fields are marked *

×