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

1. Generate a
Living Style Guide
from CSS

2. Personal

3. Professional
Full Stack
Development
Consultant
@bookwyrm
https://mattvanderpol.com

4. Stories

5. Robert N

7. Robert Y

8. Resonate?

9. Roadmap
What
Examples
Generate
Sustain

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/

18. Relation
Design System
Pattern Library
Style Guide

19. Key Features
and Benefits

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

30. Performance Monitoring

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

42. Project Architecture

43. Two CSS Files

44. Styleguide Overview

45. Styleguide Overview

46. What to Document

47. Colors

48. Tokens/Variables

49. Tokens/Variables

50. Tokens/Variables

51. Tokens/Variables

52. Mixins/Functions

53. Base Elements/Classes

54. “Patterns”

55. “Patterns”

56. “Patterns”

57. “Patterns”

58. “Patterns”

59. Vendor Libraries

60. Pattern Status

61. Documenting Patterns

62. Anatomy of a Pattern

63. Name

64. Description

65. Markup

66. Status

67. “Relationship”

68. Pattern Markup

69. Inline

70. External

71. Partial with Args

72. Generation and
Deployment

73. “Tricky Parts”

74. Colors

75. Defining Sections

76. In individual Files

77. _kss-headings.scss

78. Custom
Styleguide
Theme

79. How to keep a
Living Style Guide
Alive

80. Workflow

81. Primary
Reference Doc

82. Cross Browser
Testing

83. Visual Regression
Testing

84. Make it Easy

85. Easy to Access

86. Easy to Update

87. Easy to Consume

88. Meta Documentation

89. Versioned Releases

90. Changelog

91. Release Promotion

92. In Closing