Modern browsers ship with CSS Custom Properties, also known as “CSS variables”, a superpower that enables us to create reusable components without any JavaScript dependencies needed – using only vanilla CSS! Learn how to leverage Custom Properties to improve code reuse, maintainability, and downright enable possibilities that previously required large amounts of hard-to-maintain JavaScript and violated the separation of concerns. See practical examples of why CSS Custom Properties are a revolution in the way we write CSS!
Overview
Syllabus
- Introduction
- CSS Variables Overview
- Inheritance
- Creating Style Hooks
- Fallbacks
- Fallbacks Exercise
- Fallbacks Solution
- DRY Fallback Strategies
- Invalid Values & Computed Values
- @supports & Custom Properties
- Custom Properties Exercise
- Custom Properties Solution
- Cycles & Overriding Properties
- Flexible Pie Chart Exercise
- Flexible Pie Chart Solution
- Custom Property with a Sass Loop
- Space Toggles
- Responsive Design with Custom Properties
- Colors
- Colors Exercise
- Colors Solution
- Color: Present and Future
- Transitions & Animations
- Numbers, Lengths, & Variable Values
- Number Toggles
- Range Mapping
- Numeric Range Exercise
- Numeric Range Solution
- General Linear Range Mapping
- Strings & Numbers in Strings
- Images
- Javascript
- Dynamic Button Ripple Effect Exercise
- Dynamic Button Ripple Effect Solution
- Dynamic Form Element Styling
- Heading Typing Effect
- Dynamic Scrollbar
- Wrapping Up
Taught by
Lea Verou
