960 Grid Tutorial
Monday, 22 February 2010 10:13
The 960 grid system is a CSS framework which - as the name suggests - is 960px in width and is based on a grid. The system is robust, flexible and cross browser compatible.
It is not the only CSS framework available but since Rocket Theme decided to base their innovative Gantry Framework on it, I figured it must be worth taking a look.
After spending just 10 minutes putting together my first layout, I was surprised how easy and intuitive the system was.
Anyway...enough spiel. Let's put this tutorial into practice.
Firstly, download the 960 template files. http://960.gs/ (link is near the top left).
Now open the demo.html file and paste in the following code, replacing what is there.
<!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>960 Grid System Tutorial</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">
div{background:#CCCCCC; margin:1px 0 1px 0;}
.container_12{background:#999999;}
</style>
</head>
<body>
<div class="container_12">
<div class="grid_12"><h1>Header</h1></div>
<div class="grid_4">Left</div>
<div class="grid_4">Middle</div>
<div class="grid_4">Right</div>
<div class="grid_12">Footer</div>
<div class="clear"></div>
</div><!--end container_12-->
</body>
</html>
Open this file in your browser and examine the results.
As you may have noticed, grid_12 takes up 12 columns and grid_4 takes up 4 columns. Simple!
NOTE: I have added some in-line CSS in order to give the divs some background colour.
Now that you have seen an example lets run through some very simple rules.
1. The grid system has two CSS container classes namely .container_12 and .container_16.
2. These classes are always 960px in width (not surprisingly).
3. The containers are always horizontally centred.
4. Every grid class has 10px left and right margin, a total of 20px between two columns.
5. If you want to remove either the left or right margin from a div add the class alpha to the left div, and omega to the right div. I.e
<div class="grid_4 alpha">Left</div>
6. Do NOT edit the 960 CSS files themselves as you will not be able to upgrade the framework at a later date. If you want to add your own styles then attach your own style sheet. Since CSS respects specificity you can over-ride the 960 CSS classes using Id's.
How do I design for this framework?
There are both Illustrator and Photoshop files included with the 960 zip file, which provide a guide for you to design to.
To conclude...
Due to the “fool proof” nature of the 960 grid system, I feel that this framework will play an important roll in the future development of website templates for content management systems.
As mentioned, Rocket Theme have already put all of their eggs into this basket and I wouldn't be surprised if others follow.