Speedy, solid, semantic layout with Susy

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