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
   

   View Slide

2. @anna_debenham
   Front-End Developer
   Style Guides,
   Pattern Libraries and
   Code Standards
   

   View Slide

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.”
   

   View Slide

4. Types of Style Guide
   

   View Slide

5. Branding/Identity Guidelines
   Penguin Group
   

   View Slide

6. Print Guidelines
   NHS
   

   View Slide

7. http://simple.wikipedia.org/wiki/Defibrillator
   

   View Slide

8. View Slide

9. Content/editorial guidelines
   Mailchimp
   

   View Slide

10. Coding Standards
    GitHub
    

    View Slide

11. Front-end style guides
    Yelp
    

    View Slide

12. One deliverable to
    rule them all
    

    View Slide

13. Exploration Build
    Design
    Interface Inventory
    Brad Frost’s
    “…a comprehensive collection of the bits and pieces that
    make up your interface.”
    

    View Slide

14. Brad Frost
    

    View Slide

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
    

    View Slide

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.”
    

    View Slide

17. flickr.com/photos/woordenaar/14308809322
    

    View Slide

18. The Examiner
    

    View Slide

19. The Examiner
    

    View Slide

20. The Examiner
    

    View Slide

21. The Examiner
    

    View Slide

22. The Examiner
    

    View Slide

23. The Examiner
    

    View Slide

24. The Examiner
    

    View Slide

25. The Examiner, Samantha Warren
    

    View Slide

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.”
    

    View Slide

27. Reading Is Fundamental
    

    View Slide

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…”
    

    View Slide

29. Clearleft
    

    View Slide

30. Code for America (Clearleft)
    

    View Slide

31. Code for America (Clearleft)
    

    View Slide

32. Code for America (Clearleft)
    

    View Slide

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.”
    

    View Slide

34. sparkbox.github.io/style-prototype
    

    View Slide

35. Jeremy Loyd
    on Style Prototypes
    “…we would typically try to create a Style
    Prototype when site planning is still in the
    works.”
    

    View Slide

36. Exploration Build
    Design
    CSS Guidelines
    Harry Roberts’s
    “…all developers should strive for a degree of
    standardisation in their code.”
    

    View Slide

37. cssguidelin.es
    

    View Slide

38. cssguidelin.es
    

    View Slide

39. cssguidelin.es
    Instruction
    

    View Slide

40. cssguidelin.es
    Instruction reason
    

    View Slide

41. cssguidelin.es
    Evidence
    Instruction reason
    

    View Slide

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.”
    

    View Slide

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.”
    

    View Slide

44. Front-end Style Guide
    Pattern Library/Primer
    Content/Editorial Guidelines Code Standards
    

    View Slide

45. Natalie Downe’s Pattern Portfolio
    

    View Slide

46. Natalie Downe’s Pattern Portfolio
    

    View Slide

47. Jeremy Keith’s Pattern Primer
    

    View Slide

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.”
    

    View Slide

49. What they achieve
    

    View Slide

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
    

    View Slide

51. Starbucks
    

    View Slide

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
    

    View Slide

53. Mailchimp
    

    View Slide

54. Tota11y
    

    View Slide

55. Tota11y
    

    View Slide

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
    

    View Slide

57. Chris Coyier’s CodePen
    

    View Slide

58. Chris Coyier’s CodePen
    “You think you just have a handful of button styles.
    Then you take an inventory.”
    

    View Slide

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
    

    View Slide

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
    

    View Slide

61. Primer.io
    

    View Slide

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
    

    View Slide

63. Lonely Planet
    

    View Slide

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
    

    View Slide

65. china.org.cn/china/2015-03/17/content_35077927.htm
    

    View Slide

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.”
    

    View Slide

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.”
    

    View Slide

68. A List Apart
    

    View Slide

69. How to make one
    

    View Slide

70. Code for America
    

    View Slide

71. Code for America
    

    View Slide

72. Code for America
    

    View Slide

73. Code for America
    

    View Slide

74. Code for America
    

    View Slide

75. Code for America
    

    View Slide

76. Code for America
    

    View Slide

77. /styles
    accordion.scss
    header.scss
    buttons.scss
    …
    header.html
    buttons.html
    accordion.html
    /patterns
    …
    HTML SCSS
    SCSS
    SCSS
    SCSS
    HTML
    HTML
    HTML
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

81. click me click me
    item 1
    item 2
    item 3
    Header
    click me click me
    click me click me
    AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQ
    

    View Slide

82. click me click me
    Header
    click me click me
    click me click me
    AaBbCcDdEeFfGgHhIiJjKkLlMmNnOoPpQ
    Header
    Header
    Header
    Header
    

    View Slide

83. item 1
    item 2
    item 3
    Header
    click me click me
    click me click me
    click me click me
    

    View Slide

84. style.maban.co.uk
    

    View Slide

85. patternlab.io
    

    View Slide

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
    

    View Slide

87. Frontify
    

    View Slide

88. Typecast
    

    View Slide

89. What to include
    

    View Slide

90. Basic Elements
    Mapbox
    

    View Slide

91. Basic Elements
    Paul Lloyd’s Barebones
    

    View Slide

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
    

    View Slide

93. flickr.com/photos/75905404@N00/7126147125
    

    View Slide

94. Markup
    Salesforce
    

    View Slide

95. Markup
    Salesforce
    

    View Slide

96. Markup
    South Tees Hospital
    

    View Slide

97. Markup
    South Tees Hospital
    

    View Slide

98. Styles
    Salesforce
    

    View Slide

99. Styles
    Salesforce
    

    View Slide

100. Extremes
     Code for America
     

     View Slide

101. Extremes
     Code for America
     

     View Slide

102. Extremes
     Code for America
     

     View Slide

103. Notes
     Wellcome Trust Intranet
     

     View Slide

104. Notes
     Wellcome Trust Intranet
     

     View Slide

105. Notes
     Wellcome Trust Intranet
     

     View Slide

106. Notes
     Wellcome Trust Intranet
     

     View Slide

107. Notes
     Wellcome Trust Intranet
     

     View Slide

108. Colour Swatches
     Code for America
     

     View Slide

109. Colour Swatches
     Code for America
     

     View Slide

110. Grids
     Mailchimp
     

     View Slide

111. Grids
     Starbucks
     

     View Slide

112. Grids
     Starbucks
     

     View Slide

113. Grids
     Starbucks
     

     View Slide

114. Interaction
     Salesforce
     

     View Slide

115. Interaction
     Google’s Material Design
     

     View Slide

116. Localisation
     University of Surrey
     

     View Slide

117. Localisation
     University of Surrey
     

     View Slide

118. Localisation
     University of Surrey
     

     View Slide

119. Navigation
     Code for America
     

     View Slide

120. Navigation
     Code for America
     

     View Slide

121. Living style guides
     

     View Slide

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.”
     

     View Slide

123. Rizzo, by Lonely Planet
     

     View Slide

124. Lonely Planet
     

     View Slide

125. Lonely Planet
     

     View Slide

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.”
     

     View Slide

127. Next steps
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

133. styleguides.io
     Thanks for listening!
     £2
     podcast and
     transcripts
     e-book
     300+ resources
     

     View Slide

134. styleguides.io
     Thanks for listening!
     £2
     podcast and
     transcripts
     e-book
     300+ resources
     

     View Slide