Presented at Seattle Interactive Conference 2014

1. StyleguideDriven
Development
SEATTLE INTERACTIVE CONFERENCE / 2014

2. What?
Why?
How?

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

5. 5

6. 6
Thetraditionalstyleguide

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

8. 8
Theoldway
✴ 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
Theprocess

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. Thankyou!
@MATTFORDHAM / WWW.WINTR.US