Scribd
Upload
194 views1 page

Cheat Sheet v.2.0 by Gareth J M Saunders, Based On Help Sheet v.0.3 by Alejandro Vasquez

Uploaded by

ourpatch
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
194 views1 page

Cheat Sheet v.2.0 by Gareth J M Saunders, Based On Help Sheet v.0.3 by Alejandro Vasquez

Uploaded by

ourpatch
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

SPAN CLASSES 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
- image borders: 0
span-3
span-4
span-15
span-16 Blueprint CSS version 0.8 (http://www.blueprintcss.org) v.0.8 Tables still need
Copyright © 2007-2009 blueprintcss.org
Cheat sheet v.2.0 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://code.google.com/p/blueprintcss/ 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 IE]> .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> typographic.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 * 16px = 12 px). 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.5ems). This .last mR 0; pR 0
</div> means that every element, from line-heights to
append-5 append-17 </div> images have a height that is a multiple of 18 (or .top mT 0; pT 0
append-6 append-18 </body> 1.5 if you 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 Color is #222 (dark grey); font-family is
column of the row to avoid it jumping to the “Helvetica Neue”, “Helvetica”, “Arial”, sans-serif;
append-8 append-20 IMAGE CLASSES
next row. Columns can be nested inside one Also defines tables, lists and misc. classes.
append-9 append-21 another. These classes are defined in
the typography.css file.
append-10 append-22
.left float: left; m 1.5
GRID defined in grid.css.
append-11 append-23 1.5 1.5 0 em
append-12 If you need more or fewer columns use this formula to find the new total width:
.right float: right; m: 1.5
total width = (columns *40) - 10
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
textarea w 390px h 250px
prepend-7 prepend-19 .append-x Add these to a column to add empty columns to the right; x = 1-23.
select w 200px
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.
fieldset p 1.4em; m 0 0
prepend-10 prepend-22 .box Creates a padded box inside a column. (padding: 1.5em; margin-bottom: 1.5em;).
1.5 0 em; border
prepend-11 prepend-23 .clear Regular clearing, apply to column that should drop below previous ones.
legend font-size 1.2em
prepend-12 .clearfix Clearing floats without extra markup. (See http://tinyurl.com/dh352)
div.colborder Shows a border with more whitespace, spans one column. 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-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-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-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 / 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-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

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy