You are on page 1of 2


5/scotland/ RESET
Use these classes to set the Defined in reset.css. Blue-
width of a column print CSS resets all browsers’
default elements including
.span-1 .span-13 HTML5 to:
.span-2 .span-14
• margin, padding, border: 0
.span-3 .span-15 • font-size: 100%

.span-4 .span-16 Blueprint CSS version 0.9.1 (
Copyright © 2007-2010
version 0.9.1 • font-weight: normal
• other font values: inherit
Cheat sheet v.3.5.3 by Gareth J M Saunders ( • image borders: 0
.span-5 .span-17
.span-6 .span-18 Note that tables will still need
STYLESHEET LINK cellspacing=“0” in the HTML
.span-7 .span-19 mark-up though.
Download the latest version from and add these lines into the <head> of your
.span-8 .span-20 page. Check that your href path is correct.
.span-9 .span-21 <link rel="stylesheet" href="blueprint/screen.css" type="text/css"
media="screen, projection" /> These classes are defined in
.span-10 .span-22 <link rel="stylesheet" href="blueprint/print.css" type="text/css" the typography.css file. Other
.span-11 .span-23 media="print" /> typographic elements are also
<!--[if lt IE 8]> defined in this file.
.span-12 .span-24 <link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection" /> .small 0.8em; line 1.875
APPEND CLASSES .large 1.2em; line 2.5

Add these to a column to add .hide display: none
empty columns to the right.
.quiet color #666 (grey)
<body> typography.css sets up some sensible default
.append-1 .append-13 <div class="container"> typography. The font-size percentage is of 16px .loud color #000 (black)
.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 .highlight bg #ff0 (yellow)
.append-3 .append-15 </div> ems.
<div class="span-8 last"> .added bg #060 (green)
.append-4 .append-16 <p>Column 2</p> The base line-height is 18px (1.5em). This means .removed bg #900 (red)
</div> that each element, from line-heights to images
.append-5 .append-17 </div> has a height that is a multiple of 18 (or 1.5 if you .first mL 0; pL 0
.append-6 .append-18 </body> use ems).
.span-x implies a column (although .column .last mR 0; pR 0
.append-7 .append-19 may still be used). Remember to use “.last” for h1-h6 color is #111 (nearly black); body color is
the last column of the row to avoid it jumping to .top mT 0; pT 0
#222 (dark grey); font-family is “Helvetica Neue”,
.append-8 .append-20 the next row. Columns may be nested inside “Helvetica”, “Arial”, sans-serif. .bottom mB 0; pB 0
.append-9 .append-21 one another.

.append-10 .append-22 IMAGE CLASSES
.append-11 .append-23 p img.left float left; m 1.5
Defined in grid.css. Each column is 30px wide with a 10px right margin (except the last column which 1.5 1.5 0 em
.append-12 has no margin). If you need more or fewer columns use this formula to find the new total width:
total width = (columns x 40px) - 10px. (See page two for full grid diagram.) p img.right float right; m:
1.5 0 1.5 1.5
PREPEND CLASSES 750px (19 columns) em
Add these to a column to add 790px (20 columns)
empty columns to the left. FORM CLASSES
830px (21 columns)
.prepend-1 .prepend-13 .error red frame box
870px (22 columns)
.prepend-2 .prepend-14 .notice yellow frame box
910px (23 columns)
.prepend-3 .prepend-15 .success green frame box
950px (24 columns)
.prepend-4 .prepend-16 fieldset pad 1.4em;
m 0 0 1.5 0 em
.prepend-5 .prepend-17
form.inline line-height 3
.prepend-6 .prepend-18 GRID CLASSES
input.checkbox and
.prepend-7 .prepend-19 .append-x Add these to a column to add empty columns to the right; x = 1 to 23. top 0.25em
.prepend-8 .prepend-20 .append-bottom Add a 1.5em gutter below an element.
input.text w 300px p 5px
.prepend-9 .prepend-21 .border Shows a border on the right hand side of a column.
input.title font-size 1.5em
.prepend-10 .prepend-22 .box Creates a padded box inside a column. (padding: 1.5em; margin-bottom: 1.5em;).
.clear Regular clearing: apply to a column that should drop below previous ones. label bold
.prepend-11 .prepend-23
.clearfix Clearing floats without extra mark-up. (See legend font-size 1.2em
.colborder Spans one column with a border in the centre. select w 200px
VERTICAL CLASSES textarea w390px h250px
.column Use with .span-x classes to create combinations of columns in the layout.
Use these classes on an
element to add vertical space. .container A container should group all your columns; use on <div>.
.prepend-top mT 1.5em .last The last column in a row needs this class.
IE all fixes for: alignment of
.append-bottom mB 1.5em .prepend-x Add these to a column to add empty columns to the left; x = 1 to 23. inline forms; margin bugs;
.prepend-top Add a 1.5em gutter above an element. padding on fieldset; image
resizing; line-height on sub/
PUSH/PULL CLASSES .pull-x Use these classes on an element to pull it left into the previous column; x = 1 to 24. sup elements.
Use these classes on an .push-x Use these classes on an element to push it right into the next column; x = 1 to 24. IE5 Fix centre layout.
element to push it right into
the next column, or pull it left .showgrid Use this on any .span / .container to see the grid as a background image. IE6 Fix legend bug; textarea.
into the previous column. Use this to create a transparent horizontal rule across a column; also use <hr />. IE6 & IE7 Fix ol numbers and
.push-1 to .push-24 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 to .pull-24 element. Can also be used on input and textarea elements. IE7 Fix code wrap.

Blueprint CSS version 0.9.1 (
Copyright © 2007-2010
Cheat sheet v.3.5.3 by Gareth J M Saunders (

GRID - each column is 30px wide with a 10px right margin, except the last column which has no margin.
class width 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 pattern
.span-1 30px 1 24 columns
.span-2 70px 2 12 columns
.span-3 110px 3 8 columns
.span-4 150px 4 4 4 4 4 4 6 columns (sixths)
.span-5 190px 5
.span-6 230px 6 6 6 6 4 columns (quarters)
.span-7 270px 7
.span-8 310px 8 8 8 3 columns (thirds)
.span-9 350px 9
.span-10 390px 10
.span-11 430px 11
.span-12 470px 12 12 2 columns (half)
.span-13 510px 13
.span-14 550px 14
.span-15 590px 15
.span-16 630px 16 8 two thirds
.span-17 670px 17
.span-18 710px 18 6 three quarters
.span-19 750px 19
.span-20 790px 20 4 five sixths
.span-21 830px 21
.span-22 870px 22
.span-23 910px 23

.span-24 950px 24 1 column (full width)

The base line-height is 18px. blueprint/screen.css Blueprint CSS home
Every element from images to
line-height is a multiple of 18. blueprint/print.css Articles

1 18px 22 396px blueprint/ie.css Browser compatibility list
2 36px 23 414px blueprint/plugins/
Bug tracker
3 54px 24 432px blueprint/src/reset.css
Cheat sheets and templates
4 72px 25 450px
blueprint/src/grid.css Code generators or
5 90px 26 468px
blueprint/src/typography.css Demos
6 108px 27 486px
blueprint/src/forms.css Discussion group
7 126px 28 504px
blueprint/src/print.css Facebook
8 144px 29 522px
blueprint/src/ie.css Github repository
9 162px 30 540px
lib/compress.rb JavaScript background grid
10 180px 31 558px switcher/toggler
lib/validate/rb grid
11 198px 32 576px
Layout editors or
12 216px 33 594px
13 234px 34 612px
Latest ZIP
Mods, forks and alternatives
14 252px 35 630px
15 270px 36 648px zipball/master Paper grid (A4)
16 288px 37 666px
Latest TGZ Plugins
17 306px 38 684px
joshuaclayton/blueprint-css/ Themes and frameworks
18 324px 39 702px tarball/master frameworks

19 342px 40 720px All versions Tutorials Twitter
20 360px 41 738px
21 378px 42 756px downloads Wiki