Style Guides, Pattern Libraries and Code Standards

After interviewing a dozen people with Brad Frost for their podcast on Style Guides for the web, Anna has collated all their findings for this talk on the different kinds that are out there, how they're built, what works (and what doesn't), and what makes them such a useful tool.

She'll give you a tour of some style guides built by companies with a range of different needs and requirements, and you'll learn how to build your own using a range of possible technologies.

Most importantly, she'll show you how to make sure they don't get forgotten at the end of the project, and ways that it can be kept up to date as living documentation well after a site has gone live.

Transcript

1. Style Guides, Pattern Libraries and Code Standards @anna_debenham Front-End Developer
2. @anna_debenham Front-End Developer Style Guides, Pattern Libraries and Code Standards
3. Susan Robertson on Editorially’s Style Guide “…all that historical mileage is documented so that everyone can see why they're doing it the way they're doing it and all the things they've thought about to get there.”
4. Types of Style Guide
5. Branding/Identity Guidelines Penguin Group
6. Print Guidelines NHS
7. http://simple.wikipedia.org/wiki/Defibrillator
9. Content/editorial guidelines Mailchimp
10. Coding Standards GitHub
11. Front-end style guides Yelp
12. One deliverable to rule them all
13. Exploration Build Design Interface Inventory Brad Frost’s “…a comprehensive collection of the bits and pieces that make up your interface.”
14. Brad Frost
15. Brad Frost • Global elements • Navigation • Image types • Icons • Forms • Buttons • Headings • Media Objects • Lists • Interactive Components • Media • 3rd Party Widgets • Advertising • Messaging • Colors • Animation
16. Exploration Build Design Style Tiles Samantha Warren’s “…a way to facilitate a conversation around options without necessarily designing a picture of what their website would look like.”
17. flickr.com/photos/woordenaar/14308809322
18. The Examiner
19. The Examiner
20. The Examiner
21. The Examiner
22. The Examiner
23. The Examiner
24. The Examiner
25. The Examiner, Samantha Warren
26. Exploration Build Design Element Collages Dan Mall’s “…a collage of elements that some of those pieces I think captured their brand really well… we were able to have a good conversation about things like that.”
27. Reading Is Fundamental
28. Dan Mall on Radio Free Europe “…they were really interested in how their site looked across different devices and different screen sizes and just different ways 
 to access it…”
29. Clearleft
30. Code for America (Clearleft)
31. Code for America (Clearleft)
32. Code for America (Clearleft)
33. Exploration Build Design Style Prototype Jeremy Loyd’s “…They can speed up site production, and they give a client an exciting early look at design elements.”
34. sparkbox.github.io/style-prototype
35. Jeremy Loyd on Style Prototypes “…we would typically try to create a Style Prototype when site planning is still in the works.”
36. Exploration Build Design CSS Guidelines Harry Roberts’s “…all developers should strive for a degree of standardisation in their code.”
37. cssguidelin.es
38. cssguidelin.es
39. cssguidelin.es Instruction
40. cssguidelin.es Instruction reason
41. cssguidelin.es Evidence Instruction reason
42. Exploration Build Design Pattern Primer Jeremy Keith’s “…This idea of a pattern library has definitely been, I'd say, the most important development when it comes to front end deliverables.”
43. Exploration Build Design Pattern Primer Jeremy Keith’s “…This idea of a pattern library has definitely been, I'd say, the most important development when it comes to front end deliverables.”
44. Front-end Style Guide Pattern Library/Primer Content/Editorial Guidelines Code Standards
45. Natalie Downe’s Pattern Portfolio
46. Natalie Downe’s Pattern Portfolio
47. Jeremy Keith’s Pattern Primer
48. Jeremy Keith on Clearleft’s Pattern Libraries “…We’ll also give you some pages, but these pages, they're not the deliverable; these pages are just examples of the pattern library in action.”
49. What they achieve
50. “…they publish 150 different sites over sixty countries… so a strong style guide… was going to be really crucial to them.” Tackling complexity Dan Mall on Radio Free Europe
51. Starbucks
52. “QA uses it a lot… the front-end developers and the engineering teams all refer to it on a regular basis so it's actually really kind of crucial to our entire workflow…” Quality Assurance Federico Holgado Mailchimp’s Style Guide
53. Mailchimp
54. Tota11y
55. Tota11y
56. “I think when you're iterating quickly on an application… you abandon a module for something totally different… so I was able to clean a lot of that up…” Reduced Redundancy Susan Robertson Built Editorially’s Style Guide
57. Chris Coyier’s CodePen
58. Chris Coyier’s CodePen “You think you just have a handful of button styles. Then you take an inventory.”
59. “There's not that extra step of getting approvals for a design comp and then having to come back and go, "Yeah, so I know we showed X in the design comp but it really came out kind of Y.” Realistic Representations Dave Olsen worked on Pattern Lab
60. “Marriott… is a huge organisation with tons of digital teams and they actually have a team of four or five people who are paid to maintain their standards…” Maintainability Susan Robertson Built Editorially’s Style Guide
61. Primer.io
62. “…some of these people have been jailed or have been hanged just for accessing their website. So we can't have a page loading in thirty seconds; that just can't fly.” Performance Budget Dan Mall on Radio Free Europe
63. Lonely Planet
64. “…in twenty minutes, we had built a system that was responsive; it looked great on mobile and it was nice to look at.” Tool for Rapid Prototyping Federico Holgado on Mailchimp’s Style Guide
65. china.org.cn/china/2015-03/17/content_35077927.htm
66. Dan Mall on Element Collages “Don't rely heavily on a deliverable to solve this for you: rely on your listening skills to solve it for you.”
67. Jina worked on Salesforce’s style guide “Putting it off to the end or treating it as a separate thing is just asking for it to just sort of die on the vine or just become outdated and obsolete.”
68. A List Apart
69. How to make one
70. Code for America
71. Code for America
72. Code for America
73. Code for America
74. Code for America
75. Code for America
76. Code for America
77. /styles accordion.scss header.scss buttons.scss … header.html buttons.html accordion.html /patterns … HTML SCSS SCSS SCSS SCSS HTML HTML HTML
78. main.css /styles … /patterns … CSS HTML SCSS SCSS SCSS SCSS HTML HTML HTML header.html buttons.html accordion.html accordion.scss header.scss buttons.scss
79. main.css /styles … /patterns … CSS HTML SCSS SCSS SCSS SCSS HTML HTML HTML header.html buttons.html accordion.html CSS styleguide.css + accordion.scss header.scss buttons.scss
80. /patterns … HTML HTML HTML HTML click me click me item 1 item 2 item 3 Header header.html buttons.html accordion.html click me click me click me click me
81. click me click me item 1 item 2 item 3 Header click me click me click me click me AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQ
82. click me click me Header click me click me click me click me AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQ <header>Header</header> <button class=“button--large”>Header</button> <button class=“button--medium”>Header</button> <button class=“button--small”>Header</button>
83. item 1 item 2 item 3 Header click me click me click me click me click me click me
84. style.maban.co.uk
85. patternlab.io
86. /* 
 
 Your standard form button.
 
 :hover - Highlights when hovering.
 :disabled - Dims the button when disabled.
 .primary - Indicates button is the primary action.
 .smaller - A smaller button
 
 Styleguide 1.1 
 
 */ button { … }
 button.primary,
 button.primary:hover { … }
 button.smaller { … }
 button:hover { … }
 button:disabled { … } KSS
