Prototyping With The Grid 960 CSS Framework

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.

1. 60px
2. 140px
3. 220px
4. 300px
5. 380px
6. 460px
7. 540px
8. 620px
9. 700px
10. 780px
11. 860px
12. 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!