Styling a design system based on Bootstrap 4 and Web Components by Andres Galante

Based on a real-life example, this live coding session will take developers through the process of architecting and developing a large-scale open source framework based on Bootstrap 4 and Web Components. We will go through the shadowDOM v1 specs, cutting-edge CSS techniques, Brad Frost Atomic Design principles and how to create solid CSS guidelines.

You will also learn why modular CSS is good CSS, and how to structure a large CSS code base in to maximize modularity and maintainability. Also covered is a fast-paced introduction to Web Components and its four standards: HTML Templates, Shadow DOM, Custom elements and HTML Imports. Additionally, we’ll explore what the shadowDOM is and how to create and style it, as well as native CSS variables and mixings.

The audience will leave the room with useful tools that will help them take their front-end development projects to the next level.

Andrés Galante is UX designer and an expert CSS and HTML coder that has been crafting interfaces for more than 15 years.

He's currently part of the Red Hat User Experience Design Team working on the PatternFly Project as Designer and HTML/CSS lead.