Use the 960 Grid System to Begin Building Your Own Semantic CSS Framework

Monday August 23, 2010 Tutorials

Overview of the Tutorial

In this tutorial I will demonstrate a way to lighten up the 960 CSS framework, make it more semantic, and use elements of it to start building your own CSS framework. Why wouldn't I just use the 960 framework? You can. However, chances are it has more than you need and uses class names that don't semantically match the content on your own site. Use the 960 framework to get started, decide what elements you need, then pull out those elements and roll your own CSS framework. CSS frameworks can have all sorts of rules for layout, typography, forms, buttons, navigation... anything that you use regularly on your site. We are going to essentially take parts from the 960 framework that we can use on our own sites.

Determine What Rules From the 960.gs Framework You Want

In a previous tutorial on the 960 framework I showed how to setup a simple blog style page. I will use the 960 CSS rules that I used to begin building my personal CSS framework. Looking through the source pre from the example site I found that I was using the following 960 rules:

  • container_12
  • grid_12
  • grid_9
  • grid_3

That's not much! I might use more later on, but for now, let's just work with those.

Prepare the 960 CSS Source pre to Make It More Readable and Editable

960.gs makes this easy for you. Simply find the uncompressed folder. (pre > css > uncompressed). Then create a new CSS file of your own. I am going to title mine "myframework.css" Begin copying over all of the rules that use the class names that you used in your markup.

Pull Out the CSS Rules You Need

Here is the CSS I ended up with for the four rules I used from the 960 framework.

.container_12  {
    margin-left: auto; 
    margin-right: auto; 
    width: 960px;
}
.grid_3, .grid_9, .grid_12 {
    display: inline; 
    float: left; 
    margin-left: 10px; 
    margin-right: 10px;
}
.container_12 .grid_3 {
    width: 220px;
}
.container_12 .grid_9 {
    width: 700px;
}

Now, instead of linking to the 960.gs file, I just link to "myframework.css." It is a lot lighter, still works, and only has what I need in it. There is just one more step.

Make the markup more semantic

The last step is to go to our markup and determine the best class or id names. Here is what I came up with for my particular site: .container_12 = .wrapper .grid_9 = .maincontent .grid_3 = .secondarynav .grid_12 = .footer Now I can go and change my HTML class names and the names in my CSS document to reflect these more semantic names. Here is my final CSS:

.wrapper  {
    margin-left: auto; 
    margin-right: auto; 
    width: 960px;}
.secondarynav,  .maincontent, .footer {
    display: inline; 
    float: left; 
    margin-left: 10px; 
    margin-right: 10px;
}
.wrapper .secondarynav {
    width: 220px;
}
.wrapper .maincontent {
    width: 700px;
}

Four rules with semantic names. Quite a slimmed down version of the original 960 grid framework.

Corrections

NOTE: Thanks to Roxy for pointing out that you also need to include the following rule:

.wrapper .footer {
 width: 960px;
}