Blueprint CSS Framework Version 0.8 Cheat Sheet

SPAN CLASSES http://creativecommons.org/licenses/by-sa/2.5/scotland/ 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 (http://www.blueprintcss.org)

Copyright © 2007-2009 blueprintcss.org
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
STYLESHEET LINK
TYPOGRAPHY CLASSES
.span-7 .span-19
Download the latest version from http://www.blueprintcss.org 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" />

APPEND CLASSES .quiet color #666 (grey)
Add these to a column to add .loud color #000 (black)

USAGE TYPOGRAPHY
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)
FORMS
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
870px (22 columns) .notice yellow framed box
910px (23 columns) .success green framed box
input.text w 300px pad 5px
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 http://tinyurl.com/dh352)
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
.append-bottom
.prepend-top Add a 1.5em gutter above an element. Fix padding on
fieldset
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
hr.space 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

Blueprint CSS Framework Version 0.8 Cheat Sheet

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Blueprint CSS Framework Version 0.8 Cheat Sheet

Uploaded by

Copyright:

Available Formats

SPAN CLASSES http://creativecommons.org/licenses/by-sa/2.5/scotland/ RESET defined in reset.css.

Use these classes to set the Blueprint CSS resets all

.span-4 .span-16 Blueprint CSS version 0.8 (http://www.blueprintcss.org)

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

You might also like