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
   

   View Slide

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
   

   View Slide

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

   View Slide

4. 24 Ways, Anna Debenham
   

   View Slide

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

   View Slide

6. Guides start popping up
   

   View Slide

7. The Workflow - Waterfall
   

   View Slide

8. VISUAL INVENTORY
   

   View Slide

9. ASK
   

   View Slide

10. BUILD
    

    View Slide

11. MODULAR CODE
    

    View Slide

12. DESIGNOVELOPMENT
    

    View Slide

13. Benefits
    

    View Slide

14. Reference for the whole team
    

    View Slide

15. Code Benefits
    ‣Find inconsistencies early in the project
    ‣Cleaner HTML and CSS
    ‣Easier testing cross browser
    ‣Performance improvements from reusing code
    

    View Slide

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

    View Slide

17. Fast build outs
    

    View Slide

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

    View Slide

19. Workflow - Agile
    

    View Slide

20. Editorially - no style guide
    

    View Slide

21. Because, this
    

    View Slide

22. Create style guide to learn
    

    View Slide

23. Changes as application does
    

    View Slide

24. Common language
    

    View Slide

25. Use to make prototypes
    

    View Slide

26. Where I am at now
    

    View Slide

27. Live guide
    [Open Browser for the live guide]
    

    View Slide

28. Resources
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

32. Starbucks
    

    View Slide

33. BBC Global Experience
    

    View Slide

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

    View Slide

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

    View Slide

36. When you have one.....
    

    View Slide

37. Thank you
    susanjeanrobertson.com @susanjrobertson
    

    View Slide