There are currently no items in your shopping cart.

User Panel

Forgot your password?.

Responsive Layout 2.0

The evolution of responsive design
What you should know

1. Learn CSS calc()
CSS calc() overview
Applying calc() in a layout example
Challenge: Creating a type scale
Solution: Creating a type scale

2. Learn CSS Custom Properties
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

3. Create Layouts
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

4. Refactor a Web Page
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