Your Own Damn [Susy] System

Eric Meyer Suzanne | @ericmsuzanne

SUMMARY: 55 Tests, 55 Passed, 0 Failed

Arty Bullshit

Writing+Music+Performance

Susy

tl;dr

Susy != Grid System

tl;dr

Susy != Framework

tl;dr

Susy == Toolkit

tl;dr

Build Your Own Damn Grid System

Grid System Overload

container, columns, etc.

<article class="column col6of12 last">Article</article>

.article { @include grid-columns(6, 12, last); }

Old dog, new paradigm

Rapid Limitations

Preset width, columns, gutters, technique & markup

We need agile tools

You are the expert on your layout

Personalized Systems

// span 3 of 12 prefix 1...
aside {
  width: ((3*4em) + (2*1em)) / ((12*4em) + (11*1em)) * 100%; // 23.7288136%
  margin-right: 1em / ((12*4em) + (11*1em)) * 100%; // 01.6949153%
  padding-left: ((1*4em) + (1*1em)) / ((12*4em) + (11*1em)); // 08.4745763%
}

target / context = multiplier

.widget {
  width: 14em / 59em * 100%;
}

// span 3 of 12 prefix 1...
aside {
  width: ((3*4em) + (2*1em)) / ((12*4em) + (11*1em)) * 100%; // 23.7288136%
  margin-right: 1em / ((12*4em) + (11*1em)) * 100%; // 01.6949153%
  padding-left: ((1*4em) + (1*1em)) / ((12*4em) + (11*1em)); // 08.4745763%
}

// span 3 of 12 prefix 1...
aside {
  width: span(3 of 12);
  margin-right: gutter(of 12);
  padding-left: span(1 of 12 wide);
}

.narrow { width: span(2 narrow); }
.wide { width: span(2 wide); }
.wider { width: span(2 wider); }

narrow

wide

wider

// span 3 of 12 prefix 1...
aside {
  width: span(3 of 12);
  margin-right: gutter(of 12);
  padding-left: span(1 of 12 wide);
}

// span 3 of 12 prefix 1...
aside {
  @include span(3);
  @include prefix(1);
}

aside {
  @include span(6 at 3 isolate);
}

.item {
  @include gallery(3);
}

item

10 .25 after

1/5

1/2

1/3

1/2

1

Arnaud Gueras nesting test via Nicole Sullivan & OOCSS

(1 2 1 1 3 1 3 2 1 4) .5 before isolate

1/5

1/2

1/3

1/2

1

30em 10 .25 inside

1/5

1/2

1/3

1/2

1

10 (4em 1em) inside-static

1/5

1/2

1/3

1/2

1

10 (80px 20px) static split rtl

1/5

1/2

1/3

1/2

1

.unbox { @include span(30% at 200px isolate); }

Thanks Tsachi Schlidor!

@include span(last 3 isolate at 3 static rtl after no-gutters);

Rapid Development

From prototypes to production

your own framework

Sass, Compass, Susy, Breakpoint, Accoutrement

Breakpoint RWD

article {
  @include full;

  @include susy-breakpoint(30em, 8 .25 inside-static) {
    @include span(last 6);
  }
}

Pure Sass Install

Compass, Bourbon, Bundler, Bower, etc.

Syntax options

@import "susyone";

Thanks Aaron Gray!

Read the docs

susydocs.oddbird.net

Get involved

Code + Ideas + Tutorials + Sites

More soon!

Shorthand for padding, margins, and float direction
Developer tool integration (Brian Gonzalez)
More Breakpoint integration
Better library integration controls

Your layout | our math

DIY Grids with Su

2 Settings & 5 Functions

$susy: (
  columns: 12,
  gutters: 1/4,
);

$fluid: percentage(susy(3) / susy(12));
$static: susy(3) * 4em;