groups

Link to this snippet:


Download to Code Collector

language: HTML
licence: Other

blueprint class

options: send to code collectorview all davidholbrook's snippets
.small
    Makes the text of this element smaller.
.large
    Makes the text of this element larger.
.hide
    Hides an element.
.quiet
    Tones down the font color for this element.
.loud
    Makes this elements text black.
.highlight
    Adds a yellow background to the text.
.added
    Adds green background to the text.
.removed
    Adds red background to the text.
.first
    Removes any left sided margin/padding from the element.
.last
    Removes any right sided margin/padding from the element.
.top
    Removes any top margin/padding from the element.
.bottom
    Removes any bottom margin/padding from the element.

Styling Forms

div.error
    Creates an error box (red).
div.notice
    Creates a box for notices (yellow).
div.success
    Creates a box for success messages (green).

Creating a Grid

  <div class="container">
      <div class="span-24">
          The header
      </div>

      <div class="span-4">
          The first column
      </div>
      <div class="span-16">
          The center column
      </div>
      <div class="span-4 last">
          The last column
      </div>

      <div class="span-24">
          The footer
      </div
  </div>

.append-x
    Appends x number of empty columns after a column.
.prepend-x
    Preppends x number of empty columns before a column.
.push-x
    Pushes a column x columns to the left. Can be used to swap columns.
.pull-x
    Pulls a column x columns to the right. Can be used to swap columns.
.border
    Applies a border to the right side of the column.
.colborder
    Appends one empty column, with a border down the middle.
.clear
    Makes a column drop below a row, regardless of space.
.showgrid
    Add to container or column to see the grid and baseline.