You are on page 1of 2

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

http://creativecommons.org/licenses/by-sa/2.5/scotland/

RESET Defined in reset.css. Blueprint CSS resets all browsers’ default elements including HTML5 to: • margin, padding, border: 0 • font-size: 100% • font-weight: normal • other font values: inherit • image borders: 0 Note that tables will still need cellspacing=“0” in the HTML mark-up though. TYPOGRAPHY CLASSES These classes are defined in the typography.css file. Other typographic elements are also defined in this file. .small .large .hide .quiet .loud 0.8em; line 1.875 1.2em; line 2.5 display: none color #666 (grey) color #000 (black)

Blueprint CSS version 0.9.1 (www.blueprintcss.org) Copyright © 2007-2010 blueprintcss.org Cheat sheet v.3.5.3 by Gareth J M Saunders (www.garethjmsaunders.co.uk/blueprint) STYLESHEET LINK

version 0.9.1

Download the latest version from www.blueprintcss.org 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 lt IE 8]> <link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" /> <![endif]-->

APPEND CLASSES Add these to a column to add empty columns to the right. .append-1 .append-2 .append-3 .append-4 .append-5 .append-6 .append-7 .append-8 .append-9 .append-10 .append-11 .append-12 PREPEND CLASSES Add these to a column to add empty columns to the left. .prepend-1 .prepend-2 .prepend-3 .prepend-4 .prepend-5 .prepend-6 .prepend-7 .prepend-8 .prepend-9 .prepend-10 .prepend-11 .prepend-12 VERTICAL CLASSES Use these classes on an element to add vertical space. .prepend-top .append-bottom mT 1.5em mB 1.5em .prepend-13 870px (22 columns) .prepend-14 910px (23 columns) .prepend-15 950px (24 columns) .prepend-16 .prepend-17 .prepend-18 .prepend-19 .prepend-20 .prepend-21 .prepend-22 .prepend-23 GRID CLASSES .append-x .append-bottom .border .box .clear .clearfix .colborder .column .container .last .prepend-x .prepend-top PUSH/PULL CLASSES Use these classes on an element to push it right into the next column, or pull it left into the previous column. .push-1 to .push-24 .pull-1 to .pull-24 .pull-x .push-x .showgrid hr.space .span-x Add these to a column to add empty columns to the right; x = 1 to 23. Add a 1.5em gutter below an element. Shows a border on the right hand side of a column. Creates a padded box inside a column. (padding: 1.5em; margin-bottom: 1.5em;). Regular clearing: apply to a column that should drop below previous ones. Clearing floats without extra mark-up. (See http://tinyurl.com/dh352) Spans one column with a border in the centre. Use with .span-x classes to create combinations of columns in the layout. A container should group all your columns; use on <div>. The last column in a row needs this class. Add these to a column to add empty columns to the left; x = 1 to 23. Add a 1.5em gutter above an element. Use these classes on an element to pull it left into the previous column; x = 1 to 24. Use these classes on an element to push it right into the next column; x = 1 to 24. Use this on any .span / .container to see the grid as a background image. Use this to create a transparent horizontal rule across a column; also use <hr />. Use these classes to set the width of a column; x = 1 to 24; usually used on a div element. Can also be used on input and textarea elements. .append-13 .append-14 .append-15 .append-16 .append-17 .append-18 .append-19 .append-20 .append-21 .append-22 .append-23 USAGE <body> <div class="container"> <div class="span-16"> <p>Column 1</p> </div> <div class="span-8 last"> <p>Column 2</p> </div> </div> </body> .span-x implies a column (although .column may still be used). Remember to use “.last” for the last column of the row to avoid it jumping to the next row. Columns may be nested inside one another. GRID Defined in grid.css. Each column is 30px wide with a 10px right margin (except the last column which has no margin). If you need more or fewer columns use this formula to find the new total width: total width = (columns x 40px) - 10px. (See page two for full grid diagram.) 750px (19 columns) 790px (20 columns) TYPOGRAPHY typography.css sets up some sensible default typography. The font-size percentage is of 16px (0.75 x 16px = 12px). Line-heights and vertical margins are automatically calculated from this in ems. The base line-height is 18px (1.5em). This means that each element, from line-heights to images has a height that is a multiple of 18 (or 1.5 if you use ems). h1-h6 color is #111 (nearly black); body color is #222 (dark grey); font-family is “Helvetica Neue”, “Helvetica”, “Arial”, sans-serif.

.highlight bg #ff0 (yellow) .added bg #060 (green)

.removed bg #900 (red) .first .last .top .bottom mL 0; pL 0 mR 0; pR 0 mT 0; pT 0 mB 0; pB 0

IMAGE CLASSES p img.left p img.right float left; m 1.5 1.5 1.5 0 em float right; m: 1.5 0 1.5 1.5 em

FORM CLASSES 830px (21 columns) .error .notice .success fieldset red frame box yellow frame box green frame box pad 1.4em; m 0 0 1.5 0 em

form.inline line-height 3 input.checkbox and input.radio top 0.25em input.text input.title label legend select textarea w 300px p 5px font-size 1.5em bold font-size 1.2em w 200px w390px h250px

IE FIXES IE all fixes for: alignment of inline forms; margin bugs; padding on fieldset; image resizing; line-height on sub/ sup elements. IE5 Fix centre layout. IE6 Fix legend bug; textarea. IE6 & IE7 Fix ol numbers and hr margins. IE7 Fix code wrap.

http://creativecommons.org/licenses/by-sa/2.5/scotland/

Blueprint CSS version 0.9.1 (www.blueprintcss.org) Copyright © 2007-2010 blueprintcss.org Cheat sheet v.3.5.3 by Gareth J M Saunders (www.garethjmsaunders.co.uk/blueprint)

GRID - each column is 30px wide with a 10px right margin, except the last column which has no margin. class .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 width 30px 70px 110px 150px 190px 230px 270px 310px 350px 390px 430px 470px 510px 550px 590px 630px 670px 710px 750px 790px 830px 870px 910px 950px 1 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 1 column (full width) 4 five sixths 6 three quarters 8 two thirds 12 2 columns (half) 8 8 3 columns (thirds) 6 6 6 4 columns (quarters) 4 4 4 4 4 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 pattern 24 columns 12 columns 8 columns 6 columns (sixths)

LINE-HEIGHT The base line-height is 18px. Every element from images to line-height is a multiple of 18. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 18px 36px 54px 72px 90px 108px 126px 144px 162px 180px 198px 216px 234px 252px 270px 288px 306px 324px 342px 360px 378px 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 396px 414px 432px 450px 468px 486px

FILE STRUCTURE blueprint/screen.css blueprint/print.css blueprint/ie.css blueprint/plugins/ blueprint/src/reset.css blueprint/src/grid.css blueprint/src/typography.css blueprint/src/forms.css 504px blueprint/src/print.css 522px 540px 558px 576px 594px 612px 630px 648px 666px 684px 702px 720px 738px 756px Latest ZIP http://github.com/ joshuaclayton/blueprint-css/ zipball/master Latest TGZ http://github.com/ joshuaclayton/blueprint-css/ tarball/master All versions http://github.com/ joshuaclayton/blueprint-css/ downloads blueprint/src/ie.css lib/compress.rb lib/validate/rb

TOOLS & RESOURCES Blueprint CSS home Articles Browser compatibility list Bug tracker Cheat sheets and templates Code generators Demos Discussion group Facebook Github repository JavaScript background grid switcher/toggler Layout editors www.blueprintcss.org http://wiki.github.com/joshuaclayton/blueprint-css/articles http://wiki.github.com/joshuaclayton/blueprint-css/browsercompatibility-list http://blueprintcss.lighthouseapp.com http://wiki.github.com/joshuaclayton/blueprint-css/tools-and-resources http://bluecalc.groupion.com www.blueprintcss.org/tests http://groups.google.com/group/blueprintcss http://www.facebook.com/blueprintcss http://github.com/joshuaclayton/blueprint-css/tree/master http://tomster.org/blog/archive/2008/04/26/blueprint-css-jquery/ http://www.sanityinc.com/articles/bookmarklet-to-toggle-blueprint-cssgrid http://constructyourcss.com or http://toki-woki.net/p/Boks or http://bgg.kematzy.com

DOWNLOADS

License Mods, forks and alternatives Paper grid (A4) Plugins Themes and frameworks Tutorials Twitter Wiki

http://wiki.github.com/joshuaclayton/blueprint-css/license http://wiki.github.com/joshuaclayton/blueprint-css/mods-forks-andalternatives http://blueprintcss.org/media/PaperGrid_by_KaiHowells.pdf http://wiki.github.com/joshuaclayton/blueprint-css/plugins http://wiki.github.com/joshuaclayton/blueprint-css/themes-andframeworks http://wiki.github.com/joshuaclayton/blueprint-css/tutorials http://twitter.com/blueprintcss http://github.com/joshuaclayton/blueprint-css/wikis/home