Generate a Living Style Guide from CSS - CSSDevConf 2016
0 likes24,139 views
The document outlines the creation and benefits of a living style guide, emphasizing its role in front-end development through the use of design systems and pattern libraries. It provides insights into essential components like documentation, version control, and performance monitoring, along with examples and workflows for maintaining the style guide. The guide serves as a comprehensive resource for developers to ensure consistency and efficiency in their projects.
![Rizzo
“we [created a maintainable style guide] by making
the Style Guide an integral part of our development
workflow”
Ian Feather - http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html](https://image.slidesharecdn.com/generate-a-living-styleguide-from-css-slidescssdevconf-2016-161025214642/85/Generate-a-Living-Style-Guide-from-CSS-CSSDevConf-2016-25-320.jpg)
Generate a Living Style Guide from CSS - CSSDevConf 2016
- 1. Generate a Living Style Guide from CSS
- 2. Personal
- 4. Stories
- 5. Robert N
- 7. Robert Y
- 8. Resonate?
- 10. What is a Living Style Guide
- 11. Style
- 12. Guide
- 13. Living
- 14. Similar Concepts
- 15. Similar Concepts Pattern Library Design System
- 16. Pattern Library “A pattern library is a collection of front-end code that creates a component part of the overall design of the page. It is ‘the what’ of the website. If you need to use a carousel this is ‘what’ code you would use.” Stuart Robson - http://www.alwaystwisted.com/articles/styleguides-pattern-libraries-and-design-languages
- 17. Design System “From typography, layouts and grids, colors, icons, components and coding conventions, to voice and tone, style-guide and documentation, a design system is bringing all of these together in a way that allows your entire team to learn, build, and grow.” Ara Abcarians - https://css-tricks.com/design-systems-building-future/
- 20. Common Language
- 21. Composable
- 22. Versioned
- 23. Single Source of Truth
- 24. Examples of Living Style Guides
- 25. Rizzo “we [created a maintainable style guide] by making the Style Guide an integral part of our development workflow” Ian Feather - http://engineering.lonelyplanet.com/2014/05/18/a-maintainable-styleguide.html
- 26. Design Elements
- 27. Design Elements
- 28. Design Elements
- 29. Utilities
- 31. “Primer is GitHub’s internal CSS framework. It includes basic global styling for typography, small components like buttons and tabs, and our general guidelines for writing HTML and CSS. It’s been used internally at GitHub for years now.” http://primercss.io/about/
- 32. Components
- 33. Versioned
- 34. Code Guidelines
- 35. CSS Dev Conf 2016 http://bluemallard.net
- 36. How to Generate a Living Style Guide
- 37. Starting a Living Style Guide
- 38. Starting a Living Style Guide
- 39. Starting a Living Style Guide
- 40. Setup
- 41. kss-node
- 43. Two CSS Files
- 46. What to Document
- 47. Colors
- 48. Tokens/Variables
- 49. Tokens/Variables
- 50. Tokens/Variables
- 51. Tokens/Variables
- 52. Mixins/Functions
- 54. “Patterns”
- 55. “Patterns”
- 56. “Patterns”
- 57. “Patterns”
- 58. “Patterns”
- 59. Vendor Libraries
- 60. Pattern Status
- 62. Anatomy of a Pattern
- 63. Name
- 64. Description
- 65. Markup
- 66. Status
- 67. “Relationship”
- 68. Pattern Markup
- 69. Inline
- 70. External
- 73. “Tricky Parts”
- 74. Colors
- 79. How to keep a Living Style Guide Alive
- 80. Workflow
- 84. Make it Easy
- 85. Easy to Access
- 86. Easy to Update
- 87. Easy to Consume
- 90. Changelog
- 92. In Closing