Embed Size (px)
Citation preview
SMARTER GRIDS WITH SASS AND SUSY …AND WORDPRESS!
WHAT IS SASS?
VARIABLES
MIXINS
PARTIALS
e.g. _header.scss
COLOUR FUNCTIONS
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.
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
<header>
<article> <aside>
<footer>
HTML
SCSS
SCSS
SCSS
SCSS
MIXIN VS
FUNCTION
SCSS
THE GALLERY MIXIN
SCSS
SCSS
SCSS
SCSS
SCSS
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
