Smarter Grids with Sass and Susy...and Wordpress!
6 likes3,116 views
The document discusses using Sass and the Susy framework in WordPress for creating responsive grid layouts. It outlines the advantages of using Susy, such as ease of learning and flexibility, and provides a step-by-step guide on how to install and set up Susy within a WordPress environment. Additionally, there are links to resources and examples for further exploration of grid layouts using Sass and Susy.
Smarter Grids with Sass and Susy...and Wordpress!
- 1. SMARTER GRIDS WITH SASS AND SUSY …AND WORDPRESS!
- 4. WHAT IS SASS?
- 5. VARIABLES
- 8. MIXINS
- 11. PARTIALS
- 14. COLOUR FUNCTIONS
- 15. Lighten or darken a colour: http://jackiebalzer.com/color
- 18. Find the complementary colour: http://jackiebalzer.com/color
- 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.
- 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
- 50. HTML
- 51. SCSS
- 53. SCSS
- 56. SCSS
- 59. SCSS
- 61. MIXIN VS FUNCTION
- 62. SCSS
- 65. SCSS
- 66. SCSS
- 67. SCSS
- 68. SCSS
- 69. SCSS
- 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