Scribd
Upload
10K views

Blueprint CSS Framework Version 0.8 Cheat Sheet

Blueprint CSS framework version 0.8 cheat sheet (version 2.4) by Gareth J M Saunders. Updated: Wednesday 02 June 2010 VERSION 2.4 FIX: Corrected a few minor layout issues. VERSION 2.2 FIX: URL in stylesheet link was still wrong! FIX: Fixed various minor typos and errors. VERSION 2.1 FIX: URL in Stylesheet Link was wrong. FIX: Changed logo to latest Blueprint CSS logo

Uploaded by

Gareth J M Saunders
Copyright
© Attribution ShareAlike (BY-SA)
Available Formats
Download as PDF, TXT or read online on Scribd
10K views

Blueprint CSS Framework Version 0.8 Cheat Sheet

Blueprint CSS framework version 0.8 cheat sheet (version 2.4) by Gareth J M Saunders. Updated: Wednesday 02 June 2010 VERSION 2.4 FIX: Corrected a few minor layout issues. VERSION 2.2 FIX: URL in stylesheet link was still wrong! FIX: Fixed various minor typos and errors. VERSION 2.1 FIX: URL in Stylesheet Link was wrong. FIX: Changed logo to latest Blueprint CSS logo

Uploaded by

Gareth J M Saunders
Copyright
© Attribution ShareAlike (BY-SA)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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" />
<!--[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
<![endif]-->
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
.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 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

You might also like