Scribd
Upload
21K views

Blueprint CSS Framework Version 0.7.2 Cheat Sheet

Blueprint CSS framework version 0.7.2 cheat sheet (version 1.7) by Gareth J M Saunders, based on Help Sheet by Alejandro Vasquez. This is an updated cheat sheet posted on Wednesday 02 June 2010. VERSION 1.7 FIX: Corrected a few minor layout issues. VERSION 1.6 (Wednesday 02 June 2010) ENH: Updated to Blueprint CSS version 0.7.2 which fixed a missing img.left class. FIX: Updated URL for Blueprint CSS. FIX: Various minor typos and errors. VERSION 1.4 (Thursday 26 February 2009) ENH: Changed main graphic to newest Blueprint CSS logo. VERSION 1.3 FIX: I've corrected the URLs for the Blueprint CSS project. FIX: I've corrected the .push-x and .pull-x classes after finding a discrepancy between the classes in screen.css and grid.css. FIX: I've corrected the usage block, the span classes didn't add up to 24 before! ENH: I've made a few enhancements to the descriptions to make it easier to read and understand. ENH: The grid class names are now listed alphabetically. BLUEPRINT CSS version 0.8 I've now also created a cheat sheet for Blueprint CSS version 0.8: http://www.scribd.com/doc/12850249/Blueprint-CSS-framework-version-08-cheat-sheet

Uploaded by

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

Blueprint CSS Framework Version 0.7.2 Cheat Sheet

Blueprint CSS framework version 0.7.2 cheat sheet (version 1.7) by Gareth J M Saunders, based on Help Sheet by Alejandro Vasquez. This is an updated cheat sheet posted on Wednesday 02 June 2010. VERSION 1.7 FIX: Corrected a few minor layout issues. VERSION 1.6 (Wednesday 02 June 2010) ENH: Updated to Blueprint CSS version 0.7.2 which fixed a missing img.left class. FIX: Updated URL for Blueprint CSS. FIX: Various minor typos and errors. VERSION 1.4 (Thursday 26 February 2009) ENH: Changed main graphic to newest Blueprint CSS logo. VERSION 1.3 FIX: I've corrected the URLs for the Blueprint CSS project. FIX: I've corrected the .push-x and .pull-x classes after finding a discrepancy between the classes in screen.css and grid.css. FIX: I've corrected the usage block, the span classes didn't add up to 24 before! ENH: I've made a few enhancements to the descriptions to make it easier to read and understand. ENH: The grid class names are now listed alphabetically. BLUEPRINT CSS version 0.8 I've now also created a cheat sheet for Blueprint CSS version 0.8: http://www.scribd.com/doc/12850249/Blueprint-CSS-framework-version-08-cheat-sheet

Uploaded by

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

SPAN CLASSES html

Use these classes to set the reset.css


