Register | Forgot Login

Tutorial for the 960 Grid System CSS Framework

03.05.2009

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:
The gird

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:
    Blank Grid
  • 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:
Basic Looking Page

And the markup:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<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:
Site with basic style applied

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 site with styles applied

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.

Comments

Astroloji 06.8.09

Thank you very much…

Jason O'Brien 06.15.09

Good intro to the 960.

I recently covered some tips and tricks for designing with 960 in the hopes that we can open up frameworks for the less developer-savvy designers out there: http://blog.centresource.com/2009/06/15/6-tips-and-tricks-for-designing-with-960/

Keep up the good work.

Dhamphy 08.17.09

Thanks for this.. very good tutorials..

clark 09.28.09

I am a freelance designer, I have been using 960 grid for over a year now, 60% of my site are using 960 now, it saves me lots of time. 960 grid rocks!

Fabrice 09.29.09

hi,

Thanks for this tutorial smile.

But I have a question, and a problem smile. If I want to design the right column (#aside) with a border :

#aside{
border:1px solid red;
}
..... it’s break the page :(.

Regards,
Fabrice

Fabrice 09.29.09

again me…

The solution :

<div class=“grid_3 “>
      <div id=“aside”>
        <h3>Navigation</h3>
        <ul>
          <li>Home</li>

        <li>About Me</li>
          <li>Articles</li>
          <li>Contact</li>
        </ul>
        <h3>More Articles:</h3>
        <ul>
          <li>Article 1</li>

        <li>Article 2</li>
          <li>Article 3</li>
          <li>Article 4   </li>
        </ul>
      </div>
  </div>

and

#aside{
border:1px dotted blue;
padding:10px;
}

It’s seems it’s not work all the this, it’s dependsof the design, and if columns are include in others columns.


Regards,
Fabrice

Zac Gordon 09.29.09

Hey Fabrice, the thing you have to remember is that borders affect the width of an element, which can throw off floated elements wink

Fabrice 09.29.09

Hey,

Thanks for your answer, but… I see it unfortunaly smile wink.
For now, do you know how i can do that ?

Fabrice

Fabrice 09.29.09

and so, if I do this, it’s ok :

  <!—Top Section—>
  <div class=“grid_7 topSection”>
      <div><h1>Sample Article Title</h1>
      Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
      </div>
  </div>
 
 
  div.topSection div {
      border: solid 1px #e5e5e6;
      height: 280px;
  }

  div.topSection div p {
      margin: 10px;
  }

But that, it’s a little bit ... not good :

  <!—Top Section—>
  <div class=“grid_7 topSection”>

      <div class=“grid_4 alpha”>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
      </div>
      <div class=“grid_3 omega”>
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa.
      </div>
     
  </div>

I tried several things to border severals grid_* item, but it’s seems not easy.

Fabrice

Holler at this article

Comment Form

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

  • Setting up github to share CodeIgniter source code with Springbrook web dev students. (03-09 11:37)
  • Just posted up information on the High School Web Conference next month http://bit.ly/9bkgXr (03-09 9:26)
  • Refresh Rockville information for the meetup tonight is live http://bit.ly/aQ3DOC (03-09 8:34)
  • Refresh Rockville: Project Management (Tues. night 7-8 @ MC) Will post details tomorrow (03-09 12:48)
  • Just setup Web 1 students at Springbrook with accounts on welovewebdesign.com ... look for cheap hosting for all web students soon! (03-08 9:06)
  • @mrbhachu Thanks about the jquery tutorial. I'll put it in the docket to make a new example for dropdown lists! (03-07 3:37)
  • Just submitted the reading list for the CMS course at MC: http://digwp.com/book/ http://bit.ly/boVz1n http://bit.ly/a3teWI (03-06 10:53)
  • A free event on preparing content for 508 accessibility! Great follow up on the accessibility lecture from last night http://bit.ly/bZRJUO (03-05 10:14)
  • The DaBrook.org forums are now live! http://dabrook.org/forums/ (03-04 11:04)
  • Great Advanced Web class tonight. I really enjoy the students this semester ... your forum is coming! (03-04 10:41)
  • First example of a student using the "Steal this theme" download from DaBrook - Nice work thrasher! http://bit.ly/bI4NIX (03-04 5:19)
  • It's amazing how fast the latest updates on my #ee grading module make grading. Love it! (03-04 5:04)
  • The MC Advanced Web class now has an archives page! http://bit.ly/aiRUhw (03-04 9:31)
  • Looking forward to subbing tonight for a class at CDIA working on WordPress theme development (03-03 2:57)
  • Web 1 students are working on their portfolios. Coming along nicely! (03-03 7:43)
  • First tweet for DaBrook.org Tweets http://dabrook.org (02-23 11:14)

    • What's current:

yeah, licensing is important, but I'm pretty cool with it.

In the wrong place? Go back to the top.

Can you decifer the graffiti?