The Quick Guide To Blueprint

By mid-2009 every front-end web developer knows about Javascript frameworks, but CSS frameworks like Blueprint are still unknown to many of them. This article gives a clear high-level overview of the Blueprint CSS framework and demo’s how to create a site layout with it.

What is Blueprint?

The Blueprint CSS Framework is a collection of css files that include:

• a style “reset”, equalizing html element styles across all browsers.
• a style “restoration” to restore your html elements to usable settings (eg margin, padding, …).
• form layout classes.
• special classes to handle IE peculiarities.
• most importantly, a 960-pixel-wide grid layout system.

The 960 Grid System…

The 960px Grid System (see http://960.gs/) is a method for designing and implementing web sites using a simple column-based grid. A web page is assigned a fixed width of 960 pixels and divided into 12 (or 16 or 24) columns, then the major sections of the site layout are simply “snapped-to” the columns. This approximates what print designers have been doing in Framemaker with grids and page guides for the past two decades, only applied to web sites.

This post from 2004 by Khoi Vinh appears to have spearheaded the “design sites using grids” movement, and demonstrates how Khoi design his site with a basic improvised grid. Now developers have an easier way to build their sites with a 960px grid using the Blueprint CSS Framework.

How Does Blueprint Work?

The Blueprint CSS framework uses named classes to align div’s (or other block elements) to the 24 columns in its 960px grid, including special classes for prepending and appending empty columns, making it fairly simple to lay out a site on the gid.

Just specify a container div (to which the Blueprint framework is applied), then add sub-div’s with class names like span-4 or append-2 so they add up to 24 columns across. Note that you can split up larger div’s (eg span-14) into multiple small div’s (eg span-5 .. span-9).

Let’s Get Started

1. Download the latest Blueprint framework
2. Create a new html file and add the three stylesheet references to the header:
   

3. Then add your blueprint container to the body:
   

   
   
   
     
   Blueprint CSS Sample
     
   
       
   This is a combined header that 
       includes the left and right columns.
       
   
         
   Left column text < br> goes here.
       
       
   
         
   Right column text < br> goes here.
       
     
     
   
       
   This must be the side bar over here
     
   
   
   
   
   

Now we’ve added a parent container div containing the maincol and sidecol columns, and the maincol column itself contains the leftcol and rightcol columns.

Here’s how our basic page looks with Blueprint’s columns (click for full-size):

Visualizing The Sample

The page you created in the previous section is fully functional, but its not clear by looking at it where the text blocks are.

Add these styles to the page to make them clear:

Disclaimer In real sites you should avoid assigning your main site elements id’s like “maincol” and “leftcol” and giving them fixed heights and pastel backgrounds. I can get away with this kind of moronic behavior in this article because it helps to make the code clear and the layout understandable.

Here’s how the page looks with the new styles (again, click to view full-size):

You can now see the basic layout and hierarchy of the page, including the 10-pt right margin that Blueprint assigns to its layout elements.

“Showgrid”

There’s one more minor change we can make to help visualize the page layout – adding the class showgrid to the container element, which reveals Blueprint’s grid in the background:

…

Here’s the updated page showing the grid:

You can now see the full 24-column Blueprint grid, consisting of 30-pixel-wide columns and 10-pixel-wide gutters, and how the text blocks align to the grid.

Summary

Thanks for reading this far. At this point you have built a page with columns and subcolumns using the Blueprint css framework, and if you’re like me you will be itching to hack the “style restoration” stylesheet to fix the tiny Helvetica fonts. I’ll show how to do that without modifying the Blueprint files in a future article.