Style Guides: Why I love them

Slide 1

Slide 1 text

Style Guides: Why I love them susanjeanrobertson.com @susanjrobertson

Slide 2

Slide 2 text

How I deﬁne style guide: ‣Not a brand guideline ‣A living document ‣Made with the site/application code ‣You could also call it a pattern library

Slide 3

Slide 3 text

First Glimpse An Event Apart 2011 - Mailchimp http://www.flickr.com/photos/aarronwalter/5579386649/sizes/l/in/photostream/

Slide 4

Slide 4 text

24 Ways, Anna Debenham

Slide 5

Slide 5 text

Starbucks Guide http://www.starbucks.com/static/reference/styleguide/

Slide 6

Slide 6 text

Guides start popping up

Slide 7

Slide 7 text

The Workﬂow - Waterfall

Slide 8

Slide 8 text

VISUAL INVENTORY

Slide 9

Slide 9 text

ASK

Slide 10

Slide 10 text

BUILD

Slide 11

Slide 11 text

MODULAR CODE

Slide 12

Slide 12 text

DESIGNOVELOPMENT

Slide 13

Slide 13 text

Beneﬁts

Slide 14

Slide 14 text

Reference for the whole team

Slide 15

Slide 15 text

Code Beneﬁts ‣Find inconsistencies early in the project ‣Cleaner HTML and CSS ‣Easier testing cross browser ‣Performance improvements from reusing code

Slide 16

Slide 16 text

Code as a system Modular CSS become a system of building blocks

Slide 17

Slide 17 text

Fast build outs

Slide 18

Slide 18 text

Nice deliverable for client http://daverupert.com/2013/04/responsive-deliverables/

Slide 19

Slide 19 text

Workﬂow - Agile

Slide 20

Slide 20 text

Editorially - no style guide

Slide 21

Slide 21 text

Because, this

Slide 22

Slide 22 text

Create style guide to learn

Slide 23

Slide 23 text

Changes as application does

Slide 24

Slide 24 text

Common language

Slide 25

Slide 25 text

Use to make prototypes

Slide 26

Slide 26 text

Where I am at now

Slide 27

Slide 27 text

Live guide [Open Browser for the live guide]

Slide 28

Slide 28 text

Resources

Slide 29

Slide 29 text

Anna’s Gimmebar https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides

Slide 30

Slide 30 text

Anna’s roundup http://maban.co.uk/66

Slide 31

Slide 31 text

South Tees Hospital http://southtees.nhs.uk/style-guide/

Slide 32

Slide 32 text

Starbucks

Slide 33

Slide 33 text

BBC Global Experience

Slide 34

Slide 34 text

Boilerplate http://www.brettjankord.com/2013/03/07/style-guide-boilerplate/

Slide 35

Slide 35 text

Automations tools ‣https://github.com/kneath/kss ‣https://github.com/trulia/hologram ‣https://github.com/filamentgroup/X-rayHTML