Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Choosing the right frontend style guide workflow

744d460fbc6fd58509aaf8ba0719d192?s=47 Aaron Stanush
February 11, 2015

Choosing the right frontend style guide workflow

This talk explains the benefits of creating a living style guide for your web project, as well as provides three approaches for building and maintaining it.

Watch the video: http://4ktch.in/latin2015-style-guides

Presented at DrupalCon Latin America 2015


Aaron Stanush

February 11, 2015

More Decks by Aaron Stanush

Other Decks in Technology


  1. February 11, 2015 Choosing the right frontend style guide workflow

    for your project DrupalCon Latin America 2015
  2. Listen to this talk: 4ktch.in/latin2015-style-guides Presented at

  3. Aaron Stanush Creative Director and Partner @aaronstanush aaron@fourkitchens.com

  4. Traditional style guides

  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. Links!

  12. Links :(

  13. 2012: starbucks.com goes responsive

  14. Starbucks style guide

  15. None
  16. Typography Buttons Grid Layouts Navigation Media Forms Starbucks style guide

  17. None
  18. You want a living style guide

  19. Why create a living style guide?

  20. Traditional style guides • PDF :( • Latest version? •

    Hard to distribute • Hard to edit / keep up to date • Impossible to document web interactivity
  21. Advantages to creating a living style guide

  22. Improves team-wide communication

  23. bradfrost.com/blog/post/interface-inventory Provides design consistency

  24. Patterns + Reusability = Faster build times

  25. Living style guides • Improve cross-team communication • Provide design

    consistency • Avoid CSS bloat, encourages reusability • Faster build times • Made with actual HTML/CSS + Interactivity • Available online, editable • Version control
  26. What’s in a style guide?

  27. Branding

  28. Writing

  29. Design Language

  30. Coding standards

  31. Component / Pattern / UI library

  32. Choose your own adventure

  33. Start with the basics • Branding assets • Color palette

    • Typography • Grid • UI components / Patterns • Page layouts
  34. “… it’s a one-stop place for the entire team—from product

    owners and producers to designers and developers—to reference when discussing site changes and iterations.” — Susan Robertson alistapart.com/article/creating-style-guides
  35. Approaches

  36. Style guides approaches Manual Generated Hybrid

  37. Production Visual Design Prototypes Manual style guide Style Guide Custom

    build or framework Design / Build
  38. wp.style.fourkitchens.com World Pulse style guide worldpulse.com

  39. texasexes.style.fourkitchens.com Texas Exes style guide github.com/fourkitchens/texasexes-style-guide

  40. Code for America, pattern library as a deliverable style.codeforamerica.org

  41. Manual style guide tools • Static site generators • Jekyll

    - jekyllrb.com • Middleman - middlemanapp.com • Style guide frameworks • styleguides.io/tools.html
  42. Keeping your style guide in sync • Keep Sass/asset directories

    identical to production • Git subtree merging • Bower • github.com/north/generator-Style-Prototype#via-bower • Advanced: Make your style guide a services that your websites and apps can use
  43. When to use the manual approach • Doing design upfront

    is part of your process • Need to start design before you know everything you’re building • Development resources aren’t available • Design is the deliverable
  44. Generated style guide Production Visual Design Prototypes Design / Build

    CSS + documentation syntax Generator magic! Style Guide
  45. What’s a generator? 1. Write your Sass 2. Add documentation

    as comments 3. Run the generator app in the command line 4. You’ve got a style guide! Let’s do an example with kss-node!
  46. None
  47. main title Description Chapter # section title markup Classes, states

    Subchapter # Styles
  48. github.com/kss-node/kss-node $ kss-node 1. Parses your stylesheets 2. Outputs static

    HTML files in /styleguide
  49. None
  50. KSS-node + Drupal amsterdam2014.drupal.org/session/styleguide-driven-development-new-web-development

  51. vinspee.me/style-guide-guide Lots of generators to choose from alistapart.com/blog/post/style-guide-generator-roundup

  52. When to use the Generator approach • The project doesn’t

    afford a lot of time for upfront design • You want to design against the production environment/CMS • You’re only doing the implementation • You don’t want to maintain a separate/custom system for the style guide
  53. CSS / JS Development/ Production Style Guide Hybrid style guide

    Component markup / HTML
  54. cognition.happycog.com/article/the-scoop-on-our-benjerry.com-style-guide Ben & Jerry’s style guide

  55. When to use the Hybrid approach • You don’t necessarily

    want the documentation inside the Sass/CSS itself • You need more flexibility in your environments • You need more flexibility in how designers and developers work together
  56. …and if you want to take your style guide to

    the next level
  57. medium.com/salesforce-ux/living-design-system-3ab1f2280ef7 sfdc-styleguide.herokuapp.com ianfeather.co.uk/a-maintainable-style-guide rizzo.lonelyplanet.com/styleguide

  58. What if I want to add a style guide for

    my existing site?
  59. Creating style guides for existing sites • Hybrid (easier): Create

    a style guide with your site’s components and link it to your production CSS • Generated (harder): Choose a generator, then go through your production Sass and add the appropriate structured documentation syntax more time consuming, but more sustainable
  60. Best practices

  61. Best practices • Put it online and easy to find

    • Make it for everyone • Make it part of your workflow • Keep things general, aim for reuse • Make maintenance easy (Keep it up to date!) More: bradfrost.com/blog/post/style-guide-best-practices
  62. Resources

  63. Articles Books Podcasts Talks Tools Examples styleguides.io

  64. github.com/maban/styleguides

  65. Style Guide Podcast styleguides.io/podcast/index.html

  66. atomicdesign.bradfrost.com

  67. 4ktch.in/ams-style-guides

  68. Thank you!