$30 off During Our Annual Pro Sale. View Details »

Front-end style guides, Fronteers @ WHITE

Front-end style guides, Fronteers @ WHITE

Stijn Janssen

August 30, 2012
Tweet

More Decks by Stijn Janssen

Other Decks in Technology

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
    [email protected]

    View Slide