In this talk I look at how using Susy, a Sass grid framework, can make creating responsive grids for the web easier and speed up your design workflow. I cover the advantages of using Susy, how to get started and some of Susy’s mixins and functions, with visual demonstrations.

1. SMARTER GRIDS WITH
SASS AND SUSY

2. http://susy.oddbird.net

3. SUSY IS A
FRAMEWORK

4. SUSY IS A
FRAMEWORK
not

5. “I LIKE THE IDEA OF
GRIDS ON DEMAND,
RATHER THAN A STRICT
FRAMEWORK.”
Chris Coyier

6. SUSY IS A
FRAMEWORK
not

7. SUSY IS A
FRAMEWORK
not
an opinionated

8. ADVANTAGES

9. 1
(Relatively) easy to learn.

10. 2
No need to add multiple classes to your HTML.

11. 2
No need to add multiple classes to your HTML.

12. 3
Not an opinionated framework.

13. 4
Use as much or as little as you like.

14. “SUSY SOUNDS LIKE THE
BEST THING EVER! HOW
DO I GET STARTED?”

15. http://compass-style.org
$ gem install susyTerminal
require 'susy'config.rb
@import "susy";screen.scss

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

17. http://codepen.io/michellebarker/pen/eNNVLO
<header>
<article> <aside>
<footer>

18. HTML

19. SCSS

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

21. SCSS

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

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

24. SCSS

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

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

27. SCSS

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

29. MIXIN
VS
FUNCTION

30. SCSS

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

32. THE
GALLERY MIXIN

33. SCSS

34. SCSS

35. SCSS

36. SCSS

37. SCSS

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

39. THANK YOU
Susy 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