styleguide driven development

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