SMARTER GRIDS WITH

SASS AND SUSY

http://susy.oddbird.net

SUSY IS A

FRAMEWORK

SUSY IS A

FRAMEWORK

not

“I LIKE THE IDEA OF GRIDS ON DEMAND,

RATHER THAN A STRICT FRAMEWORK.”

Chris Coyier

SUSY IS A

FRAMEWORK

not

SUSY IS A

FRAMEWORK

notan opinionated

ADVANTAGES

1(Relatively) easy to learn.

2No need to add multiple classes to your HTML.

2No need to add multiple classes to your HTML.

3Not an opinionated framework.

4Use as much or as little as you like.

“SUSY SOUNDS LIKE THE BEST THING EVER! HOW

DO I GET STARTED?”

http://compass-style.org

$ gem install susyTerminal

require 'susy'config.rb

@import "susy";screen.scss

http://codepen.io/michellebarker/pen/eNNVLO

http://codepen.io/michellebarker/pen/eNNVLO

<header>

<article> <aside>

<footer>

HTML

SCSS

http://codepen.io/michellebarker/pen/eNNVLO

SCSS

http://codepen.io/michellebarker/pen/eNNVLO

http://codepen.io/michellebarker/pen/eNNVLO

SCSS

http://codepen.io/michellebarker/pen/eNNVLO

http://codepen.io/michellebarker/pen/eNNVLO

SCSS

http://codepen.io/michellebarker/pen/eNNVLO

MIXIN VS

FUNCTION

SCSS

http://codepen.io/michellebarker/pen/rVVJQa

THEGALLERY MIXIN

SCSS

SCSS

SCSS

SCSS

SCSS

http://codepen.io/michellebarker/pen/aOOqPN

THANK YOUSusy website http://susy.oddbird.net

Zell Liew http://www.zell-weekeat.com

SitePoint http://www.sitepoint.com/sass-grids-neat-susy

Codepen http://codepen.io/collection/DExeJL/

@mbarker_84