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

Transcript

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
11. Links!
12. Links :(
13. 2012: starbucks.com goes responsive
14. Starbucks style guide
16. Typography Buttons Grid Layouts Navigation Media Forms Starbucks style guide
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!
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
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!