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

Speedy, solid, semantic layout with Susy

Speedy, solid, semantic layout with Susy

This talk explains how to use Sass for layout, via the powerful yet light-weight Susy library.

Df6d8f8c1cc3ec843969759ee607e79b?s=128

tempertemper

April 02, 2015
Tweet

Transcript

  1. Speedy, solid, semantic layout with Susy

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

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

    • DIY is a headache B • Separation of concerns • Jack of all trades
  4. Semantics <div class="col-sm-5 .col-md-6">Content</div> <div class="col-sm-5 .col-sm-offset-2 .col-md-6 .col-md- offset-0">Extra

    content</div> <main class="main">Content</main> <aside>Extra content</aside>
  5. Flexibility • 4/6/10/18 column grid? • ‘Breaking’ the grid •

    Different grids for different screen-widths • Asymmetric grids
  6. Dependencies • Can slow compilation of CSS • Increases complexity

    of a project
  7. Maths

  8. None
  9. Master of one • Keeps codebase light • All (layout)

    bases covered
  10. http://susy.oddbird.net/

  11. Installation • Bower • Copy/paste .zip • Ruby Gem •

    GUI (Codekit, Prepros, etc.)
  12. Compilers • Compass () • Ruby Sass • Libsass ()

  13. Import Susy @import "susy"; @import "../components/susy/sass/susy"; Or

  14. Grid settings (maps) $susy: ( columns: 4, gutters: .25, math:

    fluid, );
  15. 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); }
  16. Overriding li { @include span(4 of 14); padding-right: .5em; padding-left:

    .5em; } article li { float: none; width: auto; margin-right: 0; }
  17. 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, );
  18. Breakpoints • Hand-written alongside layout context • Susy breakpoints •

    Breakpoint (http://breakpoint-sass.com/)
  19. [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); } }
  20. Shorthand article { @include span(8 of 12); img { @include

    span(last 4 of 8 before); } }
  21. Gallery .gallery li { @include gallery(4 of 12); }

  22. 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
  23. susydocs.oddbird.net/en/latest/toolkit/

  24. Remind me… • Keeps markup clean • Flexible • Light-weight

    • Straightforward syntax • Does one thing well
  25. @tempertemper