Scribd
Upload
56 views

Blueprint Css

Uploaded by

fafirofafiro
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
56 views

Blueprint Css

Uploaded by

fafirofafiro
Copyright
© Attribution Non-Commercial (BY-NC)
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

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

html reset.css grid.css typography.css Blueprint CSS version 0.7.1 (http://code.google.com/p/blueprintcss/) Copyright 2007-2008 Olav Bjorkoy (http://bjorkoy.com) Cheat sheet v.1.1 by Gareth J M Saunders, based on Help Sheet v.0.3 by Alejandro Vasquez STYLESHEET LINK 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]-->

v.0.7.1

forms.css ie.css RESET Blueprint CSS resets all browsers default tags to : - margin, padding, border: 0 - font-size: 100% - font-weight: normal - other font values: inherit - image borders: 0 Tables still need cellspacing=0 in the markup though. TYPOGRAPHY CLASSES These classes are defined in the typography.css file. Other typographic tags as also redefined in this file. .small .large .hide .quiet 0.8em; line 1.875 1.2em; line 2.5 display: none color 666 (grey) color 000 (black) bg ff0 (yellow) bg 060 (green) bg 900 (red) mL 0; pL 0 mR 0; pR 0 mT 0; pT 0 mB 0; pB 0

APPEND CLASSES Add these to a column to append empty columns. 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 GRID If you need more or fewer columns use this formula to find the new total width: total width = (columns *40) - 10 950px (24 columns) PREPEND CLASSES Add these to a column to prepend empty columns. 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 GRID CLASSES .container .showgrid .border .colborder PUSH/PULL CLASSES Use these classes on an element to push it into the next column, or pull it into the previous column. push-0 push-1 push-2 push-3 push-4 push-5 pull-1 pull-2 pull-3 pull-4 pull-5 .box hr.space .clear .clearfix div.last div.span-x .append-x .prepend-x .push-x .pull-x A container should group all your columns; use on <div>. Use this on any div.span / container to see the grid. Shows a border on the right hand side of a column; use on <div>. Shows a border with more whitespace, spans one column; use on <div>. Creates a padded box inside a column. (padding: 1.5em; margin-bottom: 1.5em;). Use this to create a horizontal ruler across a column; can also simply use <hr />. Regular clearing, apply to column that should drop below previous ones. Clearing floats without extra markup. The last column in a row needs this class; use on <div>. Use these classes to set the width of a column; x = 1-24; use on <div>. Add these to a column to append empty columns; x = 1-23. Add these to a column to prepend empty columns; x = 1-23. Use these classes on an element to push it into the next column; x = 0-5. Use these classes on an element to pull it into the next column; x = 1-5. IE 7 IE 5 IE 6 IE 6 & 7 IE FIXES ie.css contains every hack for Internet Explorer. IE All Fix margin bugs Line height on sub/sup Centre layout Fix legend bug Fix <ol> numbers Fix <hr/> margins Fix <code> wrap 750px (19 columns) 790px (20 columns) 830px (21 columns) 870px (22 columns) 910px (23 columns) div.span-x now implies a column. Remember to use last for the last column of the row to avoid it jumping to the next row. Columns can be nested inside one another. Color is #222 (dark grey); font-family is Helvetica Neue, Helvetica, Arial, sans-serif; Also defines tables, lists and misc. classes. USAGE <body> <div class=container> <div class=span-15> <p>Column 1</p> </div> <div class=span-6 last> <p>Column 2</p> </div> </div> </body> TYPOGRAPHY typographic.css sets up some sensible default typography. The font-size percentage is of 16px (0.75 * 16px = 12 px). Line-heights and vertical margins are automatically calculated from this in ems. The base line-height is 18px (1.5ems). This means that every element, from line-heights to images have a height that is a multiple of 18 (or 1.5 if you use ems).

.loud .highlight .added .removed .first .last .top .bottom FORMS

These are defined in the forms.css file. .error .notice .success input.text red framed box yellow framed box green framed box w 300px pad 5px

input.title font-size 1.5em textarea select label fieldset legend w 390px h 250px w 200px bold padding 1.4em font-size 1.2em

You might also like