Intro to Singularity

Combining Breakpoint and Singularity

Responsive Grids:

By adding @import add-grid(X at 600px), you can specify a new set of grids (or gutter, using the same syntax) at a particular min-width breakpoint.

Note that the source order is seen at the narrowest (one-column) breakpoint. In this example, the main body is output first, followed by the left nav, and then the right rail. But the widest layout lays these out in a single row, with the body appearing second.

This is possible using Singularity's Isolation output style. It works best when rearranging content which will ultimately be in one "row," but by adding some clear rules after the @include grid-span() rules, you can achieve a lot of flexibility.

Example 2: Four columns, but different widths at different sizes

Note that the grid changes at 900px, but the adjustment doesn't happen until 1000px. Singularity won't try to read your mind and make automatic adjustments for you. If you want to rearrange your items each time the grid changes, you'll need to make a breakpoint when the grid changes.

This is useful if you wanted to set up a two or three column display in a nested area and just keep it as your grid continues to change at larger sizes. It does mean you may write the same @include grid-span() declaration twice, but keep in mind that the rule has a different output because the grid context has changed.

Sass for this page:

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

$two-col: 600px 899px;
$three-col: 900px;

@include add-grid(1 1);
@include add-grid(2 4 3 at $three-col);
@include add-gutter(1/8);
@include add-gutter(1/4 at $three-col);

.example-1 {
  @include background-grid($color: $grid-color);

  .left {
    @include breakpoint($two-col) {
      @include grid-span(1,1);
      clear: both;
    }
    @include breakpoint($three-col) {
      @include grid-span(1,1);
    }
  }

  .center {
    @include breakpoint($two-col) {
      @include grid-span(2,1);
    }
    @include breakpoint($three-col) {
      @include grid-span(1,2);
    }
  }

  .right {
    @include breakpoint($two-col) {
      @include grid-span(1,2);
    }
    @include breakpoint($three-col) {
      @include grid-span(1,3);
    }
  }
}

.example-2 {
  // Note that the global add-grid and add-gutter statements still apply here,
  // so we're using the same breakpoint that we used above, just to keep things
  // easy in this extra example.
  $funky-columns: 900px;
  $adjust-at: 1000px; // To illustrate a point.

  @include add-grid(4);
  @include add-grid(2 4 3 1 at $funky-columns);
  @include add-gutter(1/8);
  @include add-gutter(1/4 at $funky-columns);

  @include background-grid($color: $grid-color);

  .item1 { @include grid-span(1,1);
    @include breakpoint($adjust-at) {
      @include grid-span(1,1);
    }
  }

  .item2 { @include grid-span(1,2);
    @include breakpoint($adjust-at) {
      @include grid-span(1,2);
    }
  }

  .item3 { @include grid-span(1,3);
    @include breakpoint($adjust-at) {
      @include grid-span(1,3);
    }
  }

  .item4 { @include grid-span(1,4);
    @include breakpoint($adjust-at) {
      @include grid-span(1,4);
    }
  }
}