Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
FRONT-END STYLE GUIDES
STIJN JANSSEN
Front-end developer @ Inventis
Front-end developer @ Inventis
Front-end developer @ Inventis
A good developer should be lazy (and dumb).                                                    http://blogoscoped.com/arch...
DRY      http://en.wikipedia.org/wiki/Don%27t_repeat_yourself
http://www.flickr.com/photos/klmircea/3210506796/
LISTS• Tutorials• Code    snippets• Best   practices• Tips   from experts• Browserbugs
FRONT-END STYLE GUIDE
FRONT-END STYLE GUIDE
A GUIDE• Contains   useful information• Recurring   tasks• Manual, encyclopedia, price     guide, ...
FRONT-END STYLE GUIDE
To provide uniformity in style and formatting of a document                                                   website     ...
A STYLE GUIDE• Defines    how a guide should look• Takes   decisions for you• ISO, branding, ...
FRONT-END STYLE GUIDE
Developer A   Project XDeveloper B   Project Y
Developer A   Project XDeveloper B   Project Y
A FRONT-END STYLE GUIDE    aims to improve team collaboration
THE BENEFITS• Sharing   knowledge• Ideal   starting point for new co-workers• Great    reference for interns
THE TEAM VERSION
DECISIONS• Folder   structure, naming conventions, ...• Spaces   or tabs?• LESS   or SASS• BEM, SMACSS      or OOCSS?• Sho...
http://na.isobar.com/standards/
THE PROJECT VERSION
DESIGN• Fonts• Colors• Headings   (h1-6)• Content   (p, ol, ul, ...)• Buttons• Form    elements
http://www.pukkelpop.be/nl/styleguide/subpage
DECISIONS• Which    font should we use for headings?• Vertical   rhythm of 6px• Images     must have 12px margin around te...
http://www.starbucks.com/static/reference/styleguide/
MORE BENEFITS• Happy     designers (consistency)• Easy   to optimize elements• Perfect   starting point for a redesign on ...
TIPS & RESOURCES
TIPS• Don’t   reinvent the wheel (link to existing resources)• Start   early in the project• Everybody     should be invol...
RESOURCES• http://pea.rs/• http://www.alistapart.com/articles/building-twitter-bootstrap/• http://smacss.com/book/• http:/...
EXAMPLES•   Technisch    •   Isobar (http://na.isobar.com/standards/)•   Grafisch    •   Ubuntu (http://design.ubuntu.com/w...
THANKS!
QUESTIONS?
STIJN JANSSEN• @stijnj• me@stijnjanssen.be
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
Front-end style guides - fronteers @ WHITE (30/08/12)
Upcoming SlideShare
Loading in …5
×

Front-end style guides - fronteers @ WHITE (30/08/12)

1,734 views

Published on

Published in: Technology, Design
  • Be the first to comment

Front-end style guides - fronteers @ WHITE (30/08/12)

  1. 1. FRONT-END STYLE GUIDES
  2. 2. STIJN JANSSEN
  3. 3. Front-end developer @ Inventis
  4. 4. Front-end developer @ Inventis
  5. 5. Front-end developer @ Inventis
  6. 6. A good developer should be lazy (and dumb). http://blogoscoped.com/archive/2005-08-24-n14.html http://www.codinghorror.com/blog/2005/08/how-to-be-lazy-dumb-and-successful.html http://programmer.97things.oreilly.com/wiki/index.php/Be_Stupid_and_Lazy
  7. 7. DRY http://en.wikipedia.org/wiki/Don%27t_repeat_yourself
  8. 8. http://www.flickr.com/photos/klmircea/3210506796/
  9. 9. LISTS• Tutorials• Code snippets• Best practices• Tips from experts• Browserbugs
  10. 10. FRONT-END STYLE GUIDE
  11. 11. FRONT-END STYLE GUIDE
  12. 12. A GUIDE• Contains useful information• Recurring tasks• Manual, encyclopedia, price guide, ...
  13. 13. FRONT-END STYLE GUIDE
  14. 14. To provide uniformity in style and formatting of a document website http://en.wikipedia.org/wiki/Style_guide
  15. 15. A STYLE GUIDE• Defines how a guide should look• Takes decisions for you• ISO, branding, ...
  16. 16. FRONT-END STYLE GUIDE
  17. 17. Developer A Project XDeveloper B Project Y
  18. 18. Developer A Project XDeveloper B Project Y
  19. 19. A FRONT-END STYLE GUIDE aims to improve team collaboration
  20. 20. THE BENEFITS• Sharing knowledge• Ideal starting point for new co-workers• Great reference for interns
  21. 21. THE TEAM VERSION
  22. 22. DECISIONS• Folder structure, naming conventions, ...• Spaces or tabs?• LESS or SASS• BEM, SMACSS or OOCSS?• Should we pass JSLint?• H5BP or Bootstrap?
  23. 23. http://na.isobar.com/standards/
  24. 24. THE PROJECT VERSION
  25. 25. DESIGN• Fonts• Colors• Headings (h1-6)• Content (p, ol, ul, ...)• Buttons• Form elements
  26. 26. http://www.pukkelpop.be/nl/styleguide/subpage
  27. 27. DECISIONS• Which font should we use for headings?• Vertical rhythm of 6px• Images must have 12px margin around text• Should we use formal or informal language in content?
  28. 28. http://www.starbucks.com/static/reference/styleguide/
  29. 29. MORE BENEFITS• Happy designers (consistency)• Easy to optimize elements• Perfect starting point for a redesign on bigger projects• Testable!
  30. 30. TIPS & RESOURCES
  31. 31. TIPS• Don’t reinvent the wheel (link to existing resources)• Start early in the project• Everybody should be involved (client, desinger, ...)• Extend, never replace• Think abstract
  32. 32. RESOURCES• http://pea.rs/• http://www.alistapart.com/articles/building-twitter-bootstrap/• http://smacss.com/book/• http://24ways.org/2011/front-end-style-guides• https://gimmebar.com/loves/maban/collection/front-end- styleguides
  33. 33. EXAMPLES• Technisch • Isobar (http://na.isobar.com/standards/)• Grafisch • Ubuntu (http://design.ubuntu.com/web) • BBC (http://www.bbc.co.uk/gel)• Tekstueel • Wikipedia (http://en.wikipedia.org/wiki/Wikipedia:Manual_of_Style)
  34. 34. THANKS!
  35. 35. QUESTIONS?
  36. 36. STIJN JANSSEN• @stijnj• me@stijnjanssen.be

×