Scribd
Upload
138 views1 page

Blueprint Cheat Sheet

Uploaded by

Frank Siegin
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
138 views1 page

Blueprint Cheat Sheet

Uploaded by

Frank Siegin
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

reset.

css Blueprintcss resets all browsers default css tags to: margin, padding and border: 0, font-size:100%, font-weights:normal, other font values: inherit, image borders:0 Tables still need 'cellspacing="0"' in the markup though.

DOCUMENT COLUMNS Blueprintcss defaults documents width to 24 cols, 950px. Use this table to calculate other widths or column numbers.
cols-23 cols-22 cols-21 cols-20 cols-19 cols-18 cols-17 cols-16 cols-15 cols-14 910px 870px 830px 790px 750px 710px 670px 630px 590px 550px

Copyright (c) 2007 Olav Bjorkoy (http://bjorkoy.com) Original PDF Help Sheet v.0.3 by Alejandro Vasquez (http://www.digitart.net) 13-11-07 Online Help Sheet Version 0.2 by Alex Winfield (http://gildedtalon.com) 13-03-08

Updated for Version 0.71

LINKING 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.
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection"> <link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print"> <!--[if IE]> <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection"> <![endif]-->

SPAN CLASSES Use these classes to set the width of a column


span-1 span-2 span-3 span-4 span-5 span-6 span-7 span-8 span-9 span-10 span-11 span-12 span-13 span-14 span-15 span-16 span-17 span-18 span-19 span-20 span-21 span-22 span-23 span-24

TYPOGRAPHY CLASSES This classes are defined in the typography.css file. Other typographic tags as hx, p, a, ul, ol, etc. are also redefined in this file
added bottom top hide highlight large small color #060 bottom margins 0 top margins 0 display none bg yellow 1.2em lines 2.5em .8em lines 1.87em color #666 color #900 margin left 0 padding left 0 margin right 0 padding right 0 color #000

GRID STRUCTURE

PUSH/PULL CLASSES Use these classes on an element to push it into the next column, or to pull it into the previous column.
push-0 push-1 push-2 push-3 push-4 pull-1 pull-2 pull-3 pull-4
<body> <div class="container">

quiet removed first

last

If you need fewer or more columns, use this formula to find the new total width: Total width = (columns * 40) - 10

loud

BASIC SETUP

typography.css Sets up some sensible default typography. This is where the base 12px font size (75%) is defined. The line-heights and vertical margins are automatically calculated from this in ems. It sets a baseline (line-height) of 18px (1.5ems). This means that every element, from line-heights to images has to have a height that is a multiple of 18 (or 1.5 if you use ems). This may seem a bit tedious, but the results tend to look great. If you want to use your own typographic definitions, you can still use reset.css and grid.css to your liking. Just remember to compress them in one new single css file.

forms.css This tags with classes have special definitions on file forms.css. For text fields, use class .title or .text
input.text w: 300px pad 5px font-size: 1.5em w: 390px h: 250px w: 200px bold pad: 1.5em border font-size: 1.2em

APPEND CLASSES Add these to a column to append empty cols.


append-1 append-2 append-3 append-4 append-5 append-6 append-7 append-8 append-9 append-10 append-11 append-12 append-13 append-14 append-15 append-16 append-17 append-18 append-19 append-20 append-21 append-22 append-23

<div class="column span-15"> <p>Some column content</p> </div> <div class="column span-6 last"> <p>Another column</p> </div> </div> </body>

input.title

textarea select label fieldset

Remember to use last for the last column of the row to avoid it to jump into the next row Columns can be nested inside other columns, just remember to use last at the end of each row

legend

FORMS CLASSES This classes are defined in the form.css file. Other form related tags such as input, textarea, select etc. are also redefined in this file
error notice success hide red frame yellow frame green frame display none bg yellow 1.2em lines 2.5em .8em lines 1.87em color #666 color #900 margin bottom 0 padding right 0

GRID CLASSES PREPEND CLASSES


container The container that groups all your columns. Use with with span-x to create combinations of column

Add these to a column to prepend empty cols.


prepend-1 prepend-2 prepend-3 prepend-4 prepend-5 prepend-6 prepend-7 prepend-8 prepend-9 prepend-10 prepend-11 prepend-12 prepend-13 prepend-14 prepend-15 prepend-16 prepend-17 prepend-18 prepend-19 prepend-20 prepend-21 prepend-22 prepend-23

- DEPRECIATED IN 0.7 - no longer necessary, kept in this table for historical reasons
columns in the layout. Draws a border on the right hand side of a column. Border with more whitespace, spans one column. Clearing floats without extra markup. Creates a padded box inside a column. Use it on columns childs The last column in a row needs this class. Displays the grid in the container or in any element (only for <hr>) Creates an invisible (white) horizontal ruler.

border colborder clear box last showgrid

highlight large

small quiet removed p.last table.last

hr.space

Valid HTML and CSS

You might also like