Tutorial for the 960 Grid System CSS Framework

Wednesday September 1, 2010 Tutorials

I wrote this tutorial to help my advanced web students get comfortable working with a CSS framework. It is not going to build a sweet site, or take advantage of every 960.gs feature, but it should provide some insight into how to start building page with the framework. Check out the second addition to this tutorial on using the 960 framework to build your own semantic CSS framework.

Getting Started

  • Download and unzip the framework from the http://960.gs website.
  • In the code folder duplicate the demo.html file.
  • Open up the file in your text editor of choice.

Deciding on a Layout and Setting the Basic Grid

For this tutorial I will be building a basic blog page. I want to have a header, section for the article, a sidebar showing other articles and a footer with some information about the site. Grid wise, I am going to go with the 12 column layout with 700px main section and a 200px sidebar. To accomplish this I will use grid_9 and the grid_3 together. The end result looks like this:

960 Grid System Screenshot of the demo file

 with the following code:

<h1><a href="http://960.gs/">960 Grid System</a></h1> 
<div class="container_12"> 
     <h2>12 Column Grid</h2> 
     <div class="grid_12"> 
          <p>940px</p> 
     </div> 
     <!-- end .grid_12 --> 
     <div class="clear">&nbsp;</div> 
     <div class="grid_9"> 
          <p>700px</p> 
     </div> 
     <div class="grid_3"> 
          <p>220px</p> 
     </div> 
     <div class="grid_12"> 
          <p>940px</p> 
     </div>
</div> 
<!-- end .container_12 -->

Making Basic Changes to the Default Grid

  • Now that we have the grid laid out, I am going to add a few ids to the markup for my own stylesheet. Specifically, I am going to add a header, maincontent, aside, and footer id to the appropriate divs
  • I am also going to remove the internal CSS that appears in the head section of the demo page and the h1 tag at the top of the page.
  • Now we have a pretty basic looking page like the one in the screenshot below:Basic 2 Column Layout with 960gs
     
  • Finally I am going to add in some dummy text, and add some markup to make the HTML more like the blog page I am looking for.

Here is what the site should look like now:

Two column 960 grid with dummy content

 

 And the markup:

<!DOCTYPE html "> 
<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>My Blog - My Name</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" /> 
</head> 
<body> 
<div class="container_12"> 
	<div id="header" class="grid_12"> 
		<h2>My Blog</h2> 
		<p>Description of my blog</p> 
	</div> <!-- end .grid_12 --> 
	<div class="clear">&nbsp;</div> 
	<div id="maincontent" class="grid_9"> 
		<h1>Title of the blog post</h1> 
		<p><strong>Published on Jan. 01, 2009 by Zac Gordon</strong></p> 
		
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

		Cras dui risus, interdum sit amet, adipiscing at, venenatis quis, quam. 
		Morbi velit tortor, fermentum ac, sagittis quis, volutpat sed, magna. 
		Curabitur eu tellus eu magna laoreet vestibulum. Fusce accumsan mollis 
		ipsum. Morbi tempor vehicula est. Duis pharetra velit. Vestibulum blandit 
		ultricies nibh. Nulla vehicula mauris sed sem. Aliquam mauris metus, 
		commodo at, elementum quis, porta a, nisl. Nulla elementum fermentum 
		massa. </p> 
		
		<p>Cras posuere, est quis adipiscing suscipit, dolor felis pulvinar 
		lacus, ut placerat orci metus tincidunt orci. Curabitur elementum purus 
		vitae diam. Morbi ut dui cursus augue scelerisque molestie. Suspendisse ut
		velit et massa interdum dictum. Praesent quam neque, fringilla eget, 
		blandit id, sagittis id, justo. Proin pulvinar placerat leo. Etiam at 
		mauris id justo ultricies scelerisque. Donec mattis dui ut tellus. 
		Vivamus interdum lorem ac ante. In nisi tellus, tristique vitae, rutrum 
		at, elementum adipiscing, risus. Integer ac est ultricies nibh pretium 
		scelerisque. Aliquam luctus eros non eros. Vivamus mi orci, suscipit 
		eget, imperdiet vitae, consectetur fermentum, erat. </p> 
		
		<p>Fusce dignissim sapien vitae turpis. Quisque consequat convallis 
		sapien. Curabitur est sapien, ultrices nec, commodo a, hendrerit eu, 
		lectus. Curabitur eu quam. Ut non risus. Sed eu tortor. Proin nisi. 	
		Aliquam congue adipiscing orci. Fusce imperdiet ullamcorper metus. Ut erat
		ligula, posuere a, fermentum vel, aliquet eu, lorem. Pellentesque habitant
		morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
		Pellentesque tempor nulla eu lorem. Suspendisse bibendum molestie nunc. 
		</p> 
</div> 
<div id="aside" class="grid_3"> 
	<h3>Navigation</h3> 
	<ul> 
		<li><a href="#">Home</a></li> 
		<li><a href="#">About Me</a></li> 
		<li><a href="#">Articles</a></li> 
		<li><a href="#">Contact</a></li> 
	</ul> 
	
	<h3>More Articles:</h3> 
	<ul> 
		<li><a href="#">Article 1</a></li> 
		<li><a href="#">Article 2</a></li> 
		<li><a href="#">Article 3</a></li> 
		<li><a href="#">Article 4 </a></li> 
	</ul> 
</div> 
<div id="footer" class="grid_12"> 
	<p> Footer information like email and licensing for site </p> 
</div> 
</div> 
<!-- end .container_12 --> 
</body> 
</html> 

Adding Some Basic Style to the Page

  • Now I am going to create a new style sheet, called blogstyle.css, and link to it underneath of the links to the 960 style sheets.
  • In that stylesheet I am going to add a little color and some other simple styles to my markup. I am not going to mess with positioning though.

The final result should look like this:

2 Column 960 grid with simple CSS applied to header, sidebar, main content, and footer

 The HTML in the head section of the page should look like this:

<head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>My Blog - My Name</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" /> <link rel="stylesheet" type="text/css" media="all" href="css/blogstyles.css" /> </head> 

And the CSS file, blogstyle.css, should look like this:

