To make this website I have used a CSS framework called 960 Grid System (960gs). Here is a quick tutorial on how to use this flexible and frighteningly easy framework. This has been adapted from the notes I wrote for the University of Salford.
Introduction
The biggest problem with CSS development is the number of different browsers which are out there and being used. Each browser implements CSS slightly differently (some more differently than others). This causes huge headaches for any web developer trying to get a consistent layout across different browsers, browser versions and platforms.
To combat this, programmers started developing frameworks to aid them when creating new designs. These frameworks attempted to make developing layouts (and particularly prototyping of layouts) faster, easier and more consistent across browsers. These frameworks often use grid systems to represent positions of elements when displayed.
960 Grid System
One of these frameworks is called 960 Grid System, and is a fixed width framework. This is a very simple framework that allows the developer to very quickly implement wire-frame designs and then embellish their content with their own styles. The width of a page using 960 Grid System is (ironically) 960px, and this can be split into either 12 or 16 grids (each 60px or 40px per grid respectively with a 20px gap between the grids).
Using 960 Grid System
Including the CSS Files
When you download the zip file from 960.gs, it comes with many useful files. There are template files for various design programs (allowing you to draw designs that fit the grid), and a sketch sheet for hand drawn prototypes. In the code directory there is an example page, an image and a css directory. Extract the contents of the CSS directory into your project.
In the CSS directory there are the files 960.css, reset.css and text.css. 960.css is the main framework, however the reset.css and text.css are incredibly useful, as they will reset the the text and layouts so that they are consistent across different browsers. It is recommended to include all 3 of them in your website. These are linked to in the same way that you have linked style sheets to web pages in the past.
Finally, you want to create your own style sheet, and make sure that is linked in the html after the rest of the style sheets. This will mean that any styles you create will override the styles which have been set in the previous style sheets.
Creating the Container
The first thing that 960GS requires is a container, which is how it is told the number of columns that will be used on the page. This is done by setting the container element (normally a div) a class of container_XX (the XX can be either 12 or 16 depending on which number of columns you want the grid to have). This will then automatically be set to the width of 960px, and allow you to position elements within it.
<body>
<div class="container_16">
...
</div>
</body>
Note: An element can have multiple classes, so if you want the container (or any item on the page) to be a member of another class as well, you can. All classes are defined within the “class†attribute, and separated by spaces.
Setting Element Sizes
Once the grid container has been set up, it is possible to specify element sizes within very easily by setting the class of the element to the number of columns it should cover with the class grid_XX (XX being the number of columns).
<body>
<div class="container_16">
<div id="menu" class="grid_3">
<p>This is my menu bar.</p>
</div>
<div id="content" class="grid_13">
<p>Main content.</p>
</div>
</div>
</body>
example
This is a simple 2 column design, which has the first column as a menu (which is 3 grids wide: 160px), and a main content (13 columns wide, 760px). As long as the total width of the columns is not greater than 16 (or 12 on a 12 column grid), these div elements will float next to each other. This can be done for any number of elements.
Element Offsets
If you want to have an element starting a few grids in (rather than the first grid from the left), you can add to an element a class specifying the number of columns you want before the element prefix_XX.
<body>
<div class="container_16">
<div class="grid_13 prefix_2">
<p>Main content.</p>
</div>
</div>
</body>
In this case, the div would start 2 columns (100px) in from the left hand side of the container.
Clearing
When you want to make sure a new element appears below, you simply place an empty div as a “spacer” and give it the class of “clear”:
<body>
<div class="container_16">
<div class="grid_13">
<p>Main content.</p>
</div>
<div class="clear"></div>
<div class="grid_2 prefix_10">
<p>This element will always be below the previous elements.</p>
</div>
</div>
</body>
Grid Children
Often you will want to include elements within elements (nested divs). If you specify the size of these grids in the same way spacing will be wrong due to the way the margins are handled. This is countered adding the classes “alpha” and “omega” to the first and last nested elements respectively. This basically removes the left or right margins of those elements so that they are correctly aligned.
<body>
<div class="container_12">
<div class="grid_12">
<h1>Site Heading</h1>
</div>
<div class="clear"></div>
<div class="grid_3">
<h2>Menu</h2>
</div>
<div class="grid_9">
<h2>Page Content</h2>
<div class="grid_3 alpha">
<h3>Item 1</h3>
</div>
<div class="grid_3">
<h3>Item 2</h3>
</div>
<div class="grid_3 omega">
<h3>Item 3</h3>
</div>
</div>
<div class="clear"></div>
<div class="grid_12">
<p>footer text</p>
</div>
</div>
</body>
Other Tips
Styling Elements
If you want a border/padding around one of your elements, this can cause problems as the size of the border alters the spacing between the elements (and ultimately your page design). This problem is overcome by specifying another element within that does not have a specified width or height. You then style this (with borders, padding etc…). This makes sure that the maximum width of the outer element is still the ones specified in the grid system, and makes sure this does change depending on what is done within the element.
<body>
<div class="container_12">
<div class="grid_12">
<div class="red">
<h1>Site Heading</h1>
</div>
</div>
<div class="clear"></div>
<div class="grid_3">
<div class="green">
<h2>Menu</h2>
</div>
</div>
<div class="grid_9">
<h2>Page Content</h2>
<div class="grid_3 alpha">
<div class="red">
<h3>Item 1</h3>
</div>
</div>
<div class="grid_3">
<div class="green">
<h3>Item 2</h3>
</div>
</div>
<div class="grid_3 omega">
<h3>Item 3</h3>
</div>
</div>
<div class="clear"></div>
<div class="grid_12">
<div class="blue">
<p>footer text</p>
</div>
</div>
</div>
</body>
Browser Compatibility
Although the framework is on the whole compatible across browsers and platforms, do not assume that your web page is. It is still important that you validate the CSS and check your site on different platforms with different browsers (and if possible, different versions).