A practical guide to style guide driven development
summary
Claims that style guide driven development makes designer and front-end work a single source of truth by building synchronized design and code libraries, showing implementation details like an Angular component pattern, Sketch/Adobe-to-code sync, a folder structure with atoms/molecules/bundles, design tokens (colors, typography using a golden ratio) and a live preview site. Cites concrete audits: GitHub once had ~2,500 unique hex codes, Lego-like audit drops 212 parts to 123. Shows incremental build of components into a living front-end style guide that reduces inconsistencies and speeds delivery.
AI-written summary · about
chapters (11)
- 0:00A practical guide to style guide driven development
- 7:15Styleguide driven development
- 9:25Styleguide-driven development is creating interface as a system of reusable components.
- 10:50Interface elements are individual pieces of functionality that enable a user to accomplish individual tasks.
- 11:04Reusable elements of a design system are interface elements that enable a user to accomplish repeatable tasks.
- 12:31Atomic elements are the smallest standalone reusable pieces of the interface that enable the user to accomplish smallest standalone tasks.
- 26:44Transfer styles to code
- 32:49Advantages of SDD
- 34:58Atomic elements: don't wait for visual style
- 35:31Molecular elements: start with the flows
- 38:13Build value early
related talks
01h 05mStyleguide-Driven Development
28mThe Night of the Living Style Guides
38mStyleguide-Driven Development
45mYour Styleguide is an API
29mStyleguides are dead! Long live Styleguide-Flows!
49mLiving Styleguide in your Drupal projects: Benefit from component driven design.
35m"The Step After Styleguides"
49mA Better Design-Dev Handoff Experience: Code-based Design System