My first piece of advice before using any kind of framework is that become strong in your basics, learn to do it from scratch, build it from hand and then use frameworks for cutting development times. They are by no means to be use when you are new to the discipline. Today, I am going to discuss about the 960 CSS Grid Framework.
960 Grid Framework is one of the most popular CSS frameworks used nowadays and believe me it is all you need if you want to build fixed page layouts with the complexity of your imagination layout. Today I will tell why I love this framework and use it everywhere.
About 960 Grid Framework
With 960 Grid, you have a 960px width layout which means that it will run without a horizontal scroll bar on all the monitors running a resolution of at least 1024 X 768 (generally of a 15”monitor). Its a wide screen world and you can safely ditch visitors with smaller screens because you can’t compromise with all the space just to support some visitors with outdated hardware. (They need to act, not you!)
And the development time is so fast that you won’t find any reason of not using it. Anyone can develop a design grid skeleton in under 15minutes. Now isn’t that fast for you?
Other than this we have a choice of either selecting a 12 column layout or 16 column layout. Since 12 is divisible by 1,2,3,4,6 we can have those many equal width horizontal partitions of the 12column layout. Other than having equal width horizontal partitions, we can also have partitions like one consisting of 8columns and other one consisting of 4columns (8+4) and also 3columns layout (5+5+2). The same is with the 16 column layout and hence we need to select one as per the needs.
I will demonstrate how I build the design grid of my last project’s (Need A Project) homepage using 16column layout of 960 CSS Grid Framework.
Here is how the skeleton of the design grid looks like :
And here is the code behind this grid :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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>NAP Grid</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" />
<style type="text/css" media="all">
body { background: #123; border-top: 5px solid #000; color: #333; font-size: 11px; padding: 20px 0 40px; }
a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; }
h1 { font-family: Georgia, serif; font-weight: normal; text-align: center; }
p { border: 1px solid #666; overflow: hidden; padding: 10px 0; text-align: center; }
.container_16 { background: #fff url(img/16_col.gif) repeat-y; padding-top:20px; }
</style>
</head>
<body>
<h1>
<a>Need A Project - 16 Column Grid</a>
</h1>
<div class="container_16">
<div class="grid_16">
<div class="grid_8 alpha">
<p>460px</p>
</div>
<div class="grid_8 omega">
<p>460px</p>
</div>
</div>
<div class="clear"> </div>
<div class="grid_16">
<div class="grid_9 alpha">
<p>520px</p>
</div>
<div class="grid_7 omega">
<p>400px</p>
</div>
</div>
<div class="clear"> </div>
<div class="grid_16">
<div class="grid_8 alpha">
<p>460px</p>
</div>
<div class="grid_8 omega">
<p>460px</p>
</div>
</div>
<div class="clear"> </div>
<div class="grid_16">
<div class="grid_2 alpha">
<p>100px</p>
</div>
<div class="grid_6">
<p>340px</p>
</div>
<div class="grid_8 omega">
<p>460px</p>
</div>
</div>
<div class="clear"> </div>
</div>
<!-- end .container_16 -->
</body>
</html>
Explaination & Usage
960 Grid Framework consists of 3 CSS files which we include on the pages (960.css | text.css | reset.css). In the above code, the files are specified on line 6, 7 & 8.
Everything comes inside a DIV whose class is container_16. Inside this DIV, we have lots of other DIVs whose classes are grid_X where X is the width specified as the no of column(s).
We can have grids inside other grids. For example : We would like to break a grid into two parts, then it holds two DIVs each with a class of grid_X/2 where X is of the in housing grid. Have a look at the code from line 24 to 31 and you will get to know how to use it. One thing to note here is that the first or left-most DIV has an additional class alpha and the last or right-most has an additional class omega. The alpha & omega cut downs the left & right margin of the DIV respectively in order to accommodate the grid in another grid.
There is also an class prefix_X which specifies the left margin of the DIV to leave space for X no of column(s). Similarly the class suffix_X specifies the right margin of the DIV.
Well that’s all you need to learn this superb CSS framework. There is also a grid overlap tool which you should try out. The site seems to be down right now but the tool (actually a bookmarklet) is very handy. Check it here. I would suggest you to try out some grid designing and I am sure you will love it. Have any questions or comments, then leave them below.