This document discusses front-end style guides and their benefits. A style guide aims to improve team collaboration by defining a uniform style and formatting for websites and projects. It takes decisions like code formatting, naming conventions, and design elements out of the hands of developers. This ensures consistency and makes a project's starting point very clear. Style guides can also be a useful reference for new team members or interns. The document provides examples of style guides and tips for creating an effective guide.

1. FRONT-END STYLE GUIDES

2. STIJN JANSSEN

3. Front-end developer @ Inventis

4. Front-end developer @ Inventis

5. Front-end developer @ Inventis

10. 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

11. DRY
http://en.wikipedia.org/wiki/Don%27t_repeat_yourself

12. http://www.flickr.com/photos/klmircea/3210506796/

14. LISTS
• Tutorials
• Code snippets
• Best practices
• Tips from experts
• Browserbugs

16. FRONT-END STYLE GUIDE

17. FRONT-END STYLE GUIDE

18. A GUIDE
• Contains useful information
• Recurring tasks
• Manual, encyclopedia, price guide, ...

19. FRONT-END STYLE GUIDE

20. To provide uniformity in style and formatting of a document
website
http://en.wikipedia.org/wiki/Style_guide

21. A STYLE GUIDE
• Defines how a guide should look
• Takes decisions for you
• ISO, branding, ...

22. FRONT-END STYLE GUIDE

23. Developer A Project X
Developer B Project Y

24. Developer A Project X
Developer B Project Y

26. A FRONT-END STYLE GUIDE
aims to improve team collaboration

27. THE BENEFITS
• Sharing knowledge
• Ideal starting point for new co-workers
• Great reference for interns

28. THE TEAM VERSION

30. DECISIONS
• Folder structure, naming conventions, ...
• Spaces or tabs?
• LESS or SASS
• BEM, SMACSS or OOCSS?
• Should we pass JSLint?
• H5BP or Bootstrap?

31. http://na.isobar.com/standards/

32. THE PROJECT VERSION

33. DESIGN
• Fonts
• Colors
• Headings (h1-6)
• Content (p, ol, ul, ...)
• Buttons
• Form elements

34. http://www.pukkelpop.be/nl/styleguide/subpage

35. 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?

36. http://www.starbucks.com/static/reference/styleguide/

37. MORE BENEFITS
• Happy designers (consistency)
• Easy to optimize elements
• Perfect starting point for a redesign on bigger projects
• Testable!

38. TIPS & RESOURCES

39. 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

40. 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

41. 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)

42. THANKS!

43. QUESTIONS?

44. STIJN JANSSEN
• @stijnj
• me@stijnjanssen.be