You are on page 1of 2

SPAN CLASSES http://creativecommons.org/licenses/by-sa/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 (www.blueprintcss.org)
Copyright © 2007-2010 blueprintcss.org
version 0.9.1 • font-weight: normal
• other font values: inherit
Cheat sheet v.3.5.3 by Gareth J M Saunders (www.garethjmsaunders.co.uk/blueprint) • 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 www.blueprintcss.org and add these lines into the <head> of your
.span-8 .span-20 page. Check that your href path is correct.
TYPOGRAPHY CLASSES
.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
<![endif]-->
APPEND CLASSES .large 1.2em; line 2.5

Add these to a column to add .hide display: none
USAGE TYPOGRAPHY
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
GRID
.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.
input.radio 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 http://tinyurl.com/dh352) legend font-size 1.2em
.prepend-12
.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>.
IE FIXES
.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.
hr.space 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.
http://creativecommons.org/licenses/by-sa/2.5/scotland/

Blueprint CSS version 0.9.1 (www.blueprintcss.org)
Copyright © 2007-2010 blueprintcss.org
Cheat sheet v.3.5.3 by Gareth J M Saunders (www.garethjmsaunders.co.uk/blueprint)

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)

LINE-HEIGHT FILE STRUCTURE TOOLS & RESOURCES
The base line-height is 18px. blueprint/screen.css Blueprint CSS home www.blueprintcss.org
Every element from images to
line-height is a multiple of 18. blueprint/print.css Articles http://wiki.github.com/joshuaclayton/blueprint-css/articles

1 18px 22 396px blueprint/ie.css Browser compatibility list http://wiki.github.com/joshuaclayton/blueprint-css/browser-
compatibility-list
2 36px 23 414px blueprint/plugins/
Bug tracker http://blueprintcss.lighthouseapp.com
3 54px 24 432px blueprint/src/reset.css
Cheat sheets and templates http://wiki.github.com/joshuaclayton/blueprint-css/tools-and-resources
4 72px 25 450px
blueprint/src/grid.css Code generators http://bluecalc.groupion.com or http://bgg.kematzy.com
5 90px 26 468px
blueprint/src/typography.css Demos www.blueprintcss.org/tests
6 108px 27 486px
blueprint/src/forms.css Discussion group http://groups.google.com/group/blueprintcss
7 126px 28 504px
blueprint/src/print.css Facebook http://www.facebook.com/blueprintcss
8 144px 29 522px
blueprint/src/ie.css Github repository http://github.com/joshuaclayton/blueprint-css/tree/master
9 162px 30 540px
lib/compress.rb JavaScript background grid http://tomster.org/blog/archive/2008/04/26/blueprint-css-jquery/
10 180px 31 558px switcher/toggler http://www.sanityinc.com/articles/bookmarklet-to-toggle-blueprint-css-
lib/validate/rb grid
11 198px 32 576px
Layout editors http://constructyourcss.com or http://toki-woki.net/p/Boks
12 216px 33 594px
DOWNLOADS
License http://wiki.github.com/joshuaclayton/blueprint-css/license
13 234px 34 612px
Latest ZIP
Mods, forks and alternatives http://wiki.github.com/joshuaclayton/blueprint-css/mods-forks-and-
14 252px 35 630px http://github.com/
alternatives
joshuaclayton/blueprint-css/
15 270px 36 648px zipball/master Paper grid (A4) http://blueprintcss.org/media/PaperGrid_by_KaiHowells.pdf
16 288px 37 666px
Latest TGZ Plugins http://wiki.github.com/joshuaclayton/blueprint-css/plugins
17 306px 38 684px http://github.com/
joshuaclayton/blueprint-css/ Themes and frameworks http://wiki.github.com/joshuaclayton/blueprint-css/themes-and-
18 324px 39 702px tarball/master frameworks

19 342px 40 720px All versions Tutorials http://wiki.github.com/joshuaclayton/blueprint-css/tutorials
http://github.com/ Twitter http://twitter.com/blueprintcss
20 360px 41 738px
joshuaclayton/blueprint-css/
21 378px 42 756px downloads Wiki http://github.com/joshuaclayton/blueprint-css/wikis/home