CSS frameworks have been here for some time. About the usefulness of these frameworks has been discussed for numerous times. Some say CSS isn’t advanced enough, others say these frameworks saved them many hours of developing time. We will not repeat this discussion here.

I have discovered CSS frameworks just a while back. After experimenting with the Malo CSS framework, the Blueprint framework and 960, I came to the conclusion I like the 960 CSS framework most.

This tutorial will explain the basics of this framework so you can start developing with 960 pretty fast.

The basics principles

You have to know a couple basic principles to “learn how the framework works“. You can learn these during the experimenting process, but I will explain them here for you, too. Let’s start.

Do not edit 960.css

A small note before: do not edit the 960.css file. If you do this, you won’t be able to update the framework in the future. Because we need to style our HTML though, we will create a separated CSS file.

Loading the grid

Before we can use CSS codes in an external file, we have to load these in our own HTML site. Which can be done via these codes:

1
2
3
4
5

<link rel="stylesheet" type="text/css" media="all" href="path/to/960/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="path/to/960/960.css" />
<link rel="stylesheet" type="text/css" media="all" href="path/to/960/text.css" />

Once we have this ready, we have to include our own CSS file. For example, you can call this file style.css or site.css or anything else. Include this file with these codes:

1

<link rel="stylesheet" type="text/css" media="all" href="path/to/style.css" />

Containers

In the 960 framework, you can choose between 2 container classes namely .container_12 and .container_16. These containers are always 960px width (thence the name 960!) and the difference lies in the number of Columns. The .container_12 container is divided  into 12 Columns and the .container_16 container is divided in 16 columns. These 960px width containers are horizontal centered.

Grids / Columns

There are numerous column widths you can choose from and these are different in the 2 containers. You can find these widths by opening the 960.css file, but this isn’t necessary to design a proper website. There is a smart trick that make the framework even easier.

For example, if you want 2 columns in your container (say sidebar/content), you can do that this way:

1
2
3
4
5
6
7

<div class="container_12">
<div class="grid_4">sidebar</div>
<div class="grid_8">main content</div>
</div>

You can see that the sum of your first column (grid_4) added with the second column (grid_8) is exact 12. That’s for a reason, you don’t have to know the widths of these columns, you can choose column widths doing a very easy bit of math.

Let’s say we will create a layout with 4 columns. The codes will be these:

1
2
3
4
5
6
7
8
9
10
11

<div class="container_12">
<div class="grid_2">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2">advertisement</div>
</div>

As you can see, this system works pretty well. If you try to load this in your browser however, you see something that isn’t right. That’s the introduction of our next topic.

Margins

By default, the columns have some margin between them. Every grid_(insert number here) class has 10px left and right margin. This means that in total, between 2 columns, we have a total margin of 20px.

20px margin is great to create a layout with enough white space to make everything looks smooth. That’s one reason I enjoyed using 960.

With our example from earlier, we had a problem when we loaded the page in our browser. We are about to fix that.

The problem is that every column has Left and Right margin. The first column and the latest column in the container doesn’t need any margin. Here’s the solution.

1
2
3
4
5
6
7
8
9
10
11

<div class="container_12">
<div class="grid_2 alpha">sidebar</div>
<div class="grid_6">main content</div>
<div class="grid_2">photo's</div>
<div class="grid_2 omega">advertisement</div>
</div>

You can simple add the class alpha for no left margin, and the class omega for no right margin. This example layout we made is now aligned perfectly in any modern browser (and yes, also in IE6).

Styling

Perfect, you know all the basics to create a grid layout with the 960 framework. Of course, we would like to add some style to our layout, too.

1
2
3
4
5
6
7
8
9
10
11

<div class="container_12">
<div id="sidebar" class="grid_2 alpha">sidebar</div>
<div id="content" class="grid_6">main content</div>
<div id="photos" class="grid_2">photo's</div>
<div id="advertisements" class="grid_2 omega">advertisement</div>
</div>

Because CSS uses specificity to determine which style declarations have priority above the other, the id is more important then the classes.

This way we can overwrite rules that have been set by the classes (like width, padding, borders etc) in our own CSS file.

I have added some style too, which took me exactly 5 minutes to get this whole example together. Check the source for the example and style declarations.

We are done

That’s it. You have just learned how to use the 960.gs framework to build cross browser compatible and smart layouts. When you have completely mastered the 960 framework you will greatly decrease the time you are writing CSS.

If you haven’t already, check out the example.

My questions for you!

Do you use the 960 CSS framework? Or any other framework? Do you think a framework help you to improve your code?

Excellent printing brochures available at PsPrint.com