You are on page 1of 1

SPAN CLASSES RESET defined in reset.css.

Use these classes to set the Blueprint CSS resets all

width of a column browsers’ default elements to:
- margin, padding, border: 0
.span-1 .span-13 - font-size: 100%
.span-2 .span-14 - font-weight: normal
- other font values: inherit
.span-3 .span-15 - image borders: 0

.span-4 .span-16 Blueprint CSS version 0.8 (

Copyright © 2007-2009
version 0.8 Tables still need
Cheat sheet v.2.4 by Gareth J M Saunders, based on Help Sheet v.0.3 by Alejandro Vasquez “cellspacing=“0” in the mark-
.span-5 .span-17
up though.
.span-6 .span-18
.span-7 .span-19
Download the latest version from and add these lines into the <head> of your
page. Check that your href path is correct. These classes are defined in
.span-8 .span-20
the typography.css file. Other
.span-9 .span-21 <link rel="stylesheet" href="blueprint/screen.css" type="text/css" typographic elements are also
media="screen, projection" /> defined in this file.
.span-10 .span-22 <link rel="stylesheet" href="blueprint/print.css" type="text/css"
.small 0.8em; line 1.875
.span-11 .span-23 media="print" />
<!--[if lt IE 8]> .large 1.2em; line 2.5
.span-12 .span-24 <link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection" /> .hide display: none
APPEND CLASSES .quiet color #666 (grey)

Add these to a column to add .loud color #000 (black)

empty columns to the right.
.highlight bg #ff0 (yellow)
<body> typography.css sets up some sensible default
.append-1 .append-13 <div class="container"> typography. The font-size percentage is of 16px .added bg #060 (green)
.append-2 .append-14 <div class="span-16”> (0.75 x 16px = 12px). Line-heights and vertical
<p>Column 1</p> margins are automatically calculated from this in .removed bg #900 (red)
.append-3 .append-15 </div> ems.
<div class="span-8 last"> .first mL 0; pL 0
.append-4 .append-16 <p>Column 2</p> The base line-height is 18px (1.5em). This means .last mR 0; pR 0
</div> that every element, from line-heights to images
.append-5 .append-17 </div> have a height that is a multiple of 18 (or 1.5 if you .top mT 0; pT 0
.append-6 .append-18 </body> use ems).
div.span-x implies a column (.column can still .bottom mB 0; pB 0
.append-7 .append-19 be used). Remember to use “last” for the last h1-h6 color is #111 (nearly black); body color is
column of the row to avoid it jumping to the #222 (dark grey); font-family is “Helvetica Neue”,
.append-8 .append-20 IMAGE CLASSES
next row. Columns can be nested inside one “Helvetica”, “Arial”, sans-serif.
.append-9 .append-21 another. These classes are defined in
the typography.css file.
.append-10 .append-22
img.left float: left; m 1.5
.append-11 .append-23 GRID defined in grid.css.
1.5 1.5 0 em
.append-12 If you need more or fewer columns use this formula to find the new total width:
img.right float: right; m: 1.5
total width = (columns x 40px) - 10px
0 1.5 1.5 em
PREPEND CLASSES 950px (24 columns)
Add these to a column to add 750px (19 columns)
empty columns to the left. These are defined in the
790px (20 columns) forms.css file.
.prepend-1 .prepend-13
830px (21 columns) .error red framed box
.prepend-2 .prepend-14
870px (22 columns) .notice yellow framed box
.prepend-3 .prepend-15
910px (23 columns) .success green framed box
.prepend-4 .prepend-16
input.text w 300px pad 5px
.prepend-5 .prepend-17
input.title font-size 1.5em
.prepend-6 .prepend-18 GRID CLASSES
fieldset p 1.4em; m 0 0
.prepend-7 .prepend-19 .append-x Add these to a column to add empty columns to the right; x = 1 to 23. 1.5 0 em; border
.prepend-8 .prepend-20 .append-bottom Add a 1.5em gutter below an element. label bold
.prepend-9 .prepend-21 div.border Shows a border on the right hand side of a column. legend font-size 1.2em
.prepend-10 .prepend-22 .box Creates a padded box inside a column. (padding: 1.5em; margin-bottom: 1.5em;). select w 200px
.prepend-11 .prepend-23 .clear Regular clearing: apply to a column that should drop below previous ones. textarea w 390px h 250px
.prepend-12 .clearfix Clearing floats without extra markup. (See
div.colborder Spans one column with a border in the centre. IE FIXES
VERTICAL CLASSES ie.css contains every hack for
.column Use with .span-x classes to create combinations of columns in the layout.
Use these classes on an Internet Explorer.
element to add vertical space. .container A container should group all your columns; use on <div>.
IE all Fix margin bugs
.last The last column in a row needs this class.
.prepend-top Line height on
.prepend-x Add these to a column to add empty columns to the left; x = 1 to 23. sub/sup
.prepend-top Add a 1.5em gutter above an element. Fix padding on
PUSH/PULL CLASSES .pull-x Use these classes on an element to pull it into the previous column; x = 1 to 24.
IE 5 Centre layout
Use these classes on an .push-x Use these classes on an element to push it into the next column; x = 1 to 24.
element to push it right into IE 6 Fix legend bug
the next column, or pull it left .showgrid Use this on any div.span / div.container to see the grid as a background image.
into the previous column. IE 6 & 7 Fix <ol> numbers Use this to create a (white) horizontal rule across a column; also use <hr />.
.push-1 up to ... .push-24 Fix <hr/> margins
.span-x Use these classes to set the width of a column; x = 1 to 24; usually used on a div
.pull-1 up to ... .pull-24 element. Can now also be used on input, textarea and select elements. IE 7 Fix <code> wrap