$30 off During Our Annual Pro Sale. View Details »

Styleguide Driven Development

mattfordham
October 17, 2014
2.8k

Styleguide Driven Development

Presented at Seattle Interactive Conference 2014

mattfordham

October 17, 2014
Tweet

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. 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. 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