Styleguide Driven Development

Transcript

1. Styleguide Driven Development SEATTLE INTERACTIVE CONFERENCE / 2014

2. What? Why? How?

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

4. None

5. 5

6. 6 The traditional styleguide

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

8. 8 The old way ✴ 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 The process

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