Learn how to leverage recent advances in CSS to more efficiently build sites with a single design that adapts readily to different screens and environments.
Overview
Syllabus
Introduction
- The evolution of responsive design
- What you should know
- CSS calc() overview
- Applying calc() in a layout example
- Challenge: Creating a type scale
- Solution: Creating a type scale
- CSS custom properties overview
- Configure CSS custom properties
- CSS custom properties and inheritance
- CSS custom properties and Sass variables
- Using Sass variables
- Challenge: Add custom properties to type scale
- Solution: Add custom properties to type scale
- Mark up a simple four-column grid system
- Create a starting CSS for the grid system
- Add media queries to your grid system
- Rewrite CSS to integrate calc() and custom properties
- Rewrite CSS to integrate gaps between grid cells
- Make the layout formula even more flexible
- Challenge: Media query integration
- Solution: Media query integration
- Project: Use calc() and custom properties
- Step 1: Apply the grid layout
- Step 2: Add custom properties to grid layout
- Step 3: Apply a type scale and custom properties
- Next steps
Taught by
Jen Kramer
