Using the 960 Grid System as a Design Framework

The 960 Grid System has been around for a while now… but it’s been mostly used on the coding side of projects as an HTML/CSS framework. Today, we’re going to discuss the advantages of using grid systems like 960GS at the very start of a project, before you even open up Photoshop or Fireworks. If you haven’t used a framework before, or you just want a good refresher, this is a great place to start!

Diving Into Frameworks

Chances are good that you’ve already heard of or used some sort of CSS framework already… but just in case, let’s review the key benefits of using a CSS framework (aka grid system) in any web project:

• Provides a “framework” that’s designed to look good on all monitors.
• Streamlines the design process by defining exact measurements.
• Reduces development time by providing pre-coded HTML/CSS.
• In a perfect world, it helps designers and developers communicate better – smoothing out the process of moving from Design to Coding.

Ultimately, a CSS framework should help establish some basic guidelines for content columns, while still providing designers with full control over their designs.

In this article: I’m going to explain what a CSS framework is, and why I chose 960. Then, I’ll go over the basics of how to apply the 960 Grid. To wrap up our discussion, I’ll show you a few sites that are using the 960 grid, and how they are structured.

CSS Frameworks: A Brief Overview

A CSS Framework is a series of stylesheets created to make a web developer’s life easier. They account for the various quirks of browsers, are easily adaptable, and apply basic design principles (such as establishing visually pleasing margins between elements).

Oftentimes, these frameworks also have typography stylesheets, which can act as a great place to begin working on your site’s typography (for more information about Typography, check out this article).

There are two major CSS Frameworks at the moment: Blueprint and 960. Both are perfectly capable frameworks, with great features and ease of use. It simply comes down to a matter of preference of which Framework you feel most comfortable using.

Before you begin the design phase of a project, it’s important to discuss the selection of a framework with the person who is going to code the site. Often, developers will have preferences towards a particular CSS framework, and as one of the main reasons we use frameworks during the design phase is to smooth out the transition from design to coding, it’s a major decision. If you’re coding the project yourself, just make sure you are comfortable with the grid framework you pick – there’s nothing worse than design an entire site based on a framework that you end up disliking.

960 GS: The Gritty Details

Personally, I found the 960 Grid suits my needs better, so that’s what I’ve adopted and that’s what we’ll be discussing in this article. However, the overarching principles that we’ll be discussing will apply to any framework, including Blueprint.

960.gs is based around putting all of your site’s elements in a 960px wide (clever girl) container, and dividing that container into 12, 16, or 24 equally sized columns. They provide a tool to use alternate widths, but 960 is what the entire system is developed for and it happens to look pretty sharp.

The CSS Generator at 960GS

Why 960px? Because 960px is a width that is suited for the wide number of platforms on which we browse the web. It essentially allows for a 1024px wide monitor to show the site accurately and without horizontal scrolling, accounting for the width of the browser chrome, scrollbars, and a bit of padding for legibility. There is always a 10px margin placed at the right and left of the main content column, which means that smaller browsers will always be able to read the farthest left content without the text butting but against the browser window.

Additionally, all numbers in the 960GS are whole numbers based on the golden ratio – there are no decimal points or funky spacing issues. If you’ve read our article on Mathematics and Web Design, you know how important getting these numbers right is.

One of the glaring omissions, or nice features, depending on how you look at it, is the way the 960 handles (or doesn’t) typography. There is a text.css file included, but this is mainly to ensure that there is at least a something in place, so that as you do rapid prototyping, common elements such as headings, paragraphs and lists have basic styling.

How is Blueprint Different?

I won’t go into too much depth here, but let’s briefly discuss the key differences between 960.gs and Blueprint. First, Blueprint is a CSS framework that’s based on 950px – it’s very similar to 960 in the way that it handles the basic layout stuff (BP uses 24 columns with similar approaches to padding and ratios)… but that’s where Blueprint stops being similar.

Blueprint does allow for form-specific styling and notifications, something I wish 960 would implement.

Blueprint is a much more complex, robust, and comprehensive framework system. It’s been built as a full fledged stylesheet for pretty much every element that you can think of (radio buttons, tables, etc.). There are things I like about Blueprint, the most notable being its styling for form elements and built in notification classes. Additionally, it includes a full suite of styles for:

• Typography – BP provides typography size and spacing defaults for all elements.
• Form Element Styling – Styling for forms and some classes that can be used to add to forms (like required fields).
• Print Styles – Print stylesheets for when surfers hit the print button.
• UI for Plugins – Pre-built CSS (and sometimes images) for buttons, tabs, and sprites.

