Quick Start Tutorial

Welcome
Here’s a quick tutorial on how you start using Blueprint.

Installation

Blueprint should be put in your site’s CSS directory. After you’ve done that, add these three lines to the <head> of your web pages. Remember to make sure the href path is correct:


<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 lt IE 8]><link rel="stylesheet" href="css/blueprint/ie.css" type="text/css" media="screen, projection"><![endif]-->

Blueprint is now ready for consumption.

Files in Blueprint

The framework has a few files you should check out. Every file in the ‘src’ directory contains lots of (hopefully) clarifying comments.

Compressed files (these go in the HTML):

blueprint/screen.css
blueprint/print.css
blueprint/ie.css

Source files:

blueprint/src/reset.css: This file resets CSS values that browsers tend to set for you.
blueprint/src/grid.css: This file sets up the grid (it’s true). It has a lot of classes you apply to divs to set up any sort of column-based grid.
blueprint/src/typography.css: This file sets some default typography. It also has a few methods for some really fancy stuff to do with your text.
blueprint/src/forms.css: Includes some minimal styling of forms.
blueprint/src/print.css: This file sets some default print rules, so that printed versions of your site looks better than they usually would. It should be included on every page.
blueprint/src/ie.css: Includes every hack for our beloved IE6 and 7.

Scripts:

lib/compress.rb: A Ruby script for compressing and customizing your CSS. Set a custom namespace, column count, widths, output paths, multiple projects, and semantic class names. See commenting in compress.rb or run $ruby compress.rb -h for more information.
lib/validate.rb: Validates the Blueprint core files with the W3C CSS validator.

Other:

blueprint/plugins/: Contains additional functionality in the form of simple plugins for Blueprint. See individual readme files in the directory of each plugin for further instructions.
tests/: Contains html files which tests most aspects of Blueprint. Open tests/index.html for further instructions.

Using Blueprint

The best way to see how BP is used, is to go through the commented CSS files, or the source code for the example page, which is bundled with the download. However, here are some of the basics:

The typography

Typography.css does not need any customization: just drop it in, and it’ll give you some nice default text styles.

The typography.css file also sets a baseline (line-height) of 18px. This means that every element, from line-heights to images has to have a height that is a multiple of 18. This may seem a bit tedious, but the results tend to look great. For more about using a baseline, check out this article at A List Apart.

Print.css has some options where you can fill in your domain name, so that relative links are shown in parenthesis behind the text link on print. Without filling in your domain name, only remote URLs work properly.

The grid

By default, the grid is 950px wide, with 24 columns spanning 30px, and a 10px margin between columns.

If you need fewer or more columns, use the compressor found in lib/compress.rb This file has many options, which are explained in the comments in that file

If you prefer to do this manually, use the following formula to find the new total width:


Total width = (columns * 40) - 10

The first thing you do, is surround your grid with a container:


<div class="container">
	<p>Here's my site!</p>
</div>

You then use div’s with one of the .span-x classes to set how many columns the elements should span. Here are some examples:


<div class="container">
	<div class="span-24 last">
		Header
	</div>
	<div class="span-4">
		Left sidebar
	</div>
	<div class="span-16">
		Main content
	</div>
	<div class="span-4 last">
		Right sidebar
	</div>	
</div>

Notice the “last” class, which every last element inside a container or another column needs.

You can also nest columns any way you want. Check out this file and this file for some more advanced examples of using grid.css. Here’s one example of nesting columns:


<div class="container">
	<div class="span-24 last">
		Header
	</div>
	<div class="span-4">
		Left sidebar
	</div>
	
	<div class="span-16">
		<div class="span-8">
			Box1
		</div>
		<div class="span-4">
			Box2
		</div>
		<div class="span-4 last">
			Box3
		</div>
		<div class="span-16 last">
			Main content
		</div>
	</div>
	
	<div class="span-4 last">
		Right sidebar
	</div>
	<div class="span-24 last">
		Footer
	</div>
</div>

Again, this is pretty simple when you get the hang of it. Just remember:

Use the “last” class in your last column
Make sure the columns in a row add up to 24 (i.e. “last” does not “fill in” the remaining columns for you)

and you should be fine.

Grid.css can do a lot more than this, however. You can prepend and append empty columns, pull or push images across columns, add borders between columns, and use multiple containers to create almost any layout. Check out the comments in grid.css and the example pages for more information.

Provide feedback

Saved searches