Styling a design system based on Bootstrap 4 and Web Components
summary
Live coding shows a PatternFly design system built on Bootstrap 4 and Web Components, including a working encapsulated badge component that uses the Shadow DOM to defeat CSS specificity yet currently relies on polyfills because browser support is leaky. Workflow uses the four Web Components standards (Custom Elements, Shadow DOM, Templates, Imports), CSS variables and mixins, flexbox grid utilities from Bootstrap, and strict rules: prefix classes with PF-, follow BEM naming, keep selectors flat, avoid IDs and !important.
AI-written summary · about
chapters (9)
- 0:00Intro
- 1:26Design Systems
- 3:56Modular Design System
- 6:11Silver Bullet
- 9:48Web Components
- 17:35Sculpt CSS
- 21:57Styling from the outside
- 26:03Writing good CSS
- 29:29A real project
related talks
34mPatternFly Elements - A Performant Design System
33mThe Purification of Web Development
36mThe State of Web Components
56mModern CSS For Dynamic Component-Based Architecture
32mFuture CSS in Web Components
51mBuilding web applications with Web Components
27mBuilding Design Components with Tailwind
56mChasing the holy grail Reusable Web Components and Design Tokens