CSS: Variables and Fluid Layouts

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.

Introduction

• 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

Conclusion

• Next steps