Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Generate a Living Style Guide from CSS - CSSDevConf 2016

23,934 views

Published on

Tips, tricks, and tools to generate a living style guide from comments in a CSS/Sass/Less/Stylus file. Sample working project at http://bluemallard.net

Published in: Internet
  • Login to see the comments

  • Be the first to like this

Generate a Living Style Guide from CSS - CSSDevConf 2016

  1. 1. Generate a Living Style Guide from CSS
  2. 2. Personal
  3. 3. Professional Full Stack Development Consultant @bookwyrm https://mattvanderpol.com
  4. 4. Stories
  5. 5. Robert N
  6. 6. Robert Y
  7. 7. Resonate?
  8. 8. Roadmap What Examples Generate Sustain
  9. 9. What is a Living Style Guide
  10. 10. Style
  11. 11. Guide
  12. 12. Living
  13. 13. Similar Concepts
  14. 14. Similar Concepts Pattern Library Design System
  15. 15. 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
  16. 16. 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/
  17. 17. Relation Design System Pattern Library Style Guide
  18. 18. Key Features and Benefits
  19. 19. Common Language
  20. 20. Composable
  21. 21. Versioned
  22. 22. Single Source of Truth
  23. 23. Examples of Living Style Guides
  24. 24. 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
  25. 25. Design Elements
  26. 26. Design Elements
  27. 27. Design Elements
  28. 28. Utilities
  29. 29. Performance Monitoring
  30. 30. “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/
  31. 31. Components
  32. 32. Versioned
  33. 33. Code Guidelines
  34. 34. CSS Dev Conf 2016 http://bluemallard.net
  35. 35. How to Generate a Living Style Guide
  36. 36. Starting a Living Style Guide
  37. 37. Starting a Living Style Guide
  38. 38. Starting a Living Style Guide
  39. 39. Setup
  40. 40. kss-node
  41. 41. Project Architecture
  42. 42. Two CSS Files
  43. 43. Styleguide Overview
  44. 44. Styleguide Overview
  45. 45. What to Document
  46. 46. Colors
  47. 47. Tokens/Variables
  48. 48. Tokens/Variables
  49. 49. Tokens/Variables
  50. 50. Tokens/Variables
  51. 51. Mixins/Functions
  52. 52. Base Elements/Classes
  53. 53. “Patterns”
  54. 54. “Patterns”
  55. 55. “Patterns”
  56. 56. “Patterns”
  57. 57. “Patterns”
  58. 58. Vendor Libraries
  59. 59. Pattern Status
  60. 60. Documenting Patterns
  61. 61. Anatomy of a Pattern
  62. 62. Name
  63. 63. Description
  64. 64. Markup
  65. 65. Status
  66. 66. “Relationship”
  67. 67. Pattern Markup
  68. 68. Inline
  69. 69. External
  70. 70. Partial with Args
  71. 71. Generation and Deployment
  72. 72. “Tricky Parts”
  73. 73. Colors
  74. 74. Defining Sections
  75. 75. In individual Files
  76. 76. _kss-headings.scss
  77. 77. Custom Styleguide Theme
  78. 78. How to keep a Living Style Guide Alive
  79. 79. Workflow
  80. 80. Primary Reference Doc
  81. 81. Cross Browser Testing
  82. 82. Visual Regression Testing
  83. 83. Make it Easy
  84. 84. Easy to Access
  85. 85. Easy to Update
  86. 86. Easy to Consume
  87. 87. Meta Documentation
  88. 88. Versioned Releases
  89. 89. Changelog
  90. 90. Release Promotion
  91. 91. In Closing

×