Smarter Grids with Sass and Susy...and Wordpress!
-
Upload
michelle-barker -
Category
Design
-
view
83 -
download
2
Transcript of Smarter Grids with Sass and Susy...and Wordpress!
![Page 1: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/1.jpg)
SMARTER GRIDS WITH SASS AND SUSY …AND WORDPRESS!
![Page 4: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/4.jpg)
WHAT IS SASS?
![Page 5: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/5.jpg)
VARIABLES
![Page 6: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/6.jpg)
![Page 7: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/7.jpg)
![Page 8: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/8.jpg)
MIXINS
![Page 9: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/9.jpg)
![Page 10: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/10.jpg)
![Page 11: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/11.jpg)
PARTIALS
![Page 12: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/12.jpg)
e.g. _header.scss
![Page 13: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/13.jpg)
![Page 14: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/14.jpg)
COLOUR FUNCTIONS
![Page 21: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/21.jpg)
SUSY IS A FRAMEWORK
![Page 22: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/22.jpg)
not
SUSY IS A FRAMEWORK
![Page 23: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/23.jpg)
“I LIKE THE IDEA OF GRIDS ON DEMAND, RATHER THAN A STRICT FRAMEWORK.”
Chris Coyier
![Page 24: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/24.jpg)
SUSY IS A FRAMEWORK
not
![Page 25: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/25.jpg)
SUSY IS A FRAMEWORK
not
an opinionated
![Page 26: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/26.jpg)
ADVANTAGES
![Page 27: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/27.jpg)
1 (Relatively) easy to learn.
![Page 28: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/28.jpg)
2 No need to add multiple classes to your HTML.
![Page 29: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/29.jpg)
2 No need to add multiple classes to your HTML.
![Page 30: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/30.jpg)
3 Not an opinionated framework.
![Page 31: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/31.jpg)
4 Use as much or as little as you like.
![Page 32: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/32.jpg)
“SUSY SOUNDS LIKE THE BEST THING EVER! HOW DO I GET STARTED?”
![Page 33: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/33.jpg)
SUSY & WORDPRESS
![Page 34: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/34.jpg)
1 Download and install Wordpress.
![Page 36: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/36.jpg)
2 Navigate to your Themes directory.
![Page 37: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/37.jpg)
3 Create a new compass project.
$ compass create new-susy-project
![Page 38: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/38.jpg)
4 Watch your project for changes.
$ compass watch
![Page 39: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/39.jpg)
5 Add Susy!$ gem install susyTerminal
require 'susy'config.rb
@import "susy";screen.scss
![Page 40: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/40.jpg)
![Page 41: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/41.jpg)
6 Rename and reorganise.
![Page 42: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/42.jpg)
![Page 43: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/43.jpg)
![Page 44: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/44.jpg)
![Page 45: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/45.jpg)
7 Create index.php (and any additional files).
![Page 46: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/46.jpg)
STARTER THEMES
![Page 47: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/47.jpg)
BUILDING A SIMPLE LAYOUT WITH SUSY
![Page 49: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/49.jpg)
http://codepen.io/michellebarker/pen/eNNVLO
<header>
<article> <aside>
<footer>
![Page 50: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/50.jpg)
HTML
![Page 51: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/51.jpg)
SCSS
![Page 53: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/53.jpg)
SCSS
![Page 56: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/56.jpg)
SCSS
![Page 59: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/59.jpg)
SCSS
![Page 61: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/61.jpg)
MIXIN VS
FUNCTION
![Page 62: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/62.jpg)
SCSS
![Page 64: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/64.jpg)
THE GALLERY MIXIN
![Page 65: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/65.jpg)
SCSS
![Page 66: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/66.jpg)
SCSS
![Page 67: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/67.jpg)
SCSS
![Page 68: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/68.jpg)
SCSS
![Page 69: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/69.jpg)
SCSS
![Page 71: Smarter Grids with Sass and Susy...and Wordpress!](https://reader030.fdocuments.us/reader030/viewer/2022032506/55ce1a52bb61ebc94a8b4617/html5/thumbnails/71.jpg)
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