Intro to Singularity

Table of Contents

Wrap-Up

Singularity lets you toss out your old, stodgy grid system and create a system of columns and gutters that actually works with your content, allowing different layouts at different breakpoints, a visual order that isn't tied to your source order, and no more terrible class names.

Thank You

Thanks for attending my presentation today. Compiled here, you'll find the slides, examples, and references I discussed.

I am tsmith512 on Github, Twitter, LinkedIn, Behance, and 500px.

References

Examples

  • Twelve Column Grid Building and spanning a standard twelve column grid with Singularity
  • Asymmetric Grids Building columns of varied width which focus on your content instead of prefabricated fractions
  • Adding Breakpoint Building responsive grid systems with Breakpoint and Singularity together

Snippets to fiddle with on SassMeister

Sass for this page:

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

$one-col: max-width 599px;
$less-than-three: max-width 899px;
$two-col: 600px 899px;
$three-col: 900px;

@include add-grid(1 1 at 600px);
@include add-grid(2 4 3 at 900px);
@include add-gutter(1/8 at 600px);
@include add-gutter(1/4 at 900px);

.toc {
  @include clearfix();

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

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

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

    a {
      font-weight: 600;
      margin-bottom: 1em;

      @include breakpoint($less-than-three) {
        display: block;
      }
    }
  }
}

div > ul > li {
  margin-bottom: 1em;
}

h4 {
  @include breakpoint($one-col) {
    border-top: 1px solid darken($grey-lt, 5%);
    padding-top: 1em;
  }
}