Scribd
Upload
28K views1 page

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)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
28K views1 page

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)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF or read online on Scribd
  • Blueprint CSS Overview

SPAN CLASSES html

Use these classes to set the [Link]


width of a column
[Link]
.span-1 .span-13
[Link]
.span-2 .span-14
[Link]
.span-3 .span-15
[Link]
.span-4 .span-16 Blueprint CSS version 0.7.2 ([Link]
Copyright © 2007-2008 Olav Bjorkoy ([Link]
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 [Link].

.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 [Link] 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/[Link]" type="text/css" - image borders: 0
media="screen, projection" />
.span-10 .span-22 <link rel="stylesheet" href="blueprint/[Link]" 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/[Link]" type="text/css"
media="screen, projection" />
<![endif]--> TYPOGRAPHY CLASSES
APPEND CLASSES These classes are defined in
USAGE TYPOGRAPHY the [Link] file. Other
Add these to a column to add
typographic tags as also
empty columns to the right. <body> [Link] 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
[Link]-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 [Link]. .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)
[Link] float left; margin
PREPEND CLASSES
[Link] 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 [Link] 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) [Link] w 300px pad 5px


.prepend-7 .prepend-19 910px (23 columns)
[Link] 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 [Link] IE FIXES
PUSH/PULL CLASSES
.colborder Spans one column with a border in the centre. [Link] 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. [Link] 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 [Link] / [Link] to see the grid. IE 6 & 7 Fix <ol> numbers

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

RESET defined in reset.css. Blueprint CSS resets all browsers’ default tags to: - margin, padding, border: 0 - font-size:

You might also like