The ABC of Coded Style Guides

on YouTube ↗37m

" summary

Argues that a living component directory (a coded style guide) increases reuse and stabilizes UI by shipping a concrete setup: Storybook hosted in-repo, automated snapshot tests wired into CI, design tokens and Sketch libraries synced with components. Shows developers adding isolated components, running tests that catch regressions, and exposing runnable examples in the browser so new contributors can play with and integrate components. Claims reduced friction for maintenance and clearer ownership across teams.

AI-written summary · about

" chapters (10)

1. 0:00Coded style guides intro
2. 4:50Style guides simplify integration
3. 8:25Centralizing branding
4. 12:30Testing components
5. 16:48Style guide benefits
6. 23:40Design tokens and colors
7. 25:46Component integration workflows
8. 28:47CI with style guides
9. 31:19Designer-dev collaboration
10. 34:19Q&A

" related talks

• 30mThe ABC of Coded Style GuidesHenning Muszynski · OdessaJS 2018
• 42mThe Dream of Styleguide Driven DevelopmentSara Vieira · React Alicante 2017
• 01h 05mStyleguide-Driven DevelopmentTatiana Kolesnikova, Arvid Torset · NDC London 2018
• 38mStyleguide-Driven DevelopmentTatiana Kolesnikova, Arvid Torset · DevDays Europe 2019
• 34mThe Dream of Styleguide Driven DevelopmentSara Vieira · JSHeroes 2018
• 24mFrom Sketch to Code Designing a Component KitSamantha Bretous · Chain React 2018
• 28mFrom Sketch to Code Designing a Component KitSamantha Bretous · React Boston 2018
• 30mLiving Style Guide Driven DevelopmentChris LoPresto · EmberConf 2016