In this talk I’ll 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’ll cover getting started with Sass and Susy in your Wordpress project, the advantages of using Susy, and some useful mixins and functions to help you create awesome grids.

1. SMARTER GRIDS WITH
SASS AND SUSY
…AND WORDPRESS!

2. http://susy.oddbird.net

3. http://sass-lang.com

4. WHAT IS
SASS?

5. VARIABLES

8. MIXINS

11. PARTIALS

12. e.g.
_header.scss

14. COLOUR
FUNCTIONS

15. Lighten or darken a colour:
http://jackiebalzer.com/color

16. http://jackiebalzer.com/color

17. http://jackiebalzer.com/color

18. Find the complementary colour:
http://jackiebalzer.com/color

19. http://jackiebalzer.com/color

20. http://susy.oddbird.net

21. SUSY IS A
FRAMEWORK

22. not
SUSY IS A
FRAMEWORK

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

24. SUSY IS A
FRAMEWORK
not

25. SUSY IS A
FRAMEWORK
not
an opinionated

26. ADVANTAGES

27. 1
(Relatively) easy to learn.

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

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

30. 3
Not an opinionated framework.

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

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

33. SUSY &
WORDPRESS

34. 1
Download and install Wordpress.

35. http://compass-style.org
$ gem install compass

36. 2
Navigate to your Themes directory.

37. 3
Create a new compass project.
$ compass create new-susy-project

38. 4
Watch your project for changes.
$ compass watch

39. 5
Add Susy!
$ gem install susyTerminal
require 'susy'config.rb
@import "susy";screen.scss

41. 6
Rename and reorganise.

45. 7
Create index.php (and any additional files).

46. STARTER
THEMES

47. BUILDING A SIMPLE
LAYOUT WITH SUSY

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

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

50. HTML

51. SCSS

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

53. SCSS

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

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

56. SCSS

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

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

59. SCSS

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

61. MIXIN
VS
FUNCTION

62. SCSS

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

64. THE
GALLERY MIXIN

65. SCSS

66. SCSS

67. SCSS

68. SCSS

69. SCSS

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

71. 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