Speed Up Your Development Time With The Blueprint CSS Framework

Aug 22nd '08 5 Comments

The Blueprint CSS Framework is a project which combines several works from various individuals including Jeff Croft, Nathan Borror, Christian Metts, Eric Meyer amongst others. When combined, you get an excellent starting point for your next grid based website. I’d like to give you a quick intro to the framework…

This is one of my first full tutorial write-ups, so if it’s confusing to you, I do apologize and feel free to either contact me via email or comment on this post and I’ll do my best to answer! But with practice my tutorials will become much more understandable and easy to read.

First of all, Blueprint by default includes all the styles you need to begin designing your website. Before you begin implementation into your website, look through the code and determine what you need & don’t need. For example, at the bottom of styles.css document, you’ll notice styles which determine what your forms will look like. In some cases, I decide to cut this and use my own styles for the forms on a website I am working on.

Start By Referencing The Files Between <head></head>

This will activate the styles needed to use this framework.

<link rel="stylesheet" href="css/blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="css/blueprint/print.css" type="text/css" media="print">
<!--[if IE]><link rel=”stylesheet” href=”http://alexcoleman.net/wp-content/themes/alexcoleman/css/blueprint/ie.css” type=”text/css” media=”screen, projection” /><![endif]–>

Now we’re ready to start implementing the different classes Blueprint has to offer.

Wrap Your Content In A Container

24 is the number of total columns on your grid. Each column is 30px wide with a 10px margin in between. Depending on what you’re design is going to be, determine how wide you’d like to set your wrapper.

<div class="span-24 last">

*/your content/*

</div>

Determine The Size Of Your Columns & Create

You can define each column any size you wish, as long as the sum of all equals 24. Once you set the width for the last column, you’ll have to close it with a “last” class. All this does is remove the margin to the right of the last column so it stays within the wrapper width.


<div class="span-24">

<div class="span-5">
The Left Column
</div>

<div class="span-14">
The Middle Column
</div>

<div class="span-5 last">
The Right Column
</div>

</div>

The “Append” & “Prepend” Class

Append & Prepend can be used to space certain columns from each other. For example, if you have a column for your main content, and a column for your right column, but would like to increase the spacing in between them, you can either Append an amount to the main column, or Prepend an amount to the right column.

Here is an example of adding the equivalent of 2 columns width between the right column and main content:

<div class="span-24 last">

<div class="span-5">
The Left Column
</div>

<!--since your spacing the middle column from the right column 2 columns width, don't forget to subtract 2 from the total span-->
<div class="span-12 append-2“>
The Middle Column
</div>

<div class=”span-5 last”>
The Right Column
</div>

</div>

Option-Add Vertical Borders To The Right Of The Left & Middle Column

Add the colborder class to add a vertical line to the right of your column

<div class="span-24">

<!--since the column takes up 1px, you'll need to subtract 1 from the span class-->
<div class="span-4 colborder“>
The Left Column
</div>

<div class=”span-13 colborder“><!–same goes for this one. Subtract 1 from the span class–>
The Middle Column
</div>

<div class=”span-5 last”>
The Right Column
</div>

</div>

There are many more classes for typography as well in the Blueprint framework, so it’s recommended you read through the CSS prior to using.

Please if you have any questions or comments, leave them below. Thanks!

Helpful Links To Get You Started

Like This? Share It With The World!