Front-end style guides, Fronteers @ WHITE

Transcript

1. FRONT-END STYLE GUIDES
   

   View Slide

2. STIJN JANSSEN
   

   View Slide

3. Front-end developer @ Inventis
   

   View Slide

4. Front-end developer @ Inventis
   

   View Slide

5. Front-end developer @ Inventis
   

   View Slide

6. View Slide

7. View Slide

8. View Slide

9. View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

13. View Slide

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

    View Slide

15. View Slide

16. FRONT-END STYLE GUIDE
    

    View Slide

17. FRONT-END STYLE GUIDE
    

    View Slide

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

    View Slide

19. FRONT-END STYLE GUIDE
    

    View Slide

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

    View Slide

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

    View Slide

22. FRONT-END STYLE GUIDE
    

    View Slide

23. Developer A
    Developer B
    Project X
    Project Y
    

    View Slide

24. Developer A
    Developer B
    Project X
    Project Y
    

    View Slide

25. View Slide

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

    View Slide

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

    View Slide

28. THE TEAM VERSION
    

    View Slide

29. View Slide

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

    View Slide

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

    View Slide

32. THE PROJECT VERSION
    

    View Slide

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

    View Slide

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

    View Slide

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?
    

    View Slide

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

    View Slide

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

    View Slide

38. TIPS & RESOURCES
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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)
    

    View Slide

42. THANKS!
    

    View Slide

43. QUESTIONS?
    

    View Slide

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

    View Slide