Pro Yearly is on sale from $80 to $50! »

Styleguide Driven Development

Cd9764f01f1237c5843b36162104056a?s=47 mattfordham
October 17, 2014
2.5k

Styleguide Driven Development

Presented at Seattle Interactive Conference 2014

Cd9764f01f1237c5843b36162104056a?s=128

mattfordham

October 17, 2014
Tweet

Transcript

  1. Styleguide Driven Development SEATTLE INTERACTIVE CONFERENCE / 2014

  2. What? Why? How?

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

  4. None
  5. 5

  6. 6 The traditional styleguide

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

  8. 8 The old way ✴ Duplication of code ✴ Inconsistent

    code style ✴ Poorly named classes ✴ Visual bugs, regressions ✴ Inconsistent visual system ✴ Generally unmaintainable and expensive
  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?
  10. 10 Why? Separate content from styling Meter Block (MailChimp) Section

    Block (Starbucks)
  11. 11 Why? Intent and usage are documented and clear for

    all to see Salesforce Twitter Bootstrap
  12. 12 Why? Unification and documentation of design variables Salesforce Colors,

    padding, margins, font styles, etc
  13. 13 Why? ✴ Quicker page build-out ✴ Quicker manual testing

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

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

    file size
  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?
  17. 17 How? Define a structure and choose tools ✴ User

    a CSS preprocessor (Sass, Stylus, etc) ✴ Use partials, if available
  18. 18 How? Use documented code style ✴ Routinely maintained and

    version-controlled ✴ Include comments and todos
  19. 19 How? Style all base HTML elements Yelp html-ipsum.com ✴

    h1, p, ul, ol, li, etc
  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
  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/

  22. 22

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

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

    necessary
  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
  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/
  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

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