960 Grid System – A powerful CSS framework for building websites quickly
CSS is beauty. Yes that is because it adds beauty to your roughly built html pages and texts. It is not harder to beautify a web page by using graphics, but sometimes graphics are expensive when we are talking about overall page load time.
There is always been a big war between CSS and tables. In simple words war between tables based html web pages and tables html web pages. Both of their own pros/cons but CSS make the things simple and better.
When we talk about building multiple column web pages by using table based code or CSS then float theory and floating the elements (columns) in their proper place is always a headache.
960 Grid systems will make these things simpler and cleaner. 960 Grid system is a CSS framework, very easy to use and flexible for making as many as 12 up to 16 column design.
960 basically have predefined Div sections and containers. You don’t need to worry about any floating problems. All you have to do is to use either 12 column container or 16 column container depending on your needs. Then make your own columns by using their grid classes.
Example Usage for a Simple CSS based three column template
Lets build a simple css theme that will have 960 total width and following web page structure
Overall container Header (Two cols) Navigation (One col) Content (Three Cols) Footer (One Col) End Overall Container
In 960 Grid CSS framework we’ll do it like this (don’t forget to download and include 960 CSS (only 4Kb))
<div class="container_12">
<div class="grid_6" > First header Colun</div>
<div class="grid_6" > Second header Colun</div>
<div class="clear"></div>
<div class="grid_12">Navigation Menu can go here</div>
<div class="clear"></div>
<div class="grid_2">140px Left Column</div>
<div class="grid_7">540px Center Column</div>
<div class="grid_3">220px Right Column content </div>
<div class="clear"></div>
<div class="grid_12">here we go with footer</div>
<div class="clear"></div>
</div>
Doesn’t it look simpler than hand coded? We can use the same framework 940GS in all templates.
Following is a list of grids that 940GS uses. Left is grid number and at right is the width of the grid. (Every grid have 10px margin left/right)
grid_1 —- 60px
grid_2 —- 140px
grid_3 —- 220px
grid_4 —- 300px
grid_5 —- 380px
grid_6 —- 460px
grid_7 —- 540px
grid_8 —- 620px
grid_9 —- 700px
grid_10 —- 780px
grid_11 —- 860px
grid_12 —- 940px
I hope you’ve enjoyed the tutorial on using 960 Grid system CSS framework.
Related posts
If you enjoyed this post, please consider to leave a comment or subscribe to the feed and get future articles delivered to your feed reader.
except closing queries...
Wow, very handy information!