Blueprint CSS – Framework for Grid Based Design

November 5th, 2010 Leave a comment
Like the article?
Blueprint CSS

Creating CSS for a web site can be a complicated affair. There are many different compatibility issues and various fixes and hacks to make different browser behave properly. Many web site designs are based on a grid. CSS frameworks abstract the common elements of grid based design into a series of CSS classes to simplify the creation of stylesheets. These frameworks also incorporate the most common browser fixes and hacks to make the process of writing cross-browser CSS transparent. One of the more popular CSS frameworks is Blueprint.

What is Grid Based Design?

Grids are a frequently used tool in graphic design. A grid is simply a series of intersecting horizontal and vertical lines. Since CSS is largely based on a box model, grids can make designing layouts for web sites simpler by helping to make some decisions about where to place elements. Grids set up a consistent framework upon which to build a design. They define common elements such as the width of columns, the size of gutters between columns and the line height of text. In many ways, a grid is a framework for building a graphic design or layout.

Getting and Installing Blueprint

This is where Blueprint comes in. Blueprint establishes a grid 950 pixels wide and allows the developer to use predefined classes to create a layout based on this grid. The first step to using Blueprint is to download the code. You can obtain Blueprint from its web site at http://www.blueprintcss.org. Once you download the zip archive, unzip it. There are a number of folders included with Blueprint. Some of these are used if you want to modify the settings for the default grid. The folder we’ll be concerned with is the blueprint folder. This one contains the CSS files needed to use blueprint. You will need to upload this folder to the directory on your web server where you have CSS files stored.

The next step to actually using Blueprint is to link to the relevant CSS files from your HTML. There are 3 files that you will need. To link them, add the following code to the HEAD section of your HTML:

<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />
<!--[if lt IE8]<link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" />[!endif]-->

Obviously, you will need to modify the href value to match the path to your CSS files on your web server. The example above assumes that you uploaded the blueprint folder to the root of your web site. Once you have added these files to your HTML, you instantly gain a great deal of functionality. These files will apply a CSS reset. Then, Blueprint defines a 950 pixel grid made of 24 columns of 30 pixels each and a 10 pixel margin between each column. It also defines some default typography styles including a baseline (line height) of 18 pixels. This line height applies to all elements not just typography which means you’ll want to size your images so that their height is a multiple of 18. The print.css file provides some default print styles. Finally, the ie.css file applies a series of fixes and hacks to support Internet Explorer versions earlier than version 8.

Creating a Blueprint Layout

Now you’ll want to use Blueprint to actually create a layout. You use various classes in Blueprint to apply the framework’s styles to div tags in your HTML file. This allows you to easily build up a grid layout. Let’s look at how to build a standard layout consisting of a header, left side bar, main content area and footer. The first step in creating a Blueprint layout is to define the container. The container class sets up the initial 950 pixel width for your site. Here’s the HTML (I’m omitting the head and other HTML):

<body>
  <div class="container">
  </div>
</body>

Now, let’s add a header and footer that spans the full length of the grid (950 pixels). In Blueprint, you define your columns using a class consisting of span- and a number. The number is the number of Blueprint columns you want your area to cover. You use the “last” class to indicate the end of a row. Here’s our header and footer:

<body>
<div class="containter">
  <div id="header" class="span-24 last">
	Header
  </div>
  <div id="footer" class="span-24 last">
	Footer
  </div>
</div>
</body>

Next, we’ll add our left side bar and our content area. We’ll need to figure out how wide our left side bar will be based on the number of columns that we are going to span. The formula for this is as follows:

(columns * 40) - 10 = width

This means that a 9 column side bar will be 350 pixels wide (9 * 40 = 360) -10 = 350. If our sidebar is 9 columns, that leaves 15 columns for the main area (24 – 9 = 15). This would made our content area 600 pixels wide. Why not 590 pixels? The main area includes the “last” class so we don’t subtract the 10 pixel gutter from it. Here’s the code to finish our layout:

<body>
<div class="container">
  <div id="header" class="span-24 last">
	Header
  </div>
  <div id="sidebar" class="span-9">
	Side Bar
  </div>
  <div id="content" class="span-15 last">
	Content
  </div>
  <div id="footer" class="span-24 last">
	Footer
  </div>
</div>
</body>

Notice that the “last” class is not used on the sidebar. Only use this class when ending the row. You can build far more complex layouts using this same concept of splitting a column into smaller columns. For example, if you wanted to divide the content area, you could include div tags splitting it further. You just need to remember that if the containing div is only 15 columns wide, your sub columns will need to be no wider than 15 columns. Here’s an example:

<div id="content" class="span-15 last">
  <div class="span-5"></div>
  <div class="span-10 last"></div>
</div>

You also need to remember that your columns need to add up to the total. Using the “last” class does not automatically fill out the row for you. This is the most common mistake when using Blueprint. If your layout appears to be broken, make sure that each row adds up correctly.

There is another useful class in Blueprint for prototyping your design. You can add the

“showgrid” class to your container div and Blueprint will show a visual grid. This can make debugging and adjusting your design easier. To turn this on, change your HTML to:

<div class="container showgrid">

Blueprint is capable of far more than we’ve shown here. There are classes for appending and pre-pending a column with an empty column. You can also push and pull a div into the previous or next column. There are also predefined classes for creating text pull-outs and image boxes. The easiest way to learn what these classes do is to read the well-commented CSS files that ship with Blueprint and experiment. I’ve found that while I still write a lot of custom CSS for my web pages, Blueprint has made my development much faster by handling the big pieces of CSS for me. I think you will also find it an invaluable tool once you become familiar with working with it.

Help us spread the word!
  • Twitter
  • Facebook
  • LinkedIn
  • Pinterest
  • Delicious
  • DZone
  • Reddit
  • Sphinn
  • StumbleUpon
  • Google Plus
  • RSS
  • Email
  • Print
Don't miss another post! Receive updates via email!

Comment