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

Style Guides, Pattern Libraries and Code Standards

4a2968e45944bd53db8026919975422e?s=47 Anna Debenham
September 20, 2015

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.

4a2968e45944bd53db8026919975422e?s=128

Anna Debenham

September 20, 2015
Tweet

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

  8. None
  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