The problem that I had with Blueprint is that it’s just too complex to use at the design phase… creating a design from scratch means re-formatting everything that they provide, and it’s often hard to keep up with the sheer comprehensiveness that BP provides. In contrast, 960.gs offers just a layout – perfect for letting a designer get creative within realistic boundaries.

Using the 960 Grid System

The 960 Grid is almost frighteningly easy to use (in fact, you may start to ask yourself: “Why wasn’t I using this earlier?”), with only a few simple rules you need to abide by.

Download the 960 Grid from 960.gs

After you download it, take a look inside the directory you just unzipped. I want to draw your attention to two folders: “sketch_sheets” and “templates”. The “sketch sheets” folder contains a PDF of the various grid sizes in a within a browser window, and the “template” folder contains templates for almost every graphics program under the sun (such as GIMP, Fireworks, and Photoshop).

Sketch Sheets: Making Your Life Easier…

The purpose of a CSS Framework is to make your life easier, and you should always be looking for ways to help you decrease the time it takes to create a design. Use these templates when creating a design in Photoshop, print off copies of the “sketch sheets” when discussing the details of a project with a client (and make sure to look at this before you go!).

Example of a printed out Sketch Sheet… with some sketching on it.

In fact, I would suggest using these sketch sheets every time you start a project: they’ll allow you to experiment freely before locking yourself down to any layout. It will only take you 5 minutes of sketching to realize a design will or won’t work, as opposed to 50 minutes+ if you had been designing and coding it.

Designing With the 960 Templates

Once you’ve come to a basic agreement on the sketched out concept for the site, it’s time to crack open the template files. This is probably the central reason why I like using the 960 system… it comes pre-packaged with templates for just about any program you can think of. I happen to use Photoshop, so here’s a screenshot of the provided template:

The key benefit here is simple: The template has pre-built guides for all of the main content columns that directly correspond to the CSS framework on the coding side of things. It’s easy to quickly draw your main content columns and keep everything in your design clean and organized.

Experienced designers might see this as “design with training wheels on”, but frankly, there’s nothing wrong with having a simple overlay system to help guide the framework for a web design.

You still have to design everything on the site (of course!), but by keeping your design in line with the guides, it’ll make the development side of things much easier. As as added benefit, having a uniform approach to padding between content cells is a great way to make your design look more professional. Read more about why “Pixel Perfect Comps” here.

Setting It Up

Now that you’ve gotten a design nailed down, it’s time we talk about the 960 grid syntax. As I mentioned at the intro, you can find a lot more information about using and prototyping with CSS frameworks at Nettuts, so I’m just going to cover the basics here.

First, you’ll need to reference the appropriate CSS files into your design: reset.css (the reset file that accounts for browser quirks), text.css (the built-in typography stylesheet), and 960.css (or 960_24_col.css if you are using a 24 columns grid). Usually, I place all of my site-specific styling in a separate file (usually called style.css), to ensure I don’t break anything in the Framework.

Quick Tip: Reference your own stylesheet after you reference the Framework, so that you can adjust specific aspects of the framework without altering the Framework itself (and if you make a mistake, you don’t have to re-download and overwrite the Framework’s files). With these 4 files, you’re now ready to begin to design your site.

Here’s a quick overview of the syntax, pulled from the 960.gs site:

<div class="container_12">
    <div class="grid_7 prefix_1">
        <div class="grid_2 alpha">
            ...
        </div>
        <div class="grid_3">
            ...
        </div>
        <div class="grid_2 omega">
            ...
        </div>
    </div>
    <div class="grid_3 suffix_1">
        ...
    </div>
</div>

The first div is your container, what your content will be stored in. By defining it’s class as “container_12″, you’re saying: “I want this container to have a 12 column grid” (The same practice applies when using a 16 and 24 column grid).

Now that you’ve defined the container as a 12 column layout, you begin to structure your site in such a way that it fits within the layout. If you look at the next div elements in the hierarchy (as noted by the tabs), you’ll see the syntax for their definitions. “Grid_7″ and “grid_3″ are easy enough to understand: you’re saying that this div element is going to take up X number of columns. However, 7+3 = 10 < 12, which means you’ll have 2 empty columns at the end of the container, right? Well, this is where the prefix and suffix aspect of the class definition come into play. With a class definition of “grid_x suffix_y”, you’re saying: “I want this div to take up X columns, and for there to be Y number of empty columns after it.” (This also applies to prefix). So, since “Grid_7″ has a prefix of 1, and “Grid_3″ has a suffix of 1, 7+3+1+1 = 12!

