Intro to Singularity

Twelve Column Examples

Basic 12 column grid:

A simple twelve column grid a child item one-column wide.

The same grid, with child items which span multiple columns using grid-span()

Remember that the background grid is created using CSS3 gradients and is not an exact match for the layout. If the columns and background grid are off, the columns are correct and the grid may not be. Learn more about that at in the Visualizing your Grids section of Singularity's documentation.

Sass for this page:

// Base includes imports, basic config, and global example items
@import 'base';

// Define the 12 column grid with 1/3 gutters:
@include add-grid(12);
@include add-gutter(1/3);

.twelve-column {
  // Add the background grid simulation:
  @include background-grid($color: $grid-color);

  // First example of a single item:
  .item { @include grid-span(1,1); }

  // The spanning examples:
  .cyan    { @include grid-span(1,1); background: cyan; }
  .magenta { @include grid-span(2,2); background: magenta; }
  .yellow  { @include grid-span(3,4); background: yellow; }
  .black   { @include grid-span(4,7); background: black; }

  // Since the white wasn't easy to read on these:
  #{nest('.cyan, .magenta, .yellow', '.caption')} {
    color: $grey-dk;
  }
}