Arunan Skanthan - Roll Your own Style Guide

1,977 views

Published on

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.

Published in: Technology
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,977
On SlideShare
0
From Embeds
0
Number of Embeds
11
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

Arunan Skanthan - Roll Your own Style Guide

  1. 1. Roll Your Own Style Guide
  2. 2. Why build a “living” styleguide?
  3. 3. When styles should must beresponsive why make our style guides static?
  4. 4. Can function as a simple test to see if anything is broken.
  5. 5. I DO NOT WANT TO USE VIEWSOURCE No need to use developer tools likefirebug (unless debugging), as reading well documented code is easier.
  6. 6. Spot broken styles and inconsistenciesin one convenient place, and avoid badcode.Eg:.red-text { color: blue;}
  7. 7. Help refactor and refine code i.e. find patternsThis will help you create your own rather than imitating others’
  8. 8. Do it your (team’s) way.
  9. 9. Be methodical and orderly in your workflow
  10. 10. Easier to maintain than print.For those who insist on a print-versionuse:print.csspage-break-beforepage-break-after
  11. 11. What is a style guide made of?
  12. 12. Branding• Copy Tone• Content Strategy• Typography• Logo• ColorsEg:• http://voiceandtone.com/• https://twitter.com/logo
  13. 13. UI Library• Buttons• Icons• Forms• Menus• JS Widgets• Eg: Twitter Bootstrap, Zurb Foundation, http://oli.jp/2011/style-guide/
  14. 14. Layout• Grids• Templates• Eg: <insert any of the 100s of CSS grid frameworks here>
  15. 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 teamEg:• http://csswizardry.com/2012/04/my-html-css-coding-style/• https://github.com/necolas/idiomatic-css
  16. 16. Best Example I Found? GitHub! http://github.com
  17. 17. Collect Style Patterns
  18. 18. Pears - Wordpresshttp://pea.rs Dan Cederholm
  19. 19. Pattern Primer – PHP/Ruby/NodeJS https://github.com/adactio/Pattern-Prime/ Jeremy Keith
  20. 20. Auto-generate Styleguides From CSS Comments
  21. 21. KSS (Knyle Style Sheets) - Ruby http://warpspire.com/kss/ Kyle Neath
  22. 22. KSS-Node - NodeJshttp://hughsk.github.com/kss-node/ Hugh Kennedy
  23. 23. StyleDocco - NodeJshttp://jacobrask.github.com/styledocco/ Jacob Rask
  24. 24. Kalei Style Guide - JavaScript http://kaleistyleguide.com/ Thomas Davis
  25. 25. People to Follow• Jina Bolton• Kyle Neath• Dan Cederholm• And many more (link to a list of sources will be tweeted)
  26. 26. Arunan Skanthan @askalothttp://askalot.org

×