Building a Live Style Guide

The Rich Web Experience - December, 2014

Style guides have traditionally been static documents maintained by designers. These get out of date with reality pretty fast and out of sync with code even faster. Instead of storing everything in a static document, the live (or living) style guide is generated dynamically from the production CSS and HTML code. The system itself evolves as the code evolves. Live style guides can lead to more maintainable code, help to bridge the gap between designer and developer, and result in a more consistent design across the site.

In this session, we'll review existing tools to aid in building a live style guide, look at the best way to organize everything, and figure out how to get started building one for your site or application.

Transcript

1. BUILDING A LIVE STYLE GUIDE The'Rich'Web'Experience' December,'2014 Mark'Meeker' @meeker
2. Previously: Currently:
3. #FC6621 #1CBC20 #89EB51 #1F5DF2 #5ABCF3
4. Consistency is one of the most powerful usability principles: when things always behave the same, users don’t have to worry about what will happen. Jakob Nielson
6. A style guide is a set of standards for the writing and design of documents, either for general use or for a specific publication, organization or field. Wikipedia
7. The traditional styleguide http://brandcenterdl.adobe.com/Corpmktg/Brandmktg/Campaign_Assets/guidelines/corporate/corporate_brand_guidelines.pdf
8. Types of Style Guides • Brand Identity • Design Language • Voice and Tone • Writing • Patterns • Code http://bradfrost.com/blog/post/style-guides/
9. Brand Identity
10. Brand Identity
11. Design Language
12. Voice and Tone
13. Writing
14. Patterns
15. Code
16. Brand Identity Design Language Voice and Tone Writing Patterns Code
17. Challenges
18. Continually Updating Code
19. Continually Updating Design
20. While we’re doing this project, can we make a small change to the button? Sure, that’s easy! Everywhere? Umm...
21. Continually Updating Browsers
22. Mobile and Responsive
24. final_final_v2_style_guide.pdf updated_v4_revised_final.psd Difficulty Keeping Updated
25. Dev Problems… • One-off or duplicated code • Lack of reusable code • Lack of visibility • Inconsistencies across the site
27. Design Problems… • Don’t speak same language • Static files get out of sync • Lack of discoverability • No visibility into implementation • Inconsistencies across the site
28. All this re-creation and re-invention isn't just inefficient, it leaves the team open to problems. Because it's not the sexy part of their project, it's likely to get less attention, resulting in an unusable and frustrating experience. Jared Spool
29. Need to be able to constantly and consistently evolve the look and feel.
30. We will encourage you to develop the three great virtues of a programmer: laziness, impatience and hubris. Larry Wall
31. Goals • Designed for scale • Work in the browser • Use Version Control • Leverage existing tools (Sass/LESS/Grunt) • Agile Friendly
32. Examples
34. Bootstrap is a design system. @mdo
35. Lonelyplanet
36. Mailchimp
37. Mailchimp
38. Starbucks
39. Yelp
40. Salesforce
41. cms.gov
42. a list apart
43. Benefits
44. Available Everywhere
45. Shared Vocabulary
46. Test in the Browser
47. Focus on the Details
48. Reusable and Sharable
49. Benefits • Good Client deliverable • On-boarding new developers and designers • Discoverable • Fix once, fix everywhere
50. Tools
51. StyleTiles
54. KSS
55. /* A button suitable for giving stars to someone. :hover - Subtle hover highlight. .stars-given - A highlight indicating you've already given a star. .stars-given:hover - Subtle hover highlight on top of stars-given styling. .disabled - Dims the button to indicate it cannot be used. Styleguide 2.1.3. */ a.button.star{ ... } a.button.star.stars-given{ ... } a.button.star.disabled{ ... }
56. /* A button suitable for giving stars to someone. :hover - Subtle hover highlight. .stars-given - A highlight indicating you've already given a star. .stars-given:hover - Subtle hover highlight on top of stars-given styling. .disabled - Dims the button to indicate it cannot be used. Styleguide 2.1.3. */ a.button.star{ ... } a.button.star.stars-given{ ... } a.button.star.disabled{ ... }
57. /* A button suitable for giving stars to someone. :hover - Subtle hover highlight. .stars-given - A highlight indicating you've already given a star. .stars-given:hover - Subtle hover highlight on top of stars-given styling. .disabled - Dims the button to indicate it cannot be used. Styleguide 2.1.3. */ a.button.star{ ... } a.button.star.stars-given{ ... } a.button.star.disabled{ ... }
58. /* A button suitable for giving stars to someone. :hover - Subtle hover highlight. .stars-given - A highlight indicating you've already given a star. .stars-given:hover - Subtle hover highlight on top of stars-given styling. .disabled - Dims the button to indicate it cannot be used. Styleguide 2.1.3. */ a.button.star{ ... } a.button.star.stars-given{ ... } a.button.star.disabled{ ... }
60. google web starter kit
61. Pears
63. Style Docco
64. /* Provides extra visual weight and identifies the primary action in a set of buttons. <button class="btn primary">Primary</button> */ .btn.primary { background: steelblue; color: snow; border: 2px outset steelblue; }
65. /* Provides extra visual weight and identifies the primary action in a set of buttons. <button class="btn primary">Primary</button> */ .btn.primary { background: steelblue; color: snow; border: 2px outset steelblue; }
66. /* Provides extra visual weight and identifies the primary action in a set of buttons. <button class="btn primary">Primary</button> */ .btn.primary { background: steelblue; color: snow; border: 2px outset steelblue; }
68. Hologram
70. /*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
71. /*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
72. /*doc --- title: Buttons name: button category: Base CSS --- Button styles can be applied to any element. Typically you'll want to use either a `<button>` or an `<a>` element: ```html_example <button class="btn btnDefault">Click</button> <a class="btn btnPrimary" href="http://trulia.com">Trulia!</a> ``` */
74. Patternlab
75. Organization
76. Elements of a Style Guide • Pattern Name • Description • Example Display • Code (Pattern) • Code (Source)
77. Pattern Name • Agree on a shared vocabulary • Use name in CSS classes and filenames
78. Description • Know your audience • Quick-scan versus full explanation
79. Display Example • Use real content • Consider default state • Enable seeing RWD states • :hover and other interactions
80. Code (Pattern) • May need to hide by audience
81. Code (CSS) • Remember goal of communicating re-usable patterns
82. Impact on Code • Thoughtful defaults • Separates skin from structure • Single Responsibility Principle • BEM / SMACSS / OOCSS • SASS / LESS
83. Automatic Generation • Colors • Fonts • Images • Icons
84. Patterns
85. A pattern describes a problem that occurs over and over again in our environment, and then describes the core of the solution to that problem, in such a way that you can use this solution a million times over...
 Christopher Alexander
86. Grid Typography Lists Links Buttons Forms Tables Labels Images
87. Grid Typography Lists Links Buttons Forms Tables Labels Images Prices Products Maps Calendar Lightbox Notifications Navigation Icons
88. Page Layouts
89. Approach
90. Interface Audit • Walk your site/application • Screenshot ingredients of the interface • Look and capture distinct treatments • Categorize what you find • Present to your team
91. Steps • Define • Develop • Maintain • Communicate
92. Consider • Edge cases • Legacy vs. Aspirational • Be willing to say “no” or “not yet”
93. Also… • Treat it like Open Source • Study others. Don’t re-invent.
94. Recap
95. Recap • Problem to be solved • Benefits to code, process and UX • Examples of existing systems • Tools that might help • What should be included
96. Resources http://styleguides.io/
97. Websites are systems rather than pages and as soon as we stop perceiving them as that, the better. Anna Debenham
98. Thank you. The$Rich$Web$Experience$ December,(2014 Mark$Meeker$ @meeker