Intro to Singularity

Asymmetric Grids

Specify Grids as a List:

In addition to the add-grid(X) syntax, grids can also be specified as a list like this, @include add-grid(1 1 1 1):

Asymmetric Grids:

So what if we changed one of those to a 2 like this, @include add-grid(1 2 1 1)?

More Examples:

This allows grids to be created for a purpose, instead of by creating boxes which are multiples of equal columns. Also, @include grid-span() rules can be added to elements or classes directly within CSS, meaning that no presentational classes littering your markup are required to make these work.

Example 3: @include add-grid(2 6)

Example 4: @include add-grid(2 4 2)

Sass for this page:

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

// Define the four column grid using a list
@include add-grid(1 1 1 1);
@include add-gutter(1/3);

.four-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 layout() mixin can be used to make a one-time override
// to the global values created with add-grid().
@include layout($grid: 1 2 1 1) {
  .asymmetric {
    // Add the background grid simulation:
    @include background-grid($color: $grid-color);

    // A standard first column
    .item { @include grid-span(1,1); }

    // The second item goes in column 2, which is wider than the others,
    // but it is still addressed as a single column.
    .item2 { @include grid-span(1,2); }
  }
}

@include layout($grid: 2 6) {
  .example-3 {
    // Add the background grid simulation:
    @include background-grid($color: $grid-color);

    // A standard first column
    .item { @include grid-span(1,1); }
    .item2 { @include grid-span(1,2); }
  }
}

@include layout($grid: 2 4 2) {
  .example-4 {
    // Add the background grid simulation:
    @include background-grid($color: $grid-color);

    // A standard first column
    .header { /* For a full-width region, no need to add a grid-span() */ }
    .item { @include grid-span(1,1); height: 210px; }
    .item2 { @include grid-span(1,2); }
    .item3 { @include grid-span(1,3); }
    .footer { @include grid-span(2,2); clear: right; }
  }
}