reset.css
- 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.
SPAN CLASSES
| Use these classes to set the width of a column | |
|---|---|
| span-1 | span-13 |
| span-2 | span-14 |
| span-3 | span-15 |
| span-4 | span-16 |
| span-5 | span-17 |
| span-6 | span-18 |
| span-7 | span-19 |
| span-8 | span-20 |
| span-9 | span-21 |
| span-10 | span-22 |
| span-11 | span-23 |
| span-12 | span-24 |
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 | pull-1 |
| push-2 | pull-2 |
| push-3 | pull-3 |
| push-4 | pull-4 |
APPEND CLASSES
| Add these to a column to append empty cols. | |
|---|---|
| append-1 | append-13 |
| append-2 | append-14 |
| append-3 | append-15 |
| append-4 | append-16 |
| append-5 | append-17 |
| append-6 | append-18 |
| append-7 | append-19 |
| append-8 | append-20 |
| append-9 | append-21 |
| append-10 | append-22 |
| append-11 | append-23 |
| append-12 | |
PREPEND CLASSES
| Add these to a column to prepend empty cols. | |
|---|---|
| prepend-1 | prepend-13 |
| prepend-2 | prepend-14 |
| prepend-3 | prepend-15 |
| prepend-4 | prepend-16 |
| prepend-5 | prepend-17 |
| prepend-6 | prepend-18 |
| prepend-7 | prepend-19 |
| prepend-8 | prepend-20 |
| prepend-9 | prepend-21 |
| prepend-10 | prepend-22 |
| prepend-11 | prepend-23 |
| prepend-12 | |
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
<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]-->
GRID STRUCTURE
If you need fewer or more columns, use this formula to find the new total width:
Total width = (columns * 40) - 10
BASIC SETUP
<div class="container">
<div class="column span-15">
<p>Some column content</p>
</div>
<div class="column span-6 last">
<p>Another column</p>
</div>
</div>
</body>
- 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
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.
GRID CLASSES
| container | The container that groups all your columns. |
| column | Use with with span-x to create combinations of columns in the layout. - DEPRECIATED IN 0.7 - no longer necessary, kept in this table for historical reasons |
| border | Draws a border on the right hand side of a column. |
| colborder | Border with more whitespace, spans one column. |
| clear | Clearing floats without extra markup. |
| box | Creates a padded box inside a column. Use it on column’s childs |
| last | The last column in a row needs this class. |
| showgrid | Displays the grid in the “container” or in any element |
| hr.space | (only for <hr>) Creates an invisible (white) horizontal ruler. |
Valid HTML and CSS
DOCUMENT COLUMNS
| Blueprintcss defaults document’s width to 24 cols, 950px. Use this table to calculate other widths or column numbers. | |
|---|---|
| cols-23 | 910px |
| cols-22 | 870px |
| cols-21 | 830px |
| cols-20 | 790px |
| cols-19 | 750px |
| cols-18 | 710px |
| cols-17 | 670px |
| cols-16 | 630px |
| cols-15 | 590px |
| cols-14 | 550px |
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 | color #060 |
| bottom | bottom margins 0 |
| top | top margins 0 |
| hide | display none |
| highlight | bg yellow |
| large | 1.2em lines 2.5em |
| small | .8em lines 1.87em |
| quiet | color #666 |
| removed | color #900 |
| first | margin left 0 padding left 0 |
| last | margin right 0 padding right 0 |
| loud | color #000 |
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 |
| input.title | font-size: 1.5em |
| textarea | w: 390px h: 250px |
| select | w: 200px |
| label | bold |
| fieldset | pad: 1.5em border |
| legend | font-size: 1.2em |
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 | red frame |
| notice | yellow frame |
| success | green frame |
| hide | display none |
| highlight | bg yellow |
| large | 1.2em lines 2.5em |
| small | .8em lines 1.87em |
| quiet | color #666 |
| removed | color #900 |
| p.last | margin bottom 0 |
| table.last | padding right 0 |