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