styleguide driven development

28
Styleguide Driven Development SEATTLE INTERACTIVE CONFERENCE / 2014

Upload: wintr

Post on 15-Aug-2015

95 views

Category:

Technology


6 download

TRANSCRIPT

Page 1: Styleguide Driven Development

Styleguide Driven Development

SEATTLE INTERACTIVE CONFERENCE / 2014

Page 2: Styleguide Driven Development

What? Why? How?

Page 3: Styleguide Driven Development

3

MATT FORDHAM PARTNER & TECHNICAL DIRECTORWWW.WINTR.US / @MATTFORDHAM

Page 4: Styleguide Driven Development
Page 5: Styleguide Driven Development

5

Page 6: Styleguide Driven Development

6

The traditional styleguide

Page 7: Styleguide Driven Development

7

“Mock-ups”, “Comps”, etc

Page 8: Styleguide Driven Development

8

The old way

✴ Duplication of code

✴ Inconsistent code style

✴ Poorly named classes

✴ Visual bugs, regressions

✴ Inconsistent visual system

✴ Generally unmaintainable and expensive

Page 9: Styleguide Driven Development

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?

Page 10: Styleguide Driven Development

10

Why?Separate content from styling

Meter Block (MailChimp) Section Block (Starbucks)

Page 11: Styleguide Driven Development

11

Why?Intent and usage are documented and clear for all to see

Salesforce Twitter Bootstrap

Page 12: Styleguide Driven Development

12

Why?Unification and documentation of design variables

Salesforce

Colors, padding, margins, font styles, etc

Page 13: Styleguide Driven Development

13

Why?✴ Quicker page build-out

✴ Quicker manual testing

Yelp

Page 14: Styleguide Driven Development

14

Why?✴ Agile-friendly

✴ Easier collaboration for teams

Page 15: Styleguide Driven Development

15

Why?It’s technically better!

Less redundant CSS = Smaller file size

Page 16: Styleguide Driven Development

16

How?Take an inventory of design (so far)

✴ Colors?

✴ Header levels?

✴ Grid system?

✴ What modules should be created?

✴ How should things be named?

Page 17: Styleguide Driven Development

17

How?Define a structure and choose tools

✴ User a CSS preprocessor (Sass, Stylus, etc)

✴ Use partials, if available

Page 18: Styleguide Driven Development

18

How?Use documented code style

✴ Routinely maintained and version-controlled

✴ Include comments and todos

Page 19: Styleguide Driven Development

19

How?Style all base HTML elements

Yelp

html-ipsum.com

✴ h1, p, ul, ol, li, etc

Page 20: Styleguide Driven Development

20

How?Build custom modules

✴ Modules are the heart of the styleguide

✴ Use a system (BEM, SMACSS, OOCSS)

✴ Make modules small

✴ Make modules versatile

Page 21: Styleguide Driven Development

21

How?Module example: The Media Object

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

Page 22: Styleguide Driven Development

22

Page 23: Styleguide Driven Development

23

How?Document module usage (use a Styleguide generator)

Trulia’s Hologram

Page 24: Styleguide Driven Development

24

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

Page 25: Styleguide Driven Development

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

Page 26: Styleguide Driven Development

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/

Page 27: Styleguide Driven Development

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

Page 28: Styleguide Driven Development

Thank you!@MATTFORDHAM / WWW.WINTR.US