Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Speedy solid semantic layout with Susy

Speedy solid semantic layout with Susy

Speedy, solid, semantic layout with Susy. Martin Underhill from tempertemper takes us through using Susy, powerful yet lightweight layout tool built in Sass.

Frontend NE

April 02, 2015
Tweet

More Decks by Frontend NE

Other Decks in Technology

Transcript

  1. Ordered list of contents 1. Reasons why Susy’s great 2.

    Installation 3. Basic usage 4. Advanced usage
  2. Layout woes • Lack of flexibility • Too many dependencies

    • DIY is a headache B • Separation of concerns • Jack of all trades
  3. Flexibility • 4/6/10/18 column grid? • ‘Breaking’ the grid •

    Different grids for different screen-widths • Asymmetric grids
  4. Laying out body { @include container(60em); padding-right:.5em; padding-left:.5em; } [role="banner"]

    .logo { @include span(2 of 4); } [role="navigation"] { @include span(last 2 of 4); }
  5. Overriding li { @include span(4 of 14); padding-right: .5em; padding-left:

    .5em; } article li { float: none; width: auto; margin-right: 0; }
  6. Multiple maps $default: ( columns: 4, gutters: .25, math: fluid,

    gutter-position: after, ); $medium: ( columns: 6, gutters: .25, math: fluid, gutter-position: after, ); $large: ( columns: 12, gutters: .25, math: fluid, gutter-position: after, );
  7. [role="banner"] .logo { @include layout($default); @include span(2 of 4); @media

    (min-width: 30em) { @include layout($medium); @include span(2 of 6); } } [role="navigation"] { @include layout($default); @include span(last 2 of 4); @media (min-width: 30em) { @include layout($medium); @include span(last 4 of 6); } }
  8. Loads more • Asymmetric grids • Margins and padding: pre,

    post, squish, pull, prefix, suffix, bleed • Using span and gutter as a function, instead of a mixin
  9. Remind me… • Keeps markup clean • Flexible • Light-weight

    • Straightforward syntax • Does one thing well