Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Smarter Grids with Sass and Susy

1.310 visualizaciones

Publicado el

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.

Publicado en: Diseño
  • Sé el primero en comentar

Smarter Grids with Sass and Susy

  1. 1. SMARTER GRIDS WITH SASS AND SUSY
  2. 2. http://susy.oddbird.net
  3. 3. SUSY IS A FRAMEWORK
  4. 4. SUSY IS A FRAMEWORK not
  5. 5. “I LIKE THE IDEA OF GRIDS ON DEMAND, RATHER THAN A STRICT FRAMEWORK.” Chris Coyier
  6. 6. SUSY IS A FRAMEWORK not
  7. 7. SUSY IS A FRAMEWORK not an opinionated
  8. 8. ADVANTAGES
  9. 9. 1 (Relatively) easy to learn.
  10. 10. 2 No need to add multiple classes to your HTML.
  11. 11. 2 No need to add multiple classes to your HTML.
  12. 12. 3 Not an opinionated framework.
  13. 13. 4 Use as much or as little as you like.
  14. 14. “SUSY SOUNDS LIKE THE BEST THING EVER! HOW DO I GET STARTED?”
  15. 15. http://compass-style.org $ gem install susyTerminal require 'susy'config.rb @import "susy";screen.scss
  16. 16. http://codepen.io/michellebarker/pen/eNNVLO
  17. 17. http://codepen.io/michellebarker/pen/eNNVLO <header> <article> <aside> <footer>
  18. 18. HTML
  19. 19. SCSS
  20. 20. http://codepen.io/michellebarker/pen/eNNVLO
  21. 21. SCSS
  22. 22. http://codepen.io/michellebarker/pen/eNNVLO
  23. 23. http://codepen.io/michellebarker/pen/eNNVLO
  24. 24. SCSS
  25. 25. http://codepen.io/michellebarker/pen/eNNVLO
  26. 26. http://codepen.io/michellebarker/pen/eNNVLO
  27. 27. SCSS
  28. 28. http://codepen.io/michellebarker/pen/eNNVLO
  29. 29. MIXIN VS FUNCTION
  30. 30. SCSS
  31. 31. http://codepen.io/michellebarker/pen/rVVJQa
  32. 32. THE GALLERY MIXIN
  33. 33. SCSS
  34. 34. SCSS
  35. 35. SCSS
  36. 36. SCSS
  37. 37. SCSS
  38. 38. http://codepen.io/michellebarker/pen/aOOqPN
  39. 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

×