reset.css

Blueprintcss resets all browsers default css tags to:
  • margin, padding and border: 0,
  • font-size:100%,
  • font-weights:normal,
  • other font values: inherit,
  • image borders:0

Tables still need 'cellspacing="0"' in the markup though.

SPAN CLASSES

Use these classes to set the width of a column
span-1 span-13
span-2 span-14
span-3 span-15
span-4 span-16
span-5 span-17
span-6 span-18
span-7 span-19
span-8 span-20
span-9 span-21
span-10 span-22
span-11 span-23
span-12 span-24

PUSH/PULL CLASSES

Use these classes on an element to push it into the next column, or to pull it into the previous column.
push-0
push-1 pull-1
push-2 pull-2
push-3 pull-3
push-4 pull-4

APPEND CLASSES

Add these to a column to append empty cols.
append-1 append-13
append-2 append-14
append-3 append-15
append-4 append-16
append-5 append-17
append-6 append-18
append-7 append-19
append-8 append-20
append-9 append-21
append-10 append-22
append-11 append-23
append-12

PREPEND CLASSES

Add these to a column to prepend empty cols.
prepend-1 prepend-13
prepend-2 prepend-14
prepend-3 prepend-15
prepend-4 prepend-16
prepend-5 prepend-17
prepend-6 prepend-18
prepend-7 prepend-19
prepend-8 prepend-20
prepend-9 prepend-21
prepend-10 prepend-22
prepend-11 prepend-23
prepend-12
Blueprint CSS Cheat Sheet

Copyright (c) 2007 Olav Bjorkoy (http://bjorkoy.com)

Original PDF Help Sheet v.0.3 by Alejandro Vasquez (http://www.digitart.net) 13-11-07

Online Help Sheet Version 0.2 by Alex Winfield (http://gildedtalon.com) 13-03-08

Updated for Version 0.71

LINKING

Download the latest version from http://code.google.com/p/blueprintcss/ and add these lines into the <head> of your page. Check that your href path is correct.
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection">
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print">
<!--[if IE]>
    <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection">
<![endif]-->

GRID STRUCTURE

Visualization of the grid and associated sizes
If you need fewer or more columns, use this formula to find the new total width:
Total width = (columns * 40) - 10

BASIC SETUP

<body>
    <div class="container">
        <div class="column span-15">
            <p>Some column content</p>
        </div>
        <div class="column span-6 last">
            <p>Another column</p>
        </div>
    </div>
</body>
  • Remember to use “last” for the last column of the row to avoid it to “jump” into the next row
  • Columns can be nested inside other columns, just remember to use “last” at the end of each row

typography.css

Sets up some sensible default typography. This is where the base 12px font size (75%) is defined. The line-heights and vertical margins are automatically calculated from this in ems.

It sets a baseline (line-height) of 18px (1.5ems). This means that every element, from line-heights to images has to have a height that is a multiple of 18 (or 1.5 if you use ems). This may seem a bit tedious, but the results tend to look great.

If you want to use your own typographic definitions, you can still use reset.css and grid.css to your liking. Just remember to compress them in one new single css file.

GRID CLASSES

container The container that groups all your columns.
column Use with with span-x to create combinations of columns in the layout. - DEPRECIATED IN 0.7 - no longer necessary, kept in this table for historical reasons
border Draws a border on the right hand side of a column.
colborder Border with more whitespace, spans one column.
clear Clearing floats without extra markup.
box Creates a padded box inside a column. Use it on column’s childs
last The last column in a row needs this class.
showgrid Displays the grid in the “container” or in any element
hr.space (only for <hr>) Creates an invisible (white) horizontal ruler.

Valid HTML and CSS

DOCUMENT COLUMNS

Blueprintcss defaults document’s width to 24 cols, 950px. Use this table to calculate other widths or column numbers.
cols-23 910px
cols-22 870px
cols-21 830px
cols-20 790px
cols-19 750px
cols-18 710px
cols-17 670px
cols-16 630px
cols-15 590px
cols-14 550px

TYPOGRAPHY CLASSES

This classes are defined in the typography.css file. Other typographic tags as hx, p, a, ul, ol, etc. are also redefined in this file
added color #060
bottom bottom margins 0
top top margins 0
hide display none
highlight bg yellow
large 1.2em lines 2.5em
small .8em lines 1.87em
quiet color #666
removed color #900
first margin left 0 padding left 0
last margin right 0 padding right 0
loud color #000

forms.css

This tags with classes have special definitions on file forms.css.
For text fields, use class .title or .text
input.text w: 300px pad 5px
input.title font-size: 1.5em
textarea w: 390px h: 250px
select w: 200px
label bold
fieldset pad: 1.5em border
legend font-size: 1.2em

FORMS CLASSES

This classes are defined in the form.css file. Other form related tags such as input, textarea, select etc. are also redefined in this file
error red frame
notice yellow frame
success green frame
hide display none
highlight bg yellow
large 1.2em lines 2.5em
small .8em lines 1.87em
quiet color #666
removed color #900
p.last margin bottom 0
table.last padding right 0