Styling a Design System Based on Bootstrap 4 and Web Components

Explore the process of architecting and developing a large-scale open source framework based on Bootstrap 4 and Web Components in this 39-minute live coding session. Dive into shadowDOM v1 specs, cutting-edge CSS techniques, and Brad Frost's Atomic Design principles while learning to create solid CSS guidelines. Discover the benefits of modular CSS and how to structure a large CSS codebase for maximum modularity and maintainability. Get a fast-paced introduction to Web Components and its four standards: HTML Templates, Shadow DOM, Custom elements, and HTML Imports. Investigate the shadowDOM, its creation, and styling techniques, along with native CSS variables and mixings. Gain practical tools to elevate your front-end development projects, presented by Andrés Galante, a UX designer and HTML/CSS expert with over 15 years of experience in crafting interfaces, currently working on the PatternFly Project at Red Hat.

Intro
Design Systems
Modular Design System
Silver Bullet
Web Components
Sculpt CSS
Styling from the outside
Writing good CSS
A real project