Style Guides: Why I love them

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.

Transcript

1. Style Guides: Why I love them susanjeanrobertson.com @susanjrobertson
2. 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
3. First Glimpse An Event Apart 2011 - Mailchimp http://www.flickr.com/photos/aarronwalter/5579386649/sizes/l/in/photostream/
4. 24 Ways, Anna Debenham
5. Starbucks Guide http://www.starbucks.com/static/reference/styleguide/
6. Guides start popping up
7. The Workflow - Waterfall
8. VISUAL INVENTORY
9. ASK
10. BUILD
11. MODULAR CODE
12. DESIGNOVELOPMENT
13. Benefits
14. Reference for the whole team
15. Code Benefits ‣Find inconsistencies early in the project ‣Cleaner HTML and CSS ‣Easier testing cross browser ‣Performance improvements from reusing code
16. Code as a system Modular CSS become a system of building blocks
17. Fast build outs
18. Nice deliverable for client http://daverupert.com/2013/04/responsive-deliverables/
19. Workflow - Agile
20. Editorially - no style guide
21. Because, this
22. Create style guide to learn
23. Changes as application does
24. Common language
25. Use to make prototypes
26. Where I am at now
27. Live guide [Open Browser for the live guide]
28. Resources
29. Anna’s Gimmebar https://gimmebar.com/collection/4ecd439c2f0aaad734000022/front-end-styleguides
30. Anna’s roundup http://maban.co.uk/66
31. South Tees Hospital http://southtees.nhs.uk/style-guide/
32. Starbucks
33. BBC Global Experience
34. Boilerplate http://www.brettjankord.com/2013/03/07/style-guide-boilerplate/
35. Automations tools ‣https://github.com/kneath/kss ‣https://github.com/trulia/hologram ‣https://github.com/filamentgroup/X-rayHTML
36. When you have one.....
37. Thank you susanjeanrobertson.com @susanjrobertson