87. Frontify
88. Typecast
89. What to include
90. Basic Elements Mapbox
91. Basic Elements Paul Lloyd’s Barebones
92. “…I fall into this trap all the time… I want to deliver everything.” Patterns Dan Mall worked on Radio Free Europe’s style guide
93. flickr.com/photos/75905404@N00/7126147125
94. Markup Salesforce
95. Markup Salesforce
96. Markup South Tees Hospital
97. Markup South Tees Hospital
98. Styles Salesforce
99. Styles Salesforce
100. Extremes Code for America
101. Extremes Code for America
102. Extremes Code for America
103. Notes Wellcome Trust Intranet
104. Notes Wellcome Trust Intranet
105. Notes Wellcome Trust Intranet
106. Notes Wellcome Trust Intranet
107. Notes Wellcome Trust Intranet
108. Colour Swatches Code for America
109. Colour Swatches Code for America
110. Grids Mailchimp
111. Grids Starbucks
112. Grids Starbucks
113. Grids Starbucks
114. Interaction Salesforce
115. Interaction Google’s Material Design
116. Localisation University of Surrey
117. Localisation University of Surrey
118. Localisation University of Surrey
119. Navigation Code for America
120. Navigation Code for America
121. Living style guides
122. Jina https://twitter.com/jina/status/638850299172667392 “Zombie style guides — style guides that aren't maintained and part of your process. 
 they die and rot. 
 they eat your brains.”
123. Rizzo, by Lonely Planet
124. Lonely Planet
125. Lonely Planet
126. Ian Feather on Lonely Planet’s Style Guide “I've made two style guides before this one at Lonely Planet, both of which went out of date very rapidly and were never used ever again. This one doesn't go out of date and it means we don't need to actually maintain it.”
127. Next steps
128. “…you guys are going to live with it for a month or two and then we're going to come back and we're going to assess what worked and what didn't and help you fix it.” Revisit Dan Mall worked on Radio Free Europe’s style guide
129. “…sharing was one part and the other part was we really just needed to keep ourselves honest…” Make it public Federico Holgado on Mailchimp’s Style Guide
130. “…when I saw it I thought it was beautiful and it's why I wanted to join this team.” Make it public Jina on Salesforce’s Style Guide
131. “…we have had people apply who've known about Rizzo, who've known about the style guide, and that's been a really nice thing…” Make it public Ian Feather on Lonely Planet’s Style Guide
132. “I think our standards for what a style guide needs to look like are based on all the ones that are public and all the ones that are public have designers behind them who wouldn't let them be public unless they were beautiful!” It doesn’t have to be pretty Susan Robertson built Editorially’s style guide
133. styleguides.io Thanks for listening! £2 podcast and transcripts e-book 300+ resources
134. styleguides.io Thanks for listening! £2 podcast and transcripts e-book 300+ resources