Use the 960 Grid System to Begin Building Your Own Semantic CSS Framework
04.21.2009
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 code 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 Code to Make It More Readable and Editable
960.gs makes this easy for you. Simply find the uncompressed folder. (code > 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;
}
Holler at this article
Welcome Section
Here you put the link to the RSS feeds, link to contact information and maybe a link to the about section.
Social Networking
DaBrook Tweets
- @phil_interact International web student conference tour. That would be amazing! I wonder what form I have to fill out for that trip? (03-11 5:21)
- Extended office hours during mid term - http://eepurl.com/jn8q (03-11 4:40)
- I don't know ... is a field trip to London possible? http://bit.ly/a2K8Mu (03-11 1:37)
- Springbrook web 1 students are learning HTML forms today http://bit.ly/aue1mi (03-11 8:07)
- Setting up github to share CodeIgniter source code with Springbrook web dev students. (03-09 11:37)
What's current:
- Web Design: Web Forms
- Web Development: Get blog entry’s to add to database
- ITGS: Review Justin’s ITGS Project