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.

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