By now, I know you’re wondering about the Div elements nested in the “Grid_7″ div. Well, you can nestle divs which take up a specified number of columns inside another div, so long as it does not exceed the size of its parent grid. Furthermore, the first and last elements must have “alpha” and “omega” appended to their class definition, respectively. So, in our sample code: “grid_2 alpha” is the first div nested within “grid_7″, the next element “grid_3″ is in the middle (and therefore does not need an “alpha” or “omega” appended to it), and finally “grid_2_ omega” is the last div nested within “grid_7″. And since 2+3+2 = 7, the definition is proper.

Putting It All Together: A Short Example

For the purpose of illustrating this whole process, let’s go through a quick example of using the 960 Framework during the design phase of a personal project of mine.

The design itself is pretty simple, but it’s the perfect way to show you how the framework can act as a tool through the design process.

The Cerberus Website: The Example that We’ll Use

Mass Effect 2 is one of my favorite games of the past 5 years, and I felt creating a site for the fictional organization “Cerberus” would be a challenge. The main aspects of the organization are: professionalism and technological prowess, which I wanted to convey with a clean design that used their entire color scheme. To start, I sketched out the design for the site (it would be hypocritical for me to act otherwise, right?).

As I looked the design sketch, I saw how to make the design work in the 960 Grid.

Below is the HTML skeleton for my site:

<div id="container" class="container_12">
	<div id="header" class="grid_12">
		<div id="logo" class="grid_2 alpha">Logo</div>
		<div id="subHeader" class="grid_12 omega">
			<div id="tagline" class="grid_4 alpha"><h1>Cerberus: Strength for Humanity</h1></div>
			<div class="grid_8 omega">Navigation</div>
		</div>
	</div>
	<div id="content" class="grid_8">
		Content
	</div>
	<div id="sidebar" class="grid_4">
		<div class="sidebarSection">
			Sidebar
		</div>
		<div class="sidebarSection">
			Sidebar
		</div>
		<div class="sidebarSection">
			Sidebar
		</div>
	</div>
	<div id="footer" class="grid_12">Footer</div>
</div>
	

If you noticed, I had the logo only cover 2 columns, while the sub header took up all 12 spaces. Since the header div was 12 columns long, any sub elements can up to 12 columns long. This trick allowed me to make the header, as the logo was took up 2 columns, and left the rest empty (the image is actually the background image for the header div). And since the sub header was 12 columns wide, it filled up the entire width under the logo (since it couldn’t fit all of its content inside the 10 spaces left after the logo).

This is actually an important distinction to make, and is another design tool you should utilize (and to be safe, you could use “prefix” or “suffix” to ensure a certain amount of space is reserved). The rest of the site is pretty cut-and-dry: 8 columns for the main content and 4 for the sidebar. Each sidebar element is a separate div element; they stack on top of each other because they are constrained to the width of 4 columns.

To illustrate how the site is set up, I’ve taken a screenshot of the site and clearly marked the columns:

Examples of The 960 Grid in Action

Now, my own example might not be the best way to really inspire you to go out and create some killer web designers, so here are just a few examples of the 960 system in action. You can find more at the 960.gs site.

The Keynote Wireframe Toolkit website, which uses the suffix aspect of 960, along with a background image via CSS to list the compatible programs.

The 5by5 podcasting network uses the 960 Grid to align its latest episodes in an appealing manner.

With the 960 Grid Framework; Hugh Griffith was able to present a clever bullet-point list of himself, and a more detailed explanation of his expertise side-by-side. Furthermore, he uses the bottom half of his site to present the 3 most appealing parts of his portfolio (each being 4 columns wide).

Closing Remarks

One of the most appealing aspects of a CSS Framework is the convenience they offer to designers. However, like any other tool, you have to ensure that you are using it in a relevant and worthwhile manner. Don’t try to use it if it doesn’t fit the design, and don’t let it restrict your creativity. For most projects (especially those for complex newspaper or blog-inspired layouts), a CSS framework can be a great time-saving tool, not just for spitting out quick HTML/CSS, but for the entire design process.

Want to read more about coding with CSS frameworks? Check out Nettuts library of articles on the topic (scroll to the bottom for more advanced tuts).