Who Knew Style Guides Even Had a Pulse

Dead style guides sucked. Living style guides do not suck.

A quick guide on how style guides have evolved, how to create living style guides, and the unexpected benefits of using one with a product/team.

Transcript

1. Who Knew Style Guides Even Had a Pulse? by @wanderingmatt
2. Me — Canadian — Design Lead at Onehub — Co-host of Chips & Bits — Can form a sentence with my name 2
3. Style guides suck.
7. Why style guides suck so bad? 7 — Printed — Quickly out-of-date — Di cult to maintain — Design centric
8. Github Style Guide 8
9. Styleguide is not a word.
10. Style guides sucked. DEAD
11. Living style guides do not suck.
12. The benefits I anticipated. — I could get hit by a bus — The team would have a resource — It would reduce duplicate code 12
13. :(
14. HOURS OF WORK PRODUCTS * DESIGNERS HOURS IN A DAY * BANDWIDTH
15. Living style guides change how you work. — You’re going to want Sass — You need to start thinking in a modular way — You must plan ahead — Team support helps 15
16. A wild Warren. 16
17. Tools for the job. — A design pattern — A Sass partial — Some CSS comments — Some example code 17
18. Adding a module to your style guide.
19. 1. Recognize a design pattern.
21. 2. Create a Sass partial for your module.
22. Sass partials could be their own talk. /stylesheets/modules/... 22
23. 23 .message { background-color: lighten($blue, 35%); border: 1px solid lighten($blue, 30%); @include clearfix; clear: both; color: $medium-grey; color: rgba(0, 0, 0, .6); padding: 15px 46px 15px 54px; position: relative; p { line-height: 1.5; margin: 0; } &.success { background-color: lighten($oh-green-alt, 45%); border-color: lighten($oh-green-alt, 35%); p a { color: darken($oh-green, 10%); } } &.error { background-color: lighten(desaturate($red, 25%), 65%); border-color: lighten(desaturate($red, 25%), 60%); p a { color: $red; } } &.inverted { background-color: $blue; border: 0; @include text-shadow(0 -1px rgba(0, 0, 0, .3)); p { color: #fff; a { color: rgba(255, 255, 255, .6); } } .dismiss { &:hover { @include opacity(1); } &:hover { @include opacity(.8); } } &.success { background-color: darken($oh-green-alt, 5%); } &.error { background-color: $red; } } }
24. 3. Document the module with KSS.
25. KSS A CSS documentation specification and style guide format, inspired by TomDoc. 25
26. 26 The KSS syntax. — Description — Modifiers — Reference
27. 27 // Messages used to communicate with users throughout the product. Messages can be dismissed by including an optional <a.dismiss>. Requires the Icons module for type and dismiss icons. // // .inverted - Inverted version of the default info message. // .success - Used for communications where we want to connotate a successful operation. // .success.inverted - Inverted version of the success message. // .error - Used for communications where we want to connotate a failed operation. // .error.inverted - Inverted version of the error message. // // Styleguide 5.1.
28. 28 // Messages used to communicate with users throughout the product. Messages can be dismissed by including an optional <a.dismiss>. Requires the Icons module for type and dismiss icons. // // .inverted - Inverted version of the default info message. // .success - Used for communications where we want to connotate a successful operation (e.g. Save completed, Workspace created, settings changed). // .success.inverted - Inverted version of the success message. // .error - Used for communications where we want to connotate a failed operation (e.g. Action could not complete, required field missing). // .error.inverted - Inverted version of the error message. // // Styleguide 5.1. .message { background-color: lighten($blue, 35%); border: 1px solid lighten($blue, 30%); @include clearfix; clear: both; color: $medium-grey; color: rgba(0, 0, 0, .6); padding: 15px 46px 15px 54px; position: relative; p { line-height: 1.5; margin: 0; } &.success { background-color: lighten($oh-green-alt, 45%); border-color: lighten($oh-green-alt, 35%); p a { color: darken($oh-green, 10%); } } ... } /stylesheets/modules/_messages.scss
29. 4. Create example markup.
30. 30 /styleguides/messages.html.erb <h1>Messages</h1> <%= kss_block '5.1' do %> <div class="$modifier_class message"> <span class="icon" aria-hidden=”true”></span> <p>This is a test of the emergency broadcast system. <a href="#">This is a link</a>.</p> <a href="#" class="dismiss icon icon-delete-mini">Dismiss</a> </div> <% end %>
31. Demo. 31
32. Tons of unexpected benefits. — Reminds you that you still suck at CSS — Forces you to write more modular CSS — Establishes naming conventions — Accelerates prototyping — Acts as a visual test 32
33. Thanks for listening! @wanderingmatt
34. Resources — Github Styleguide — A Little Structure For Your Large Sass Project — KSS — Modular CSS, an example — Scalable and Modular Architecture for CSS 34