Speedy, solid, semantic layout with Susy

Slide 1

Slide 1 text

Slide 2

Slide 2 text

Ordered list of contents 1. Reasons why Susy’s great 2. Installation 3. Basic usage 4. Advanced usage

Slide 3

Slide 3 text

Layout woes • Lack of ﬂexibility • Too many dependencies • DIY is a headache B • Separation of concerns • Jack of all trades

Slide 4

Slide 4 text

Semantics

Content

Extra content

Content Extra content

Slide 5

Slide 5 text

Flexibility • 4/6/10/18 column grid? • ‘Breaking’ the grid • Different grids for different screen-widths • Asymmetric grids

Slide 6

Slide 6 text

Dependencies • Can slow compilation of CSS • Increases complexity of a project

Slide 7

Slide 7 text

Maths

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

Master of one • Keeps codebase light • All (layout) bases covered

Slide 10

Slide 10 text

http://susy.oddbird.net/

Slide 11

Slide 11 text

Installation • Bower • Copy/paste .zip • Ruby Gem • GUI (Codekit, Prepros, etc.)

Slide 12

Slide 12 text

Compilers • Compass () • Ruby Sass • Libsass ()

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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); }

Slide 16

Slide 16 text

Overriding li { @include span(4 of 14); padding-right: .5em; padding-left: .5em; } article li { float: none; width: auto; margin-right: 0; }

Slide 17

Slide 17 text

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, );

Slide 18

Slide 18 text

Breakpoints • Hand-written alongside layout context • Susy breakpoints • Breakpoint (http://breakpoint-sass.com/)

Slide 19

Slide 19 text

[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); } }

Slide 20

Slide 20 text

Shorthand article { @include span(8 of 12); img { @include span(last 4 of 8 before); } }

Slide 21

Slide 21 text

Gallery .gallery li { @include gallery(4 of 12); }

Slide 22

Slide 22 text

Loads more • Asymmetric grids • Margins and padding: pre, post, squish, pull, preﬁx, sufﬁx, bleed • Using span and gutter as a function, instead of a mixin

Slide 23

Slide 23 text

susydocs.oddbird.net/en/latest/toolkit/

Slide 24

Slide 24 text

Remind me… • Keeps markup clean • Flexible • Light-weight • Straightforward syntax • Does one thing well

Slide 25

Slide 25 text

@tempertemper