Code Patterns for Pattern Making
summary
Code patterns turn design rules into reusable code: this work uses Sass maps and a define-now-calculate-later trick to keep colors and typographic scales grouped, exports JSON for a style-guide generator, and exposes sizes/colors for looping and documentation. Templates become Ginger/Nunjucks macros for icons and notifications instead of copy‑pasted markup. A small consulting team (seven people) builds an alpha tool called Herman that auto-generates palettes, icon lists and examples from living code; tests and linting validate toolkit logic.
AI-written summary · about
chapters (26)
- 0:00Intro
- 0:33Everyone Loves Style Guides
- 1:03Graphics Standards Manual 1970
- 1:50Context Matters One Size Fits No One
- 3:06Systems for System-Building
- 4:36Tiny Bootstraps, for Every Client
- 5:02Pattern API
- 6:00Don't Stretch For Patterns
- 6:10Do Build One-Offs
- 8:00CSS Was Designed For Patterns
- 8:28Specificity is Your Guide
- 9:24Naming Conventions
- 9:52Pattern Layers
- 11:21Separation of Concerns
- 11:56Abstract Patterns (in code)
- 16:26Make Patterns The Lazy Option
- 20:12Toolkits Are A Byproduct
- 20:25Toolkits Provide Trade Offs
- 20:59Tools Should Fit You
- 21:12Test Your Logic
- 21:46Lint Your Code
- 22:44Concrete Patterns
- 24:19Template Language Gotcha's
- 24:301. Provide a Super Set 2. Clearly Distinguish New Syntax
- 30:14Style Guides Are The Output
- 30:29Make Code Readable
related talks
38mStyleguide-Driven Development
44mFostering Collaboration: Pattern Libraries / Rapid Prototyping
30mIt's About Systems
42mDesigning Inspired Style Guides
45mSmartWeb 2016 - Anna Debenham
25mBuilding a Design System as a team
28mThe Night of the Living Style Guides
38m"Design Patters for Modern JavaScript"