styleguide driven development
TRANSCRIPT
Styleguide Driven Development
SEATTLE INTERACTIVE CONFERENCE / 2014
What? Why? How?
3
MATT FORDHAM PARTNER & TECHNICAL DIRECTORWWW.WINTR.US / @MATTFORDHAM
5
6
The traditional styleguide
7
“Mock-ups”, “Comps”, etc
8
The old way
✴ Duplication of code
✴ Inconsistent code style
✴ Poorly named classes
✴ Visual bugs, regressions
✴ Inconsistent visual system
✴ Generally unmaintainable and expensive
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
Why?Separate content from styling
Meter Block (MailChimp) Section Block (Starbucks)
11
Why?Intent and usage are documented and clear for all to see
Salesforce Twitter Bootstrap
12
Why?Unification and documentation of design variables
Salesforce
Colors, padding, margins, font styles, etc
13
Why?✴ Quicker page build-out
✴ Quicker manual testing
Yelp
14
Why?✴ Agile-friendly
✴ Easier collaboration for teams
15
Why?It’s technically better!
Less redundant CSS = Smaller file size
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
How?Define a structure and choose tools
✴ User a CSS preprocessor (Sass, Stylus, etc)
✴ Use partials, if available
18
How?Use documented code style
✴ Routinely maintained and version-controlled
✴ Include comments and todos
19
How?Style all base HTML elements
Yelp
html-ipsum.com
✴ h1, p, ul, ol, li, etc
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
How?Module example: The Media Object
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
22
23
How?Document module usage (use a Styleguide generator)
Trulia’s Hologram
24
How?Finally, build some pages and add “glue”, if necessary
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
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
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
Thank you!@MATTFORDHAM / WWW.WINTR.US