Style Guide Driven Development
summary
Claim: building a live component style guide speeds delivery and tames legacy CSS. Execution: adopt Bootstrap 3 and Hologram, author components first, feature-flag the rollout. Concrete results: layouts drop from 7 to 2, image requests from 21 to 2 and image bytes from 82 KB to 21.9 KB, CSS from 314 KB to 128 KB (compressed 44 KB to 22 KB), unused CSS falls ~90% to ~69%. Outcome: smaller, testable stories, higher velocity, reusable components that actually ship.
AI-written summary · about
chapters (15)
- 0:00Intro
- 1:13WE'LL TALK ABOUT A FEW THINGS...
- 10:18RESULTS! (WITH NUMBERS)
- 15:21MARKDOWN IN THE SCSS
- 15:52SUB-COMPONENTS
- 16:11GENERATED STYLE GUIDE
- 23:33WHAT DON'T WE KNOW?
- 25:15SEPARATE STRUCTURE FROM CHROME
- 25:36A FEW LINES OF HTML...
- 25:474 LINES OF CSS...
- 27:57WHAT MAKES A GOOD COMPONENT?
- 28:58THE TILE PANEL (BOX)
- 34:45WHEN CONVERTING A PAGE...
- 35:40DESIGN & DEV PAIRING
- 36:53RESULTS! (MUSHIER)
