A talk given at RefreshPDX on how I came to love style guides and why I think they are an essential part of a site or application.
Style Guides:Why I love themsusanjeanrobertson.com @susanjrobertson
View Slide
How I define style guide:‣Not a brand guideline‣A living document‣Made with the site/application code‣You could also call it a pattern library
First GlimpseAn Event Apart 2011 - Mailchimphttp://www.flickr.com/photos/aarronwalter/5579386649/sizes/l/in/photostream/
24 Ways, Anna Debenham
Starbucks Guidehttp://www.starbucks.com/static/reference/styleguide/
Guides start popping up
The Workflow - Waterfall
VISUAL INVENTORY
ASK
BUILD
MODULAR CODE
DESIGNOVELOPMENT
Benefits
Reference for the whole team
Code Benefits‣Find inconsistencies early in the project‣Cleaner HTML and CSS‣Easier testing cross browser‣Performance improvements from reusing code
Code as a systemModular CSS become a system of building blocks
Fast build outs
Nice deliverable for clienthttp://daverupert.com/2013/04/responsive-deliverables/
Workflow - Agile
Editorially - no style guide
Because, this
Create style guide to learn
Changes as application does
Common language
Use to make prototypes
Where I am at now
Live guide[Open Browser for the live guide]
Resources
Anna’s Gimmebarhttps://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
Anna’s rounduphttp://maban.co.uk/66
South Tees Hospitalhttp://southtees.nhs.uk/style-guide/
Starbucks
BBC Global Experience
Boilerplatehttp://www.brettjankord.com/2013/03/07/style-guide-boilerplate/
Automations tools‣https://github.com/kneath/kss‣https://github.com/trulia/hologram‣https://github.com/filamentgroup/X-rayHTML
When you have one.....
Thank yoususanjeanrobertson.com @susanjrobertson