Living Style Guides In Sass

Slide 1

Slide 1 text

Living Style Guides & Sass Wednesday, October 17, 12

Slide 2

Slide 2 text

Hi, I’m Mason @codingdesigner I design and make websites. I love CSS and Sass. Probably too much. Wednesday, October 17, 12

Slide 3

Slide 3 text

I Make Sass Extensions github.com/canarymason Wednesday, October 17, 12

Slide 4

Slide 4 text

Crazy things sassy mother eﬃng text shadow sassymothereﬃngtextshadow.com Wednesday, October 17, 12

Slide 5

Slide 5 text

Modular Scale Calculate typographic scales github.com/scottkellum/modular-scale with @scottkellum Wednesday, October 17, 12

Slide 6

Slide 6 text

Breakpoint Really simple media queries in Sass breakpoint-sass.com with @snugug Wednesday, October 17, 12

Slide 7

Slide 7 text

Survival Kit A Toolset for Designing Web Sites in the Browser thecodingdesigner.com/survivalkit Wednesday, October 17, 12

Slide 8

Slide 8 text

Contact Me Zivtech zivtech.com Mason Wendell - Creative Director Twitter, Dribbble & Drupal: codingdesigner github: canarymason Wednesday, October 17, 12

Slide 9

Slide 9 text

I Wednesday, October 17, 12

Slide 10

Slide 10 text

Living Style Guides Wednesday, October 17, 12

Slide 11

Slide 11 text

BBC GEL Wednesday, October 17, 12

Slide 12

Slide 12 text

OLI.JP Wednesday, October 17, 12

Slide 13

Slide 13 text

Zivtech.com Wednesday, October 17, 12

Slide 14

Slide 14 text

What’s so great? Wednesday, October 17, 12

Slide 15

Slide 15 text

Your style guide is a: Design Cop Wednesday, October 17, 12

Slide 16

Slide 16 text

Your style guide is a: Design Catalog Wednesday, October 17, 12

Slide 17

Slide 17 text

Your style guide is a: Design Sherpa Wednesday, October 17, 12

Slide 18

Slide 18 text

And Also: Code Teacher Responsive Ready Client Pleasing Institutional Memory Wednesday, October 17, 12

Slide 19

Slide 19 text

II Wednesday, October 17, 12

Slide 20

Slide 20 text

What’s Sass got to do with it? Wednesday, October 17, 12

Slide 21

Slide 21 text

Variables Deﬁne colors, dimensions, etc Wednesday, October 17, 12

Slide 22

Slide 22 text

Mixins Abstract your design ideas into reusable formulas Wednesday, October 17, 12

Slide 23

Slide 23 text

Extend Put reused code into reusable silent selectors Wednesday, October 17, 12

Slide 24

Slide 24 text

Partials and Nesting Compartmentalize design modules Encourage more ﬂexible and future-friendly styles Wednesday, October 17, 12

Slide 25

Slide 25 text

Use Creativly Wednesday, October 17, 12

Slide 26

Slide 26 text

Always be Refactoring Wednesday, October 17, 12

Slide 27

Slide 27 text

What is a Sass, and How Will I Know if I’m Shaking it? Wednesday, October 17, 12

Slide 28

Slide 28 text

Ship. Wednesday, October 17, 12

Slide 29

Slide 29 text

Questions & Contact Zivtech zivtech.com Mason Wendell - Creative Director Twitter, Dribbble & Drupal: codingdesigner github: canarymason Wednesday, October 17, 12