Styleguide Driven Development

Presented at Seattle Interactive Conference 2014

Transcript

1. Styleguide Driven
   Development
   SEATTLE INTERACTIVE CONFERENCE / 2014
   

   View Slide

2. What?
   Why?
   How?
   

   View Slide

3. 3
   MATT FORDHAM
   PARTNER & TECHNICAL DIRECTOR
   WWW.WINTR.US / @MATTFORDHAM
   

   View Slide

4. View Slide

5. View Slide

6. 6
   The traditional styleguide
   

   View Slide

7. 7
   “Mock-ups”, “Comps”, etc
   

   View Slide

8. 8
   The old way
   ✴ Duplication of code
   ✴ Inconsistent code style
   ✴ Poorly named classes
   ✴ Visual bugs, regressions
   ✴ Inconsistent visual system
   ✴ Generally unmaintainable and expensive
   

   View Slide

9. 9
   A styleguide, in this context, is a developed, “living”
   UI library containing all recurring styles used across a
   project.
   Styleguide Driven Development is the practice of
   using the styleguide as the focal point for all front-end
   UI development tasks.
   What?
   

   View Slide

10. 10
    Why?
    Separate content from styling
    Meter Block (MailChimp) Section Block (Starbucks)
    

    View Slide

11. 11
    Why?
    Intent and usage are documented
    and clear for all to see
    Salesforce Twitter Bootstrap
    

    View Slide

12. 12
    Why?
    Unification and documentation
    of design variables
    Salesforce
    Colors, padding, margins, font styles, etc
    

    View Slide

13. 13
    Why?
    ✴ Quicker page build-out
    ✴ Quicker manual testing
    Yelp
    

    View Slide

14. 14
    Why?
    ✴ Agile-friendly
    ✴ Easier collaboration
    for teams
    

    View Slide

15. 15
    Why?
    It’s technically better!
    Less redundant CSS = Smaller file size
    

    View Slide

16. 16
    How?
    Take an inventory of design (so far)
    ✴ Colors?
    ✴ Header levels?
    ✴ Grid system?
    ✴ What modules should be created?
    ✴ How should things be named?
    

    View Slide

17. 17
    How?
    Define a structure and
    choose tools
    ✴ User a CSS preprocessor (Sass, Stylus, etc)
    ✴ Use partials, if available
    

    View Slide

18. 18
    How?
    Use documented code style
    ✴ Routinely maintained and
    version-controlled
    ✴ Include comments and todos
    

    View Slide

19. 19
    How?
    Style all base HTML elements
    Yelp
    html-ipsum.com
    ✴ h1, p, ul, ol, li, etc
    

    View Slide

20. 20
    How?
    Build custom modules
    ✴ Modules are the heart of the styleguide
    ✴ Use a system (BEM, SMACSS, OOCSS)
    ✴ Make modules small
    ✴ Make modules versatile
    

    View Slide

21. 21
    How?
    Module example: The Media Object
    http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
    

    View Slide

22. View Slide

23. 23
    How?
    Document module usage (use a Styleguide generator)
    Trulia’s Hologram
    

    View Slide

24. 24
    How?
    Finally, build some pages and add
    “glue”, if necessary
    

    View Slide

25. 25
    Before
    ✴ What markup and CSS do I need?
    After
    ✴ What modules is this page made of?
    ✴ Do I need to create any new ones?
    ✴ Future modules and pages start in styleguide
    The process
    

    View Slide

26. 26
    Examples
    ✴ Yelp - http://www.yelp.com/styleguide
    ✴ MailChimp - http://ux.mailchimp.com/patterns/
    ✴ Salesforce - http://sfdc-styleguide.herokuapp.com/
    ✴ Github - https://github.com/styleguide/css/1.0
    ✴ Bootstrap - http://getbootstrap.com/components/
    

    View Slide

27. 27
    Resources
    ✴ http://alistapart.com/article/creating-style-guides
    ✴ http://vinspee.me/style-guide-guide/
    ✴ http://webuild.envato.com/blog/styleguide-driven-development/
    ✴ http://vimeo.com/86928424
    

    View Slide

28. Thank you!
    @MATTFORDHAM / WWW.WINTR.US
    

    View Slide