Prototyping With The Grid 960 CSS Framework
Tutorial Details
- Difficulty: Intermediate
Grid 960 is a CSS Framework that enables developers to rapidly prototype designs. They are excellent tools for creating mock ups. Why? Because they do all the heavy lifting allowing you to get faster results.
That sounds nice, but how do we do that? There are a lot of articles on the internet blasting or supporting CSS frameworks, but none have any content to help inexperienced readers decide. This one is different. This article covers the entire prototyping process. Imagine you are given a design and you need a mock up for the client. This article explains the basics of Grid 960, planning the grid for a design, and coding the prototype. The sample design will exploit most capabilities of Grid 960 giving you a firm knowledge base to work on. After you’ve seen the design below, its time to learn about how Grid 960 works.
1. Making the Grid
Grid 960 works by using classes through inheritance. Grid 960 provides two grids: 12 and 16 columns. The main container is always 960px wide. Using 960 allows the most combinations of column while being easy to work with. We will use the 12 column grid to code this design, but we will not use all 12 columns. Every grid cell has a margin: 0 10px. This creates a gutter of 20px. When creating a row, the total width of all elements add up to 960. Take a look at Grid 960′s demo page. You will see a nice grid with all sorts of combinations. Each grid cell has a class that specifies what width it will be. Here is the break down of column widths for a 12 column grid.
- 60px
- 140px
- 220px
- 300px
- 380px
- 460px
- 540px
- 620px
- 700px
- 780px
- 860px
- 940px
Each width corresponds to a class name formed like this: grid_X where X is a number from the above list. If you want a block with width 940 use class grid_12. How does Grid 960 know what width it is supposed to be? Each grid_x is a selector container_Y .grid_X where Y is either 12 or 16 for columns. Lets dive into some code. Here’s how to create a two row grid in a 12 column container. Let the first row be 940px, and the second row contain two equal columns.
<div class="container_12"> <div class="grid_12"><p>940px</p></div> <div class="clear"></div> <div class="grid_6"><p>460px</p></div> <div class="grid_6"><p>460px</p></div> <div class="clear"></div> </div>
When creating a row in the grid, make sure all the child grid_X numbers add up to the number of columns you’re using. This ensures the correct width. Two grid_6 div’s add up to 12. You are no limited to the same numbers. You could also use 6, 4, and 2. There you have it, a quick grid ready for content. Now that you know how Grid 960 works, lets see how to create the mockup.
2.The Mock Up
Visualizing the design’s grid is easy. There is one row for the header image, a row for the nav bar, a row with 2 columns for the headline story and poster, a spacer, 4 columns, a spacer, than a footer with 3 columns. Click on the image for the code.
After checking out the visual, you should understand how to create the mockup’s grid. Using the widths, match up the class #’s from the list and lets throw some code together. Remember to add the clearing div at the end of each row. Don’t forget to include the stylsheets included in the Grid 960 package.
<div class="container_12"> <div class="grid_12"></div> <div class="clear"></div> <div class="grid_12"></div> <div class="clear"> </div> <div class="grid_7"></div> <div class="grid_5"></div> <div class="clear"></div> <div class="grid_12"></div> <div class="clear"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="clear"></div> <div class="grid_12"></div> <div class="clear"></div> <div class="grid_4"></div> <div class="grid_4"></div> <div class="grid_4"></div> </div>
The skeleton is ready. Time to start overlaying the design. The green bars are just divs with a background color and height. The navbar does not have a set height. Instead, it will be controlled by the size of the links inside. Don’t forget to add the header image as well.
div.spacer {
background-color: #8FC73E;
height: 1em;
}
div#navbar {
background-color: #8FC73E;
padding: 10px 0;
}
Apply the class to correct grid_12 divs and set the ID.
<div class="container_12"> <div class="grid_12"><a href="images/header.png" alt=""/></div> <div class="clear"></div> <div class="grid_12" id="navbar"></div> <div class="clear"> </div> <div class="grid_7"></div> <div class="grid_5"></div> <div class="clear"></div> <div class="grid_12 spacer"></div> <div class="clear"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="grid_3"></div> <div class="clear"></div> <div class="grid_12 spacer"></div> <div class="clear"></div> <div class="grid_4"></div> <div class="grid_4"></div> <div class="grid_4"></div> </div>
The middle columns don’t require any effects. Add some place holder text to fill out the design. You can make some here. Before tackling the top section, move to the footer. In the screenshot, the footer is a solid color. You cannot accomplish this with the current code. A wrapper div around the bottom three columns solves the problem. So you think, no big deal, just insert a div. That breaks the grid since Grid 960 relies on parents and children to apply the styles (remember the selector container_12 .grid_4?) A subgrid solves the problem. Grid 960 allows nested grids. Create a subgrid by adding a grid_12 div, then place the grid_4′s inside it. When using nested grids the children elements require special classes. The first child needs a class "alpha" and the last child a class &qout;omega" Edit the markup to reflect the changes and apply stylistic changes to the footer.
<div class="grid_12" id="footer"> <div class="grid_4 alpha"></div> <div class="grid_4"></div> <div class="grid_4 omega"></div> </div>
div#footer {
background-color: #e5e5e6;
}
Excellent! Now the footer has a solid background color and you can adjust the sizes of the columns if needed. Add some dummy text to the footer columns for right now and lets move to navbar. The navbar is a simple unordered list. Add some links and proper styling.
<div class="grid_12" id="navbar"></div> <ul> <li>Articles</li> <li>Topics</li> <li>About</li> <li>Editors</li> <li>Contact</li> </ul> </div>
div#navbar ul {
list-style: none;
display: block;
margin: 0 10px;
}
div#navbar ul li {
float: left;
margin: 0 1.5em;
font: bold 1em Arial;
}
Sweet. The page is really coming together. All that’s left is creating the block effects on the top section. This is more sinister than it appears. Before we diving in, you need to realize some things about Grid 960 and CSS frameworks in general.
3. CSS Frameworks Do Not Solve All Your Problems
Astute readers may have realized something. The page is extremely rigid. Everything has a defined size and changing the size creates problems or potentially breaks the design. Designers also sacrifice some of our design goals because what Grid 960 allows. For example, the sample design was 1000px wide. Grid 960 only creates grids 960px wide, so the extra size is lost. What if you want to make your page 1000px instead of 960? In short, you can’t without doing some heavy modification to the code. The framework locks designers into a set of constraints. Say the client wants a design that is wider or thinner. The designer will most likely have to scrap the code they’ve written to accomplish the new goals. There is another problem that hasn’t been revealed yet–equal height columns. Since the middle columns all share the same background, they appear to be equal heights. In the footer a wrapper div puts a background behind the 3 columns. Grid 960 does not give you equal height columns. There is of course a way you can accomplish this on your own. Since we are prototyping a design, don’t spend time worrying about the finer details on how the design will function when in production. You are only trying to convey the ideas at this stage. There is also another aspect of Grid 960 to take into account before tackling the top section. Grid 960 relies on sized elements and margins to create a correctly sized row. If you apply padding or borders, the design breaks. If you do, you have to adjust the size of the div to reflect the changes. Be weary of this. Adjust the sizes of elements in two places will always lead to confusion and make the design harder to maintain. That being said. Lets finish the top section.
4. The Top Section
Luckily you can maneuver around equal height columns in the top section. Since the image on the right as a set height and width, we know the other column’s size. Create the block effect by adding a new div with a border inside the existing divs. Don’t forget to set the heights. Don’t set padding on the divs because that will change the width of block and break the grid. Instead specify a margin on a child element. This will not change the width of the block. Apply a margin to an inline element. This creates the desired effect and the text wraps to fit.
<div class="grid_7 topSection"> <div> </div> </div> <div class="grid_5 topSection"> </div>
Use a class instead of ID because the topSection class is applied to two divs. This also allows us to change the heights easier. Choose a height (this number is really up to you) and create a class.
div.topSection div {
border: solid 10px #e5e5e6;
height: 280px;
}
div.topSection div p {
margin: 10px;
}
Cool! Lets check out the progress.
Ready to fill the two boxes? Go ahead and fill the left one some with some sample text. Don’t make to much or it will overflow the box. This creates a potential problem in the final design. How do you know how much text is too much? For the production design, the designer would need to create a function to only allow X amount of words to stop the over flow. Time to get the poster image ready. Before inserting an image determine the dimensions. If you are good a math and understanding the box model, you most likely already know how big it should be. If you don’t, fire up FireBug and take a peak into the DOM. Click on Inspect. Get down to the div in question and click on it. Open the Layout tab. FireBug will display a helpful box model reference. Check out the image for help. Click on the image for fullsize.
The screenshot shows the poster div is 360×280. Find an image and create a style. I decided to let the image fill the entire div (unlike in the sample design.) If you wanted to create a 10px margin make sure to reduce the dimensions by 20px on each side.
img#poster {
width: 360px;
height: 280px;
}
You should get this. The mockup is complete. Feel free to throw in some real text and change the image around.
5. Know Thy Limits
Now that the prototype is finished,to take stock what has been done. You’ve manage to quickly prototype a design. Grid 960 easily created the grid for us. Where do to go from here? Naturally we would show the client and see what they think. There are a few caveats though. Have you tested this design in IE6 or IE7? No. Should we? No. This is a prototype. This is what it would look like in production. It is natural that any browser quirks would be worked out before production. What if the clients wants to create a more complex design? In this case, you will quickly start to see the limits of the framework. What if the design needs to be liquid or elastic? The framework will no do that. You would need to start from scratch. Remember that CSS Frameworks do not solve all your problems, but they do help with some. Grid 960 as well as others are great for throwing together prototypes. You can just as well use the concepts of Grid 960 in the production code, but it is not recommend sticking with a framework all the way through production. CSS frameworks are just like any tool, they have their uses. With that in mind, go forth and prototype!
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
Premium Members
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription. Join Now
Related Posts
Premium Membership
Source Files, Bonus Tutorials & More for all relevant Tuts+ sites in one subscription
Rockstar WordPress Designer
Now updated for WordPress 3.0, this classic book on WordPress theming and design has sold over 3500 copies! Get yours now!
Top Selling
on Codecanyon
jQuery Lightbox Evolution only $12.00 
Events Calendar Pro - Wordpr ... only $30.00 
danmoore - More
Web Basix
Just getting started? Start with our basix tutorials on the fundamentals. View All Basix Tutorials
Other Plus Sites ...
aetuts+ audiotuts+ vectortuts+ tuts+ phototuts+ cgtuts+ nettuts+ psdtuts+ activetuts+ mobiletuts+Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
Hi,
. But, but 
, I have a question.
Very good tutorial
When I try this :
Lorem ipsum dolor sit amet,
Lorem ipsum dolor sit amet,
With this CSS :
div.topSection div {
border: solid 1px #e5e5e6;
height: 280px;
}
It’s break my columns. Any ideas ?
And if I want to add a border, only and all around the , it’ the same problem.
Fabrice
Great Tutorial…The Grid 960 system rocks!
Nice!!
Great tutorial. I can not get the three columns in the footer to work. I’m using the stylesheet, but I’m not understanding the “alpha” and “omega” concept — for lack of a better word. I’m only getting two collumns side-by-side and the third column is underneath the first column. Any help?
maybe this will help…
simple:
You use OMEGA and ALPHA so they wont add an overall width to their “parent”…. anyway heres something else..
you can go on and on…
And for explanatory purposes you can also use 2 alphas w/o an omega.
.. play around with it in dreamweaver or something… anyway use divs sparingly and plan accordingly so you wont have to resort to ALPHAS and OMEGAS too much.
For anyone new at this and finds it confusing even after the nice tutorial, two Firefox addons that helped me a great deal were “Firebug” and “Web Developer”. Once you have those installed check out http://960.gs/demo.html and use “Web Developer” to show ID and class details (it will be on toolbar under “Information”) of the page. Then use “Firebug” to select/inspect divs and experiment moving things around.
Its an awesome tool but must be utilized effectively. First its intention must be defined..well its basically a structural tool, thats all there is to it. Only after I define all my HTML tags and elements do I even touch 960. After that Im on my own. The main problem that seem to pop up with 960 is its semantics. Right now the way I get around that is ..ex ( id = “header” class = “grid_8)… For now that how Im doing it..Im not too familiar with LAMP … but judging with how 960 dealt with width constraints… I cant wait for semantic960…
Demo is broken
I found a fix for a bothersome quirk concerning a background image in my container (this creates the backdrop for the container itself). I had two different pages that needed to be two different heights but needed to display the same container image, which is a 5px high x 950px wide slice of color that i used “background-repeat: repeat-y;” to display. Because the containers height is set, if the content extended longer, i was left with a gap. To remedy this i took out the height directive in the container class, and defined a new class named “.vert1 {height: 900px;}” and a second named “.vert2 {height: 820px;}. I invoked these in their respective pages like “” to place this at 900px high and the other page had vert2 declared. You could mod this and essentially create a grid matrix.
See im still learning this, and there may be a built in way of doing this already. If there is ofcourse i would revert to that, but for background imagery that tends to be static this seems to work.
By all means if some one can point out a simpler way, speak!
sorry the directive that is missing is
the directive that i was referring to is div class=”container_16 vert1″
another helpful tip for using this system, when designing its is some times hard to figure out what the grid is doing with your content, it doesnt do what you expected, this is a matter of troubleshooting the code and finding out what is out of place. to create a visual aid you can define a class callled “.show” and in it define a background color. add it to the grid class in your div and you will be able to visually see what it is doing. you can take that out when done. it really helps to trouble shoot positioning or determine if you need “grid_1″ spacing anywhere
nice work
A perfect introductory article; cheers.
Hi,
does anyone know if it is possible, to throw the whole grid in a 2 comlumn container of eg 1200 px width, where left div would be 240 wide and the main container would hold the grid?
Its a very good tutorial but i don’t like the way 960 restrict a developer within 960px. What you gonna do if its bigger than 960.
So if you are clever enough you will make a new framework using those good techniques. May be i am not exactly Wright. But i feel more comfortable to play around with my own coding.
Agree~!
A good tutorial.
This is a nice tutorial.
960 is good for creating a fixed width web layout.
Is this suitable to create fluid type layout?
I guess elastic css is the best to create a flexible type 100% width layout.
Nice Tutorial….
Oops, that allowed html, I guess I need to change it to not show it as html:
Sorry for the repeat:
If I just want to make a web form, without using tables, what do you suggest?
For instance:
First Name: <input type=”text” name=”fname” size=”40″ class=”formfield”>
Last Name: <input type=”text” name=”lname” size=”40″ class=”formfield”>
eMail Address: <input type=”text” name=”email” size=”40″ class=”formfield”>
….
How could I put that in two columns where I can format the data in the columns using css?
Here is how I do it in tables:
<table border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” width=”650″>
<tr>
<td class=”td_header” colspan=”2″>
Join Our Club Registration System
</td>
</tr>
<tr>
<td class=”label_cell”>
First Name
</td>
<td class=”non_label_cell”>
<input type=”text” name=”fname” size=”40″ class=”formfield”>
</td>
</tr>
<tr>
<td class=”label_cell”>
Last Name
</td>
<td class=”non_label_cell”>
<input type=”text” name=”lname” size=”40″ class=”formfield”>
</td>
</tr>
<tr>
<td class=”label_cell”>
eMail Address:
</td>
<td class=”non_label_cell”>
<input type=”text” name=”email” size=”40″ class=”formfield”>
</td>
</tr>
… more cells
</table>
Any idea how to do this without taking a the whole width of the page and without using tables, using either div tags or span tags??
I have been trying w/o success.
Thank you,
Richard
I am new to 960. I tried to used up all the 960px as my content layout by using +alpha at the first column, and +omega at the last column. but seems +omega doesn’t work for the last column, so I can only get 950 with 10px margin space at the very right of my page. Is there anyway I can used all the 960px as my layout content width?
same here!! did you fix your problem
It was very helpfull … Thank u..
The Demo Link is broken.
I gues there is a small error in this part of tutorial code:
Articles
Topics
About
Editors
Contact
This div get closed two times: in the first line and in the last.
hello
i am trying to revamp the UI of a web application for a client and i am using to 960 grid to have a rapidly protype something.
But i have a problem in IE6, the client’s default/standard Internet Browser.
The homepage of the application has a box containing the login form that is centered in the midle of the page.
I used suffix and preifx of equal value to center that box, i get the desired effect of a grid_4 box centered by prefix_4 and suffix_4. But in IE6 although the box is centered, it looks wider than the desired effect i was looking for.
I am using the 960 fluid version and my doctype is xml 1.0 strict with no xml declaration in the html tag.
Thanks in advance for your help
Its good to have the grids it makes your site clear but there is no point of the CSS becouse you might have to change it anyway so it might get a bit comfusing
Thats my opinion thanks anyway.
Thanks for the great tutorial. I’m sorry I didn’t find this framework earlier! One glaring drawback is that it’s not fluid for extra-wide monitors, but I found a fluid version modified by Stephen Bau. Cheers
Muito Bom, este framework.
Abraços a todos.
It was helpful and 960 Rocks!
Thank you for this tutorial.
I was just wondering if anyone knows exactly why it is that the developer/s of gs960 includes the following in the HTML:
I’ve done quite a few cross-browser/cross-platform tests after making a couple minor adjustments to the gs960 HTML and CSS, and with my changes in place the same result is achieved the “clear” class has specifically been designed to do. But am I overlooking something? My changes just seem to easy, surely I must be missing something!
What I’ve done to remove the garbage of a multitude of divs placed in HTML with the sole purpose of clearing items before and after itself is to firstly, remove from your HTML any instances of
; and, secondly, in the CSS file I locate.container_12, .container_16and add the additional CSS specificationoverflow: hidden;Like I’ve just said, I’ve tested this quite a bit, but despite that I feel like I must be missing something — after all, this is just too damn simple a change, right?!
Nice post Adam. Thanks :lol
i think , i can not use it!
help me please,my email is huangxiaochun@yahoo.com.cn
Hi,
I am new to this Grid960 and I have a question. Is there a way that I can instruct a grid to span 2 rows? The idea that I have is explained below but let me walk thru.
Lets consider I have a Container_16 and I am creating a header,
1. First row has a grid_12 and grid_4 div
2. Second row has a grid_12 and grid_4 but this second div should span 2 rows (denoted by *)
3. Third row would then be just grid_12.
———————————————————-|——————-| (first row grid_12 grid_4)
———————————————————-|*******************| (second row grid_12 grid_4(rowspan 2))
———————————————————-|*******************| (third row grid_12)
The idea is to have some contents in * section cover 2 rows without compromising the layout. Hope this explains. Thanks
@Fahd
Did you ever find a solution to this?
I am having the exact same problem.
Thanks
the link at the top of the page to the demo is broken.
http://broadcastingadam.com/static/articles/grid960/960.html
Good tutorial. Easy to understand the framework
I just spent some time making a mockup…I am trading in the “I did it all by myself” for the time saving and flexibility 960 provides. If you already know CSS and the box model (or at least have a sense of it), you will really appreciate this framework.
How many times have you had a design all set to go and the client makes a change, and that change blows up your box model / CSS and you have to resort to using an AP DIV to save you the time of having to rebuild the entire page?
This hack bothers me much more than using a cookie-cutter framework. If the client wants to add a new web page section now, after the page is complete, no problem! And, if you go back to 960.gs they now have a custom CSS generator where you enter the width and the # of columns and it adjusts the CSS framework accordingly…brilliant!
Send Nathan a donation…he deserves it.
Have a look my framework maxstyle. Its more flexible than 960 Grid System.
Can someone talk about the reset.css? In the original article by the author of 960.gs, he shows a table with the different browsers that this is compatible with. Has it been brought up-to-date for the latest versions of those browsers? If not, how does that affect the design when the site is brought into the latest version of say, IE for example? I like the idea of using this system, being a print designer for 20 years, it would be my preference. I don’t completely understand how each browser can start with differing margins, and I get into trouble trying to get the site to work the same way across browsers and platforms. I would love to see an explanation of the reset, how/why it works.
Great tutorial Adam. Everything works exactly as described. Im new to CSS and found the framework to be a great beginners aid. I was wondering if anyone would know how to get the ul navigation to align left. So that the word Articles would be aligned with the left side of the background. Any help would be much appreciated.
awesome tutorial… thanks
I’ve not used 960 before, but I used blueprint CSS framework, which is better?
You have a typo:
&qout;omega
Hi all my lovely fellow web designer, I have a quick suggestion.
Notice in the 16 grid version you don’t have the option of setting a column that is a third of the width of the page? In the 960.css file add in the class “.container_16 .grid_third” to the same declaration as .container_12 .grid_4 (should be 300px wide).
…and hey presto, if you invoke the class “grid_third” in your 16 grid setup you’ll be able to make three idential columns. Sometimes you’ve got to play around to get where you want to be.
I like your tutorial. It’s very helpful and understandable written so that I learned a lot. And with the Firefox Addons Web Developer and Firebug (with all its extensions) I learned a lot about the 960gs when visualizing all div’s ID’s and classes.
Very fine work man and keep on writing those useful articles and tutorials.
- Thanks a lot and greeting from Germany -
Very interesting tutorial, but can you answer a question please?
In any combination of boxes, I can’t get any headings or ul’s into any boxes, they end up outside the boxes. If I start a new paragraph it forms a new box underneath. I’m not new to css but I’ve obviously missed something. Could you point me in the right direction please?
Pete