blueprint cheat sheet (PDF)

Document Sample
blueprint cheat sheet (PDF) Powered By Docstoc
					reset.css                                                                                                                                     DOCUMENT COLUMNS

Blueprintcss resets all browsers default                                                                                                      Blueprintcss defaults document’s
css tags to:                                                                                                                                  width to 24 cols, 950px. Use this table
   margin, padding and border: 0,                   Copyright (c) 2007 Olav Bjorkoy (                                      to calculate other widths or column
   font-size:100%,                                  Original PDF Help Sheet v.0.3 by Alejandro Vasquez ( 13-11-07     numbers.
   font-weights:normal,                             Online Help Sheet Version 0.2 by Alex Winfield ( 13-03-08
                                                                                                                                                cols-23                          910px
   other font values: inherit,                                                 Updated for Version 0.71
                                                                                                                                                cols-22                          870px
   image borders:0
                                                                                                                                                cols-21                          830px
Tables still need 'cellspacing="0"' in the                                                                                                      cols-20                          790px
markup though.
                                             Download the latest version from and                        cols-19                          750px
                                             add these lines into the <head> of your page. Check that your href path is                         cols-18                          710px
SPAN CLASSES                                 correct.
                                                                                                                                                cols-17                          670px

                                                                                                                                                cols-16                          630px
Use these classes to set the width of a         <link rel="stylesheet" href="blueprint/screen.css" type="text/css"

column                                          media="screen, projection">                                                                     cols-15                          590px
                                                <link rel="stylesheet" href="blueprint/print.css" type="text/css"
  span-1                      span-13                                                                                                           cols-14                          550px

  span-2                      span-14           <!--[if IE]>
                                                    <link rel="stylesheet" href="blueprint/ie.css" type="text/css"
  span-3                      span-15           media="screen, projection">                                                                   TYPOGRAPHY CLASSES
  span-4                      span-16
                                                                                                                                              This classes are defined in the
  span-5                      span-17                                                                                                         typography.css file. Other typographic
  span-6                      span-18                                                                                                         tags as hx, p, a, ul, ol, etc. are also
                                             GRID STRUCTURE
                                                                                                                                              redefined in this file
  span-7                      span-19
                                                                                                                                                added         color #060
  span-8                      span-20
                                                                                                                                                bottom        bottom margins 0
  span-9                      span-21
                                                                                                                                                top           top margins 0
  span-10                     span-22
                                                                                                                                                hide          display none
  span-11                     span-23
                                                                                                                                                highlight     bg yellow
  span-12                     span-24
                                                                                                                                                large         1.2em lines 2.5em

                                                                                                                                                small         .8em lines 1.87em

PUSH/PULL CLASSES                                                                                                                               quiet         color #666

                                                                                                                                                removed       color #900
Use these classes on an element to
                                                                                                                                                              margin left 0 padding
push it into the next column, or to pull                                                                                                        first
                                                                                                                                                              left 0
it into the previous column.
                                                                                                                                                              margin right 0 padding
  push-0                                                                                                                                                      right 0
                                             If you need fewer or more columns, use this formula to find the new total width:
                                                                                                                                                loud          color #000
  push-1                       pull-1                               Total width = (columns * 40) - 10
  push-2                       pull-2

  push-3                       pull-3                                                                                                         forms.css
                                             BASIC SETUP                                          typography.css
  push-4                       pull-4
                                                                                                                                              This tags with classes have special
                                             <body>                                              Sets up some sensible default
                                                 <div class="container">                                                                      definitions on file forms.css.
                                                                                                 typography. This is where the base
APPEND CLASSES                                         <div class="column span-15">                                                           For text fields, use class .title or .text
                                                                                                 12px font size (75%) is defined. The
                                                            <p>Some column
                                                                                                 line-heights and vertical margins are          input.text
                                                                                                                                                                   w: 300px pad
Add these to a column to append              content</p>
                                                                                                 automatically calculated from this in
empty cols.
                                                       <div class="column span-6                 ems.                                                              font-size:
  append-1                 append-13                                                                                                                               1.5em

  append-2                 append-14                        <p>Another column</p>                It sets a baseline (line-height) of 18px                          w: 390px h:
                                                       </div>                                    (1.5ems). This means that every                                   250px
  append-3                 append-15             </div>                                          element, from line-heights to images           select             w: 200px
  append-4                 append-16         </body>
                                                                                                 has to have a height that is a multiple of
                                               Remember to use “ last ” for the last                                                            label              bold
  append-5                 append-17                                                             18 (or 1.5 if you use ems). This may
                                               column of the row to avoid it to “jump”                                                                             pad: 1.5em
                                                                                                 seem a bit tedious, but the results tend       fieldset
  append-6                 append-18
                                               into the next row                                                                                                   border
                                                                                                 to look great.
  append-7                 append-19           Columns can be nested inside other                                                                                  font-size:
                                               columns, just remember to use “ last ”                                                                              1.2em
  append-8                 append-20                                                             If you want to use your own
                                               at the end of each row
  append-9                 append-21                                                             typographic definitions, you can still
                                                                                                 use reset.css and grid.css to your           FORMS CLASSES
  append-10                append-22
                                                                                                 liking. Just remember to compress
  append-11                append-23                                                             them in one new single css file.             This classes are defined in the
  append-12                                                                                                                                   form.css file. Other form related tags
                                                                                                                                              such as input, textarea, select etc. are
                                             GRID CLASSES
                                                                                                                                              also redefined in this file
                                              container         The container that groups all your columns.                                     error             red frame
Add these to a column to prepend                                Use with with span-x to create combinations of                                  notice            yellow frame
empty cols.                                   column            columns in the layout.         - DEPRECIATED IN 0.7 - no longer
                                                                                                                                                success           green frame
  prepend-1              prepend-13                             necessary, kept in this table for historical reasons
                                                                                                                                                hide              display none
  prepend-2              prepend-14           border            Draws a border on the right hand side of a column.
                                                                                                                                                highlight         bg yellow
  prepend-3              prepend-15           colborder         Border with more whitespace, spans one column.
                                                                                                                                                                  1.2em lines
  prepend-4              prepend-16           clear             Clearing floats without extra markup.                                                             2.5em

  prepend-5              prepend-17                             Creates a padded box inside a column. Use it on                                                   .8em lines
                                              box                                                                                               small
                                                                column’s childs                                                                                   1.87em
  prepend-6              prepend-18
                                              last              The last column in a row needs this class.                                      quiet             color #666
  prepend-7              prepend-19
                                                                Displays the grid in the “container” or in any                                  removed           color #900
  prepend-8              prepend-20           showgrid
                                                                                                                                                p.last            margin bottom 0
  prepend-9              prepend-21
                                                                (only for <hr>) Creates an invisible (white)
                                                                                                                              table.last        padding right 0
  prepend-10             prepend-22                             horizontal ruler.

  prepend-11             prepend-23

  prepend-12                                                                   Valid HTML and CSS

Shared By: