Style Guide Implementation at RJMetrics
0 likes347 views
The document discusses the essential qualities and benefits of a successful style guide for front-end development, highlighting its importance in maintaining coding standards and evolving alongside the project. It presents a case study on the style guide development at RJMetrics, including challenges faced and lessons learned. Additionally, it offers recommendations for implementation and presents various resources related to style guide best practices.
Style Guide Implementation at RJMetrics
- 1. Set It and Forget It Automating Your Front End Style Guide #styleguidesFTW
- 2. Jana Velíšková Front End Engineer @jveliskova www.rjmetrics.com | @rjmetrics #styleguidesFTW
- 3. Overview • Qualities of a successful style guide • Case study of style guide development at RJMetrics • Recommendations for implementation #styleguidesFTW
- 4. Qualities of a Good Style Guide • It follows coding standards • It lives and evolves • It is well documented with examples and use cases • It fits into an already established workflow #styleguidesFTW
- 5. Style Guide at RJMetrics #styleguidesFTW
- 6. Marketing Style Guide • Great beginning • Wasn’t living • Didn’t have coding standards #styleguidesFTW
- 8. Coding Standards • Many Contributors • Fosters semantic markup and styling • Stressed OOCSS • Set naming conventions • Move away from bootstrap • Established Code Review Standards #styleguidesFTW
- 9. “Hey, just in case you thought I was getting mad/ annoyed with this branch, I am. But not with you at all.” #styleguidesFTW - Anonymous Coworker
- 10. “Hey, just in case you thought I was getting mad/ annoyed with this branch, I am. But not with you at all.” #styleguidesFTW - Anonymous Coworker “I've been learning and re-learning a ton… I think our style guide work is going to take our product to the next level and I'm really excited about it.”
- 13. Large Files • ~1200 lines of code in styleguide.html • Colors • Break things down • Team effort #styleguidesFTW
- 16. Markdown
- 17. Too Much Extra Work #styleguidesFTW
- 20. Benefits of Well Crafted Style Guide • Improve visual consistency of elements • Prevent code duplication/bloat • Provide documentation • Keep maintenance time down • Keep style guide use up #styleguidesFTW
- 24. http://warpspire.com/kss/styleguides/ #styleguidesFTW Style Guides and Pattern Library Roundup Kneath Stylesheets (KSS) Styledown https://github.com/davidhund/styleguide-generators http://alistapart.com/blog/post/style-guide-generator-roundup/ https://github.com/styledown/styledown
- 26. http://maban.co.uk/projects/front-end-style-guides/ #styleguidesFTW A Pocket Guide: Front-End Style Guides
- 27. Anna Debenham #styleguidesFTW @anna_debenham Brad Frost @brad_frost Jina Bolton @jina Susan Robertson @susanjrobertson Awesome Style Guide Loving People