From Styleguides to Pattern Libraries: What You Need and When
summary
The talk explains how to improve large single‑page web apps by replacing static styleguides with a maintained pattern library integrated as the app’s first module. It recommends atomic design (atoms over molecules), BEM naming and SCSS mixins to limit modifier proliferation, shares layouts via nested absolute layers plus a scrollable content region, and solves accessory bars by using a CSS variable for top updated with a preceding‑sibling selector to keep the scroll area correct.
AI-written summary · about
chapters (8)
- 0:00Changing approach
- 4:30Team diversity and debt
- 9:23Style guide vs pattern library
- 12:32Pattern library as solutions
- 15:20Optimizing pattern library
- 18:50Pattern library as module
- 21:59Sharing layouts and content
- 26:30Conclusion
related talks
44mFostering Collaboration: Pattern Libraries / Rapid Prototyping
20mDo your webapps have style?
26mComponents, Patterns and sh*t it’s Hard to Deal with
37mKeynote
15mWhy You Should be Building Design Systems and CSS Architectures
24mA Frameworkless Approach to Building Your Single Page Application
50mCreating a design system that people actually use
26mComponents, Patterns and Other Not-So-Simple Things to Manage