Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
SMARTER  GRIDS  WITH     SASS  AND  SUSY   …AND  WORDPRESS!
http://susy.oddbird.net
http://sass-lang.com
WHAT  IS     SASS?
VARIABLES
MIXINS
PARTIALS
e.g. _header.scss
COLOUR   FUNCTIONS
Lighten or darken a colour: http://jackiebalzer.com/color
http://jackiebalzer.com/color
http://jackiebalzer.com/color
Find the complementary colour: http://jackiebalzer.com/color
http://jackiebalzer.com/color
http://susy.oddbird.net
SUSY  IS  A     FRAMEWORK
not SUSY  IS  A     FRAMEWORK
“I  LIKE  THE  IDEA  OF  GRIDS  ON   DEMAND,  RATHER  THAN  A   STRICT  FRAMEWORK.” Chris Coyier
SUSY  IS  A     FRAMEWORK not
SUSY  IS  A     FRAMEWORK not an opinionated
ADVANTAGES
1   (Relatively) easy to learn.
2   No need to add multiple classes to your HTML.
2   No need to add multiple classes to your HTML.
3   Not an opinionated framework.
4   Use as much or as little as you like.
“SUSY  SOUNDS  LIKE  THE   BEST  THING  EVER!  HOW   DO  I  GET  STARTED?”    
SUSY  &     WORDPRESS
1   Download and install Wordpress.
http://compass-style.org $ gem install compass
2   Navigate to your Themes directory.
3   Create a new compass project. $ compass create new-susy-project
4   Watch your project for changes. $ compass watch
5   Add Susy! $ gem install susyTerminal require 'susy'config.rb @import "susy";screen.scss
6   Rename and reorganise.
7   Create index.php (and any additional files).
STARTER     THEMES
BUILDING  A  SIMPLE   LAYOUT  WITH  SUSY
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
THE   GALLERY  MIXIN
SCSS
SCSS
SCSS
SCSS
SCSS
http://codepen.io/michellebarker/pen/aOOqPN
THANK  YOU   Susy website http://susy.oddbird.net Zell Liew http://www.zell-weekeat.com SitePoint http://www.sitepoint.com...
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
Smarter Grids with Sass and Susy...and Wordpress!
Upcoming SlideShare
Loading in …5
×

Smarter Grids with Sass and Susy...and Wordpress!

2,543 views

Published on

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.

Published in: Design
no profile picture user

  • Be the first to comment

Show More

Smarter Grids with Sass and Susy...and Wordpress!

  1. 1. SMARTER  GRIDS  WITH     SASS  AND  SUSY   …AND  WORDPRESS!
  2. 2. http://susy.oddbird.net
  3. 3. http://sass-lang.com
  4. 4. WHAT  IS     SASS?
  5. 5. VARIABLES
  6. 6. MIXINS
  7. 7. PARTIALS
  8. 8. e.g. _header.scss
  9. 9. COLOUR   FUNCTIONS
  10. 10. Lighten or darken a colour: http://jackiebalzer.com/color
  11. 11. http://jackiebalzer.com/color
  12. 12. http://jackiebalzer.com/color
  13. 13. Find the complementary colour: http://jackiebalzer.com/color
  14. 14. http://jackiebalzer.com/color
  15. 15. http://susy.oddbird.net
  16. 16. SUSY  IS  A     FRAMEWORK
  17. 17. not SUSY  IS  A     FRAMEWORK
  18. 18. “I  LIKE  THE  IDEA  OF  GRIDS  ON   DEMAND,  RATHER  THAN  A   STRICT  FRAMEWORK.” Chris Coyier
  19. 19. SUSY  IS  A     FRAMEWORK not
  20. 20. SUSY  IS  A     FRAMEWORK not an opinionated
  21. 21. ADVANTAGES
  22. 22. 1   (Relatively) easy to learn.
  23. 23. 2   No need to add multiple classes to your HTML.
  24. 24. 2   No need to add multiple classes to your HTML.
  25. 25. 3   Not an opinionated framework.
  26. 26. 4   Use as much or as little as you like.
  27. 27. “SUSY  SOUNDS  LIKE  THE   BEST  THING  EVER!  HOW   DO  I  GET  STARTED?”    
  28. 28. SUSY  &     WORDPRESS
  29. 29. 1   Download and install Wordpress.
  30. 30. http://compass-style.org $ gem install compass
  31. 31. 2   Navigate to your Themes directory.
  32. 32. 3   Create a new compass project. $ compass create new-susy-project
  33. 33. 4   Watch your project for changes. $ compass watch
  34. 34. 5   Add Susy! $ gem install susyTerminal require 'susy'config.rb @import "susy";screen.scss
  35. 35. 6   Rename and reorganise.
  36. 36. 7   Create index.php (and any additional files).
  37. 37. STARTER     THEMES
  38. 38. BUILDING  A  SIMPLE   LAYOUT  WITH  SUSY
  39. 39. http://codepen.io/michellebarker/pen/eNNVLO
  40. 40. http://codepen.io/michellebarker/pen/eNNVLO <header> <article> <aside> <footer>
  41. 41. HTML
  42. 42. SCSS
  43. 43. http://codepen.io/michellebarker/pen/eNNVLO
  44. 44. SCSS
  45. 45. http://codepen.io/michellebarker/pen/eNNVLO
  46. 46. http://codepen.io/michellebarker/pen/eNNVLO
  47. 47. SCSS
  48. 48. http://codepen.io/michellebarker/pen/eNNVLO
  49. 49. http://codepen.io/michellebarker/pen/eNNVLO
  50. 50. SCSS
  51. 51. http://codepen.io/michellebarker/pen/eNNVLO
  52. 52. MIXIN     VS   FUNCTION
  53. 53. SCSS
  54. 54. http://codepen.io/michellebarker/pen/rVVJQa
  55. 55. THE   GALLERY  MIXIN
  56. 56. SCSS
  57. 57. SCSS
  58. 58. SCSS
  59. 59. SCSS
  60. 60. SCSS
  61. 61. http://codepen.io/michellebarker/pen/aOOqPN
  62. 62. 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

×