Speedy, solid, semantic layout with Susy

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

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
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