Arunan will rant be talking about his experiences of working with existing and legacy projects, that have poor or no documentation; why style patterns help you learn, do less tedious work, and make you a “rock– star” in the eyes of future developers of what you are working on now; and how to make your own style-guide framework.

1. Roll Your Own
Style Guide

2. Why build a “living” styleguide?

3. When styles should must be
responsive why make our style
guides static?

4. Can function as a simple test to see if
anything is broken.

5. I DO NOT WANT TO USE VIEWSOURCE
No need to use developer tools like
firebug (unless debugging), as reading
well documented code is easier.

6. Spot broken styles and inconsistencies
in one convenient place, and avoid bad
code.
Eg:
.red-text {
color: blue;
}

7. Help refactor and refine code
i.e. find patterns
This will help you create your own
rather than imitating others’

8. Do it your (team’s) way.

9. Be methodical and orderly in your
workflow

10. Easier to maintain than print.
For those who insist on a print-version
use:
print.css
page-break-before
page-break-after

11. What is a style guide made of?

12. Branding
• Copy Tone
• Content Strategy
• Typography
• Logo
• Colors
Eg:
• http://voiceandtone.com/
• https://twitter.com/logo

13. UI Library
• Buttons
• Icons
• Forms
• Menus
• JS Widgets
• Eg: Twitter Bootstrap, Zurb Foundation,
http://oli.jp/2011/style-guide/

14. Layout
• Grids
• Templates
• Eg: <insert any of the 100s of CSS grid
frameworks here>

15. Developer Documentation
• Define coding conventions for front-end
• Additional info on why some non-standard ways of
implementation was required
• Coding rules for the team
Eg:
• http://csswizardry.com/2012/04/my-html-css-coding-style/
• https://github.com/necolas/idiomatic-css

16. Best Example I Found? GitHub!
http://github.com

17. Collect Style Patterns

18. Pears - Wordpress
http://pea.rs Dan Cederholm

19. Pattern Primer – PHP/Ruby/NodeJS
https://github.com/adactio/Pattern-Prime/ Jeremy Keith

20. Auto-generate Styleguides
From CSS Comments

21. KSS (Knyle Style Sheets) - Ruby
http://warpspire.com/kss/ Kyle Neath

23. KSS-Node - NodeJs
http://hughsk.github.com/kss-node/ Hugh Kennedy

24. StyleDocco - NodeJs
http://jacobrask.github.com/styledocco/ Jacob Rask

25. Kalei Style Guide - JavaScript
http://kaleistyleguide.com/ Thomas Davis

26. People to Follow
• Jina Bolton
• Kyle Neath
• Dan Cederholm
• And many more (link to a list of sources will be
tweeted)

27. Arunan Skanthan
@askalot
http://askalot.org