/* My additional styles to add to the 960.gs styles */ 
body {color:#333333} 
#header {background-color: #D7EDEE; border-bottom: 3px #115B77 solid;} 
#footer {background-color: #D7EDEE; border-top: 3px #115B77 solid; color: #666666;} 

a:link {color: #115B77; text-decoration: none;} 
a:visited {color:#332745; text-decoration: none;} 
a:hover {text-decoration: underline} strong {color:#222222}

Preparing Our Markup to Add Our Own CSS Positioning

Changing positioning with CSS can be a bit tricky with the 960 framework. If you add margins or paddings to elements that the framework has styled to have specific width, margins, and paddings you can mess up the entire flow of the grid. What we are going to do to get around this problem is to add an extra div inside of the divs with the 960 class applied to it. Then we can apply our margins and paddings to the nested div without messing up the 960 system. This does add more markup to the page, but we knew going into this project that CSS frameworks have a tendency to add extra, non-semantic markup to our pages, so we are going to keep moving. Here is an example of what the header division looked like before:

<div id="header" class="grid_12"> 
	<h2> My Blog </h2> 
	<p> Description of my blog </p> 
</div>

and after we added the nested div. Notice that I also moved the id down to the nested div.

<div class="grid_12"> 
<div id="header"> 
	<h2>My Blog</h2> 
	<p>Description of my blog</p> 
</div> 
</div>

Go and make similar changes to the rest of the site until you have something that looks like the code below:

<div class="container_12"> 
<div class="grid_12"> 
	<div id="header"> 
		<h2> My Blog </h2> 
		<p> Description of my blog </p>
	</div> 
</div> 
<div class="clear">&nbsp;</div> 
	<div class="grid_9"> 
	<div id="maincontent"> 
		<h1>Title of the blog post</h1> 
		<p><strong>Published on Jan. 01, 2009 by Zac Gordon</strong></p> 
		
		<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. 

		Cras dui risus, interdum sit amet, adipiscing at, venenatis quis, quam. 
		Morbi velit tortor, fermentum ac, sagittis quis, volutpat sed, magna. 
		Curabitur eu tellus eu magna laoreet vestibulum. Fusce accumsan mollis 
		ipsum. Morbi tempor vehicula est. Duis pharetra velit. Vestibulum blandit 
		ultricies nibh. Nulla vehicula mauris sed sem. Aliquam mauris metus, 
		commodo at, elementum quis, porta a, nisl. Nulla elementum fermentum 
		massa. </p> 
		
		<p>Cras posuere, est quis adipiscing suscipit, dolor felis pulvinar 
		lacus, ut placerat orci metus tincidunt orci. Curabitur elementum purus 
		vitae diam. Morbi ut dui cursus augue scelerisque molestie. Suspendisse ut
		velit et massa interdum dictum. Praesent quam neque, fringilla eget, 
		blandit id, sagittis id, justo. Proin pulvinar placerat leo. Etiam at 
		mauris id justo ultricies scelerisque. Donec mattis dui ut tellus. 
		Vivamus interdum lorem ac ante. In nisi tellus, tristique vitae, rutrum 
		at, elementum adipiscing, risus. Integer ac est ultricies nibh pretium 
		scelerisque. Aliquam luctus eros non eros. Vivamus mi orci, suscipit 
		eget, imperdiet vitae, consectetur fermentum, erat. </p> 
		
		<p>Fusce dignissim sapien vitae turpis. Quisque consequat convallis 
		sapien. Curabitur est sapien, ultrices nec, commodo a, hendrerit eu, 
		lectus. Curabitur eu quam. Ut non risus. Sed eu tortor. Proin nisi. 	
		Aliquam congue adipiscing orci. Fusce imperdiet ullamcorper metus. Ut erat
		ligula, posuere a, fermentum vel, aliquet eu, lorem. Pellentesque habitant
		morbi tristique senectus et netus et malesuada fames ac turpis egestas. 
		Pellentesque tempor nulla eu lorem. Suspendisse bibendum molestie nunc. 
		</p>
		
	</div> 
</div> 
<div class="grid_3 "> 
	<div id="aside"> 
		<h3>Navigation</h3> 
		<ul> 
			<li><a href="#">Home</a></li> 
			<li><a href="#">About Me</a></li> 
			<li><a href="#">Articles</a></li> 
			<li><a href="#">Contact</a></li> 
		</ul> 
		
		<h3>More Articles:</h3> 
		<ul> 
			<li><a href="#">Article 1</a></li> 
			<li><a href="#">Article 2</a></li> 
			<li><a href="#">Article 3</a></li> 
			<li><a href="#">Article 4 </a></li> 
		</ul> 
	</div> 
</div> 
<div class="grid_12"> 
	<div id="footer"> 
		<p> Footer information like email and licensing for site </p> 
	</div> 
</div> 
</div>

Adding Positioning to Our Page With CSS

Now I am going to add some padding to the header, maincontent, and footer. The updated style sheet should look like this:

/* My additional styles to add to the 960.gs styles */ 

body {color:#333333} 
#maincontent, #header, #footer {padding: 0 20px;} 
#header {background-color: #D7EDEE; border-bottom: 3px #115B77 solid; margin-bottom: 20px; padding-top: 10px} 
#footer {background-color: #D7EDEE; border-top: 3px #115B77 solid; color: #666666; margin-top: 10px; padding-top: 10px} 

a:link {color: #115B77; text-decoration: none;} 
a:visited {color:#332745; text-decoration: none;} 
a:hover {text-decoration: underline} 

strong {color:#222222}

And the final site should look like this: 

Finished 960 grid layout with basic styling

Final Notes

There is a lot more that we can do with this site, but this should be enough to get us to the stage where we feel comfortable to do that.

Check out the second addition to this tutorial on using the 960 framework to build your own semantic CSS framework.

Correction:

Thanks to Roxy for the following point: I had to change the header and maincontent areas to have separate DIVs for class and id. However, the footer keeps them together, and I found that the footer lacks the appropriate bottom space (as shown in both the screencap and the functioning example) if you separate the id and class into two DIV layers. The sidebar seems impartial to either way.