Styleguide Driven Development

Slide 1

Slide 1 text

Styleguide Driven Development SEATTLE INTERACTIVE CONFERENCE / 2014

Slide 2

Slide 2 text

What? Why? How?

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

Slide 6

Slide 6 text

6 The traditional styleguide

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

8 The old way ✴ Duplication of code ✴ Inconsistent code style ✴ Poorly named classes ✴ Visual bugs, regressions ✴ Inconsistent visual system ✴ Generally unmaintainable and expensive

Slide 9

Slide 9 text

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?

Slide 10

Slide 10 text

10 Why? Separate content from styling Meter Block (MailChimp) Section Block (Starbucks)

Slide 11

Slide 11 text

11 Why? Intent and usage are documented and clear for all to see Salesforce Twitter Bootstrap

Slide 12

Slide 12 text

12 Why? Unification and documentation of design variables Salesforce Colors, padding, margins, font styles, etc

Slide 13

Slide 13 text

13 Why? ✴ Quicker page build-out ✴ Quicker manual testing Yelp

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

16 How? Take an inventory of design (so far) ✴ Colors? ✴ Header levels? ✴ Grid system? ✴ What modules should be created? ✴ How should things be named?

Slide 17

Slide 17 text

17 How? Define a structure and choose tools ✴ User a CSS preprocessor (Sass, Stylus, etc) ✴ Use partials, if available

Slide 18

Slide 18 text

18 How? Use documented code style ✴ Routinely maintained and version-controlled ✴ Include comments and todos

Slide 19

Slide 19 text

19 How? Style all base HTML elements Yelp html-ipsum.com ✴ h1, p, ul, ol, li, etc

Slide 20

Slide 20 text

20 How? Build custom modules ✴ Modules are the heart of the styleguide ✴ Use a system (BEM, SMACSS, OOCSS) ✴ Make modules small ✴ Make modules versatile

Slide 21

Slide 21 text

21 How? Module example: The Media Object http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Slide 22

Slide 22 text

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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/

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

Thank you! @MATTFORDHAM / WWW.WINTR.US