Front-End Style Guides

From the Tech For Good & Front-End Innovators meet-up at DoSomething.org on June 23rd 2014.

A number of websites such as GitHub, BBC and CodeForAmerica utilize live style guides to enforce visual consistency throughout their site and facilitate rapid building of user interfaces. You can think of a style guide as a living document of your front-end code and design decisions, outlining the elements and patterns used throughout your website.

Front-End focused Software Engineers David Furnes and Diego Lorenzo will talk through how we created our Style Guide and Pattern Library - http://neue.dosomething.org - and how we use it on a daily basis at DoSomething.org.

You can watch a video of this talk on YouTube at: https://www.youtube.com/watch?v=4hrQ7XVjsSQ

Transcript

1. @ LET’S DO SOMETHING ABOUT Front-End Style Guides
2. Who needs a style guide?
3. GitHub
4. BBC
5. Code for America
6. Yelp
7. Starbucks
8. Mozilla
9. You need a style guide too.
10. PART ONE Why a style guide? PART TWO Introducing Neue PART THREE How it’s made PART FOUR The Future
11. PART ONE Why a style guide?
12. Make development easier.
13. Make design easier.
14. Make talking about design easier.
15. Make your site faster.
16. Stop re-inventing the wheel.
17. Mocks suck.
18. PART TWO Introducing Neue
22. Fonts & Colors
23. Typography
24. Fluid Grid Layout
27. Re-usable Patterns
28. Form fields Intra-page links Headings Modals Form validation Status messages Call-to-action banners Layout containers Galleries Campaign tiles Page headers Text callouts Legal text Smooth-scrolling Image borders Tabbed navigation Site chrome
32. Form fields Image borders Tabbed navigation Intra-page links Headings Modals Form validation Status messages Call-to-action banners Layout containers Galleries Campaign tiles Page headers Site chrome Text callouts Legal text Smooth-scrolling
34. Form fields Intra-page links Headings Modals Form validation Status messages Call-to-action banners Layout containers Galleries Campaign tiles Page headers Text callouts Legal text Smooth-scrolling Image borders Tabbed navigation Site chrome
35. Form fields Intra-page links Headings Modals Form validation Status messages Call-to-action banners Layout containers Galleries Campaign tiles Page headers Text callouts Legal text Smooth-scrolling Image borders Tabbed navigation Site chrome
37. Form fields Intra-page links Headings Modals Form validation Status messages Call-to-action banners Layout containers Galleries Campaign tiles Page headers Text callouts Legal text Smooth-scrolling Image borders Tabbed navigation Site chrome
39. Animations
40. Measurements
41. PART THREE How it’s made
42. SCSS
43. KSS
44. // Button styles for both input and anchor buttons. // Suitable for all-purpose use. // // :hover - Subtle hover state (will not be // displayed on touch interfaces) // :focus - Focus state for users navigating // the page using tab keys. // :active - "Pushed" button state // .disabled - Disabled (non-interactive) button // state. Consider removing button // from interface if not necessary to // avoid confusion. // .loading - AJAX loading animation. Used when // loading results inline. ==Must be // used on `a` or `button`. Will not // work with `input` elements.==
45. // Button styles for both input and anchor buttons. // Suitable for all-purpose use. // // :hover - Subtle hover state (will not be // displayed on touch interfaces) // :focus - Focus state for users navigating // the page using tab keys. // :active - "Pushed" button state // .disabled - Disabled (non-interactive) button // state. Consider removing button // from interface if not necessary to // avoid confusion. // .loading - AJAX loading animation. Used when // loading results inline. ==Must be // used on `a` or `button`. Will not // work with `input` elements.==
46. // Status message styles. These should be used to provide // feedback to the user for events that occur outside the // normal application flow (such as form validation // errors). ==Close button is added using JavaScript. See // `system-messages.js`.== // // .error - Used to display errors. Be careful not to // blame the user for a mistake. // // Styleguide 4.1.8 - Status Banners ! .messages { position: relative; width: 100%; background: $purple; text-align: left;
47. // Status message styles. These should be used to provide // feedback to the user for events that occur outside the // normal application flow (such as form validation // errors). ==Close button is added using JavaScript. See // `system-messages.js`.== // // .error - Used to display errors. Be careful not to // blame the user for a mistake. // // Styleguide 4.1.8 - Status Banners ! .messages { position: relative; width: 100%; background: $purple; text-align: left;
48. // Status message styles. These should be used to provide // feedback to the user for events that occur outside the // normal application flow (such as form validation // errors). ==Close button is added using JavaScript. See // `system-messages.js`.== // // .error - Used to display errors. Be careful not to // blame the user for a mistake. // // Styleguide 4.1.8 - Status Banners ! .messages { position: relative; width: 100%; background: $purple; text-align: left;
50. Fluid, Semantic Grid Layout
51. Fluid, Semantic Grid Layout
52. Fluid, Semantic Grid Layout
53. Fluid, Semantic Grid Layout
54. http://neat.bourbon.io
57. .container { ! > .wrapper { padding: 1rem; position: relative; @include clearfix(); ! @include media($tablet) { ! } } ! }
58. .container { ! > .wrapper { padding: 1rem; position: relative; @include clearfix(); ! @include media($tablet) { @include span-columns(12); } } ! }
59. .container { ! > .wrapper { padding: 1rem; position: relative; @include clearfix(); ! @include media($tablet) { @include span-columns(12); @include shift(2); } } ! }
61. Pattern-ity test
70. Anatomy of a Pattern
71. A pattern is a set of rules.
72. Defines consistent markup.
73. Break components into reusable blocks.
74. Break components into reusable blocks.
75. Structuring your CSS
76. OOCS
77. OOCS, ACSS
78. OOCS, ACSS, SMACSS
79. OOCS, ACSS, SMACSS, BEM
80. .block { } .block__element { } .block--modifier { } // but shit gets cray: .block__element--modifier { } .block__element--modifier__element { }
81. <article class="tile tile--campaign"> <a class="wrapper" href="#"> <div class="tile--meta"> <h1 class="__title">Kittens</h1> <p class=“__tagline">They are sometimes cute.</p> </div> <img src="http://placekitten.com/g/600/600" /> </a> </article>
83. Sharing the style guide
85. Using the style guide
87. Semantic Versioning
88. dosomething/bower.json ! { “name: “dosomething”, “dependencies”: { “neue”: “DoSomething/neue#~4.0.0”, “jquery”: “1.8.3”, “html5shiv”: “~3.7.0”, “lodash”: “~2.4.1”, /* ... */ }, /* ... */ }
89. neue/bower.json ! { “name: “neue”, “version”: “4.0.10”, “main”: [ “dist/neue.css”, “dist/neue.min.js” ], "dependencies": { "jquery": ">=1.7.2" }, /* ... */ }
90. neue/bower.json ! { “name: “neue”, “version”: “4.0.10”, “main”: [ “dist/neue.css”, “dist/neue.min.js” ], "dependencies": { "jquery": ">=1.7.2" }, /* ... */ }
91. PART FOUR The Future
92. Keeping things in sync.
95. <article class="tile tile--campaign"> <a class="wrapper" href="#"> <div class="tile--meta"> <h1 class="__title">Kittens</h1> <p class=“__tagline">They are sometimes cute.</p> </div> <img src="http://placekitten.com/g/600/600" /> </a> </article>
96. ui_component("gallery/tile", { href: “#", img: “”, title: “Kittens”, tagline: “They are sometimes cute.” })
97. Web Components
98. HTMLElement <div> <a> <video> <input>
99. HTMLElement <div> <a> <video> <input>
100. <ds-tile> HTMLElement <div> <a> <video> <input>
101. <article class="tile tile--campaign"> <a class="wrapper" href="#"> <div class="tile--meta"> <h1 class="__title">Kittens</h1> <p class=“__tagline">They are sometimes cute.</p> </div> <img src="http://placekitten.com/g/600/600" /> </a> </article>
102. <ds-tile href=“#”> <h1>Kittens</h1> <p>They are sometimes cute.</p> <img src=“http://placekitten.com/g/600/600” </ds-tile> !
103. <template> <article class="tile tile--campaign"> <a class="wrapper" href="#"> <div class="tile--meta"> <content></content> </div> <content select=“img.thumbnail” /> </a> </article> </template>
107. KEEP THAT SHIT NICE AND DRY.
108. DON’T BUILD MORE THAN YOU HAVE TO.
109. BUILD THINGS TO HELP YOU BUILD THINGS.
110. QUESTIONS? David Furnes @dfurnes ! Diego Lorenzo @weerd