Scribd Logo
Upload

Welcome to Scribd!

  • Blueprint CSS Framework Version 0.7.2 Cheat Sheet

    Uploaded by

    Gareth J M Saunders
    20K views1 page
    Blueprint CSS framework version 0.7.2 cheat sheet (version 1.7) by Gareth J M Saunders, based on Help Sheet by Alejandro Vasquez. This is an updated cheat sheet posted on Wednesday 02 June 2010. VERSION 1.7 FIX: Corrected a few minor layout issues. VERSION 1.6 (Wednesday 02 June 2010) ENH: Updated to Blueprint CSS version 0.7.2 which fixed a missing img.left class. FIX: Updated URL for Blueprint CSS. FIX: Various minor typos and errors. VERSION 1.4 (Thursday 26 February 2009) ENH: Changed main graphic to newest Blueprint CSS logo. VERSION 1.3 FIX: I've corrected the URLs for the Blueprint CSS project. FIX: I've corrected the .push-x and .pull-x classes after finding a discrepancy between the classes in screen.css and grid.css. FIX: I've corrected the usage block, the span classes didn't add up to 24 before! ENH: I've made a few enhancements to the descriptions to make it easier to read and understand. ENH: The grid class names are now listed alphabetically. BLUEPRINT CSS version 0.8 I've now also created a cheat sheet for Blueprint CSS version 0.8: http://www.scribd.com/doc/12850249/Blueprint-CSS-framework-version-08-cheat-sheet

    Original Title

    Blueprint CSS framework version 0.7.2 cheat sheet

    Copyright

    © Attribution ShareAlike (BY-SA)

    Available Formats

    PDF or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    Blueprint CSS framework version 0.7.2 cheat sheet (version 1.7) by Gareth J M Saunders, based on Help Sheet by Alejandro Vasquez. This is an updated cheat sheet posted on Wednesday 02 June 2010. VERSION 1.7 FIX: Corrected a few minor layout issues. VERSION 1.6 (Wednesday 02 June 2010) ENH: Updated to Blueprint CSS version 0.7.2 which fixed a missing img.left class. FIX: Updated URL for Blueprint CSS. FIX: Various minor typos and errors. VERSION 1.4 (Thursday 26 February 2009) ENH: Changed main graphic to newest Blueprint CSS logo. VERSION 1.3 FIX: I've corrected the URLs for the Blueprint CSS project. FIX: I've corrected the .push-x and .pull-x classes after finding a discrepancy between the classes in screen.css and grid.css. FIX: I've corrected the usage block, the span classes didn't add up to 24 before! ENH: I've made a few enhancements to the descriptions to make it easier to read and understand. ENH: The grid class names are now listed alphabetically. BLUEPRINT CSS version 0.8 I've now also created a cheat sheet for Blueprint CSS version 0.8: http://www.scribd.com/doc/12850249/Blueprint-CSS-framework-version-08-cheat-sheet

    Copyright:

    Attribution ShareAlike (BY-SA)
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    20K views1 page

    Blueprint CSS Framework Version 0.7.2 Cheat Sheet

    Uploaded by

    Gareth J M Saunders
    Blueprint CSS framework version 0.7.2 cheat sheet (version 1.7) by Gareth J M Saunders, based on Help Sheet by Alejandro Vasquez. This is an updated cheat sheet posted on Wednesday 02 June 2010. VERSION 1.7 FIX: Corrected a few minor layout issues. VERSION 1.6 (Wednesday 02 June 2010) ENH: Updated to Blueprint CSS version 0.7.2 which fixed a missing img.left class. FIX: Updated URL for Blueprint CSS. FIX: Various minor typos and errors. VERSION 1.4 (Thursday 26 February 2009) ENH: Changed main graphic to newest Blueprint CSS logo. VERSION 1.3 FIX: I've corrected the URLs for the Blueprint CSS project. FIX: I've corrected the .push-x and .pull-x classes after finding a discrepancy between the classes in screen.css and grid.css. FIX: I've corrected the usage block, the span classes didn't add up to 24 before! ENH: I've made a few enhancements to the descriptions to make it easier to read and understand. ENH: The grid class names are now listed alphabetically. BLUEPRINT CSS version 0.8 I've now also created a cheat sheet for Blueprint CSS version 0.8: http://www.scribd.com/doc/12850249/Blueprint-CSS-framework-version-08-cheat-sheet

    Copyright:

    Attribution ShareAlike (BY-SA)
    Download as PDF or read online from Scribd
    Flag for inappropriate content
    of 1

    SPAN CLASSES html

    Use these classes to set the reset.css


    width of a column
    grid.css
    .span-1 .span-13
    typography.css
    .span-2 .span-14
    forms.css
    .span-3 .span-15
    ie.css
    .span-4 .span-16 Blueprint CSS version 0.7.2 (http://www.blueprintcss.org)
    Copyright © 2007-2008 Olav Bjorkoy (http://bjorkoy.com)
    version 0.7.2
    .span-5 .span-17 Cheat sheet v.1.7 by Gareth J M Saunders, based on Help Sheet v.0.3 by Alejandro Vasquez RESET defined in reset.css.

    .span-6 .span-18 Blueprint CSS resets all


    STYLESHEET LINK browsers’ default tags to:
    .span-7 .span-19 - margin, padding, border: 0
    Download the latest version from http://www.blueprintcss.org and add these lines into the <head> of your - font-size: 100%
    .span-8 .span-20 page. Check that your href path is correct. - font-weight: normal
    - other font values: inherit
    .span-9 .span-21 <link rel="stylesheet" href="blueprint/screen.css" type="text/css" - image borders: 0
    media="screen, projection" />
    .span-10 .span-22 <link rel="stylesheet" href="blueprint/print.css" type="text/css"
    Tables still need
    .span-11 .span-23 media="print" />
    “cellspacing=“0” in the mark-
    <!--[if lt IE 8]>
    up though.
    .span-12 .span-24 <link rel="stylesheet" href="blueprint/ie.css" type="text/css"
    media="screen, projection" />
    <![endif]--> TYPOGRAPHY CLASSES
    APPEND CLASSES These classes are defined in
    USAGE TYPOGRAPHY the typography.css file. Other
    Add these to a column to add
    typographic tags as also
    empty columns to the right. <body> typography.css sets up some sensible default redefined in this file.
    <div class="container"> typography. The font-size percentage is of 16px
    .append-1 .append-13
    <div class="span-16”> (0.75 x 16px = 12px). Line-heights and vertical .small 0.8em; line 1.875
    .append-2 .append-14 <p>Column 1</p> margins are automatically calculated from this in
    </div> ems. .large 1.2em; line 2.5
    .append-3 .append-15 <div class="span-8 last">
    .hide display none
    <p>Column 2</p> The base line-height is 18px (1.5em). This means
    .append-4 .append-16 </div> that every element, from line-heights to images .quiet color #666 (grey)
    </div> have a height that is a multiple of 18 (or 1.5 if you
    .append-5 .append-17
    </body> use ems). .loud color #000 (black)
    .append-6 .append-18
    div.span-x implies a column. Remember to .highlight bg #ff0 (yellow)
    h1-h6 color is #111 (nearly black); body color is
    .append-7 .append-19 use “.last” for the last column of the row to #222 (dark grey); font-family is “Helvetica Neue”, .added bg #060 (green)
    avoid it jumping to the next row. Columns can “Helvetica”, “Arial”, sans-serif.
    .append-8 .append-20 be nested inside one another. .removed bg #900 (red)
    .append-9 .append-21
    .first mL 0; pL 0
    .append-10 .append-22 GRID defined in grid.css. .last mR 0; pR 0
    .append-11 .append-23 Each column is 30px wide with a 10px margin, except the last which has no margin. If you need more or .top mT 0; pT 0
    .append-12 fewer columns use this formula to find the new total width: total width = (columns x 40px) - 10px
    .bottom mB 0; pB 0
    950px (24 columns)
    img.left float left; margin
    PREPEND CLASSES
    img.right float right; margin
    Add these to a column to add
    empty columns to the left.
    FORMS
    .prepend-1 .prepend-13
    These are defined in the
    .prepend-2 .prepend-14 forms.css file.
    750px (19 columns)
    .prepend-3 .prepend-15 .error red framed box
    790px (20 columns) .notice yellow framed box
    .prepend-4 .prepend-16
    .prepend-5 .prepend-17 830px (21 columns) .success green framed box

    .prepend-6 .prepend-18 870px (22 columns) input.text w 300px pad 5px


    .prepend-7 .prepend-19 910px (23 columns)
    input.title font-size 1.5em
    .prepend-8 .prepend-20 textarea w 390px h 250px
    GRID CLASSES
    .prepend-9 .prepend-21 select w 200px
    .prepend-10 .prepend-22 .append-x Add these to a column to append empty columns; x = 1to 23.
    label bold
    .prepend-11 .prepend-23 .border Shows a border on the right hand side of a column; use on <div>.
    fieldset padding 1.4em
    .prepend-12 .box Creates a padded box inside a column. (padding: 1.5em; margin-bottom: 1.5em;).
    legend font-size 1.2em
    .clear Regular clearing: apply to a column that should drop below previous ones.
    .clearfix Clearing floats without extra markup. (See http://tinryurl.com/dh352) IE FIXES
    PUSH/PULL CLASSES
    .colborder Spans one column with a border in the centre. ie.css contains every hack for
    Use these classes on an Internet Explorer.
    element to push it right into
    .container A container should group all your columns; use on <div>.
    the next column, or pull it left IE all Fix margin bugs
    into the previous column. div.last The last column in a row needs this class; use on <div>.
    Line height on
    .pull-1 .push-1 .prepend-x Add these to a column to prepend empty columns; x = 1 to 23. sub/sup

    .pull-2 .push-2 .pull-x Use these classes on an element to pull it left into the previous column; x = 1 to 24. IE 5 Centre layout

    .pull-3 .push-3 .push-x Use these classes on an element to push right it into the next column; x = 1 to 24. IE 6 Fix legend bug

    .pull-4 .push-4 .showgrid Use this on any div.span / div.container to see the grid. IE 6 & 7 Fix <ol> numbers

    ... up to ... ... up to ... hr.space Use this to create a horizontal ruler across a column; can also simply use <hr />. Fix <hr/> margins
    .pull-24 .push-24 div.span-x Use these classes to set the width of a column; x = 1- to 4; use on <div>. IE 7 Fix <code> wrap

    You might also like