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
Personal
Professional
Full Stack
Development
Consultant
@bookwyrm
https://mattvanderpol.com
Stories
Robert N
Robert Y
Resonate?
Roadmap
What
Examples
Generate
Sustain
What is a
Living Style Guide
Style
Guide
Living
Similar Concepts
Similar Concepts
Pattern Library
Design System
Pattern Library
“A pattern library is a collection of front-end code
that creates a component part of the overall
design o...
Design System
“From typography, layouts and grids, colors,
icons, components and coding conventions, to
voice and tone, st...
Relation
Design System
Pattern Library
Style Guide
Key Features
and Benefits
Common Language
Composable
Versioned
Single Source of Truth
Examples of
Living Style Guides
Rizzo
“we [created a maintainable style guide] by making
the Style Guide an integral part of our development
workflow”
Ian...
Design Elements
Design Elements
Design Elements
Utilities
Performance Monitoring
“Primer is GitHub’s internal CSS framework. It
includes basic global styling for typography, small
components like buttons...
Components
Versioned
Code Guidelines
CSS Dev Conf 2016
http://bluemallard.net
How to Generate a
Living Style Guide
Starting a
Living Style Guide
Starting a
Living Style Guide
Starting a
Living Style Guide
Setup
kss-node
Project Architecture
Two CSS Files
Styleguide Overview
Styleguide Overview
What to Document
Colors
Tokens/Variables
Tokens/Variables
Tokens/Variables
Tokens/Variables
Mixins/Functions
Base Elements/Classes
“Patterns”
“Patterns”
“Patterns”
“Patterns”
“Patterns”
Vendor Libraries
Pattern Status
Documenting Patterns
Anatomy of a Pattern
Name
Description
Markup
Status
“Relationship”
Pattern Markup
Inline
External
Partial with Args
Generation and
Deployment
“Tricky Parts”
Colors
Defining Sections
In individual Files
_kss-headings.scss
Custom
Styleguide
Theme
How to keep a
Living Style Guide
Alive
Workflow
Primary
Reference Doc
Cross Browser
Testing
Visual Regression
Testing
Make it Easy
Easy to Access
Easy to Update
Easy to Consume
Meta Documentation
Versioned Releases
Changelog
Release Promotion
In Closing
Generate a Living Style Guide from CSS - CSSDevConf 2016
You’ve finished this document.
Download and read it offline.
Upcoming SlideShare
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
Next
Upcoming SlideShare
[HCI2010]UI패턴기반 UI설계/개발자동화사례발표
Next
Download to read offline and view in fullscreen.

Share

Generate a Living Style Guide from CSS - CSSDevConf 2016

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all
  • 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

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

Views

Total views

24,098

On Slideshare

0

From embeds

0

Number of embeds

22,735

Actions

Downloads

10

Shares

0

Comments

0

Likes

0

×