width of a column
grid.css
.span-1 .span-13
typography.css
.span-2 .span-14
forms.css
.span-3 .span-15
ie.css
.span-4 .span-16 Blueprint CSS version 0.7.2 (http://www.blueprintcss.org)
Copyright © 2007-2008 Olav Bjorkoy (http://bjorkoy.com)
version 0.7.2
.span-5 .span-17 Cheat sheet v.1.7 by Gareth J M Saunders, based on Help Sheet v.0.3 by Alejandro Vasquez RESET defined in reset.css.

.span-6 .span-18 Blueprint CSS resets all


STYLESHEET LINK browsers’ default tags to:
.span-7 .span-19 - margin, padding, border: 0
Download the latest version from http://www.blueprintcss.org and add these lines into the <head> of your - font-size: 100%
.span-8 .span-20 page. Check that your href path is correct. - font-weight: normal
- other font values: inherit
.span-9 .span-21 <link rel="stylesheet" href="blueprint/screen.css" type="text/css" - image borders: 0
media="screen, projection" />
.span-10 .span-22 <link rel="stylesheet" href="blueprint/print.css" type="text/css"
Tables still need
.span-11 .span-23 media="print" />
“cellspacing=“0” in the mark-
<!--[if lt IE 8]>
up though.
.span-12 .span-24 <link rel="stylesheet" href="blueprint/ie.css" type="text/css"
media="screen, projection" />
<![endif]--> TYPOGRAPHY CLASSES
APPEND CLASSES These classes are defined in
USAGE TYPOGRAPHY the typography.css file. Other
Add these to a column to add
typographic tags as also
empty columns to the right. <body> typography.css sets up some sensible default redefined in this file.
<div class="container"> typography. The font-size percentage is of 16px
.append-1 .append-13
<div class="span-16”> (0.75 x 16px = 12px). Line-heights and vertical .small 0.8em; line 1.875
.append-2 .append-14 <p>Column 1</p> margins are automatically calculated from this in
</div> ems. .large 1.2em; line 2.5
.append-3 .append-15 <div class="span-8 last">
.hide display none
<p>Column 2</p> The base line-height is 18px (1.5em). This means
.append-4 .append-16 </div> that every element, from line-heights to images .quiet color #666 (grey)
</div> have a height that is a multiple of 18 (or 1.5 if you
.append-5 .append-17
</body> use ems). .loud color #000 (black)
.append-6 .append-18
div.span-x implies a column. Remember to .highlight bg #ff0 (yellow)
h1-h6 color is #111 (nearly black); body color is
.append-7 .append-19 use “.last” for the last column of the row to #222 (dark grey); font-family is “Helvetica Neue”, .added bg #060 (green)
avoid it jumping to the next row. Columns can “Helvetica”, “Arial”, sans-serif.
.append-8 .append-20 be nested inside one another. .removed bg #900 (red)
.append-9 .append-21
.first mL 0; pL 0
.append-10 .append-22 GRID defined in grid.css. .last mR 0; pR 0
.append-11 .append-23 Each column is 30px wide with a 10px margin, except the last which has no margin. If you need more or .top mT 0; pT 0
.append-12 fewer columns use this formula to find the new total width: total width = (columns x 40px) - 10px
.bottom mB 0; pB 0
950px (24 columns)
img.left float left; margin
PREPEND CLASSES
img.right float right; margin
Add these to a column to add
empty columns to the left.
FORMS
.prepend-1 .prepend-13
These are defined in the
.prepend-2 .prepend-14 forms.css file.
750px (19 columns)
.prepend-3 .prepend-15 .error red framed box
790px (20 columns) .notice yellow framed box
.prepend-4 .prepend-16
.prepend-5 .prepend-17 830px (21 columns) .success green framed box

.prepend-6 .prepend-18 870px (22 columns) input.text w 300px pad 5px


.prepend-7 .prepend-19 910px (23 columns)
input.title font-size 1.5em
.prepend-8 .prepend-20 textarea w 390px h 250px
GRID CLASSES
.prepend-9 .prepend-21 select w 200px
.prepend-10 .prepend-22 .append-x Add these to a column to append empty columns; x = 1to 23.
label bold
.prepend-11 .prepend-23 .border Shows a border on the right hand side of a column; use on <div>.
fieldset padding 1.4em
.prepend-12 .box Creates a padded box inside a column. (padding: 1.5em; margin-bottom: 1.5em;).
legend font-size 1.2em
.clear Regular clearing: apply to a column that should drop below previous ones.
.clearfix Clearing floats without extra markup. (See http://tinryurl.com/dh352) IE FIXES
PUSH/PULL CLASSES
.colborder Spans one column with a border in the centre. ie.css contains every hack for
Use these classes on an Internet Explorer.
element to push it right into
.container A container should group all your columns; use on <div>.
the next column, or pull it left IE all Fix margin bugs
into the previous column. div.last The last column in a row needs this class; use on <div>.
Line height on
.pull-1 .push-1 .prepend-x Add these to a column to prepend empty columns; x = 1 to 23. sub/sup

.pull-2 .push-2 .pull-x Use these classes on an element to pull it left into the previous column; x = 1 to 24. IE 5 Centre layout

.pull-3 .push-3 .push-x Use these classes on an element to push right it into the next column; x = 1 to 24. IE 6 Fix legend bug

.pull-4 .push-4 .showgrid Use this on any div.span / div.container to see the grid. IE 6 & 7 Fix <ol> numbers

... up to ... ... up to ... hr.space Use this to create a horizontal ruler across a column; can also simply use <hr />. Fix <hr/> margins
.pull-24 .push-24 div.span-x Use these classes to set the width of a column; x = 1- to 4; use on <div>. IE 7 Fix <code> wrap

You might also like