Front-end style guides, Fronteers @ WHITE

Transcript

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 Developer B Project X Project Y
24. Developer A Developer B Project X 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