Styleguide Driven Development

Presented at Seattle Interactive Conference 2014

Transcript

1. Styleguide Driven Development SEATTLE INTERACTIVE CONFERENCE / 2014
2. What? Why? How?
3. 3 MATT FORDHAM PARTNER & TECHNICAL DIRECTOR WWW.WINTR.US / @MATTFORDHAM
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