CSS: Variables and Fluid Layouts
2h 3mAdvanced2019-10-10
Authors
Jen Kramer
Teaches web design and development
Course details
When responsive web design was first introduced, it was at once magical and inefficient. Designers had to work with floats to lay out their grid-based systems, as well as hack media queries. Recent advances in CSS simplify this process, letting your design adapt to circumstances more fluidly. But leveraging these new features requires abandoning current practices and shifting to a model where you trade precise control for consistency and ease of implementation. This course can help you make that shift. Jen Kramer lays out how to do math directly in CSS via the calc() function and leverage custom properties, or variables, to streamline your CSS. Along the way, Jen shares examples of how to use these properties, including how to add custom properties to type scale and work with Flexbox and Grid.
Learning objectives
Advantages and disadvantages of CSS calc()
Working with CSS custom properties
Using Sass variables
Creating layouts
Adding custom properties to type scale
Adding media queries to a grid system
Rewriting CSS to integrate calc() and custom properties
Learning objectives
Advantages and disadvantages of CSS calc()
Working with CSS custom properties
Using Sass variables
Creating layouts
Adding custom properties to type scale
Adding media queries to a grid system
Rewriting CSS to integrate calc() and custom properties
Skills covered
CSSWeb StandardsWeb DesignFront-End Web DevelopmentWeb DevelopmentOpen SourceOne-Off
Concepts
0. Introduction
- 01 - The evolution of responsive design
- 02 - What you should know
1. Learn CSS calc()
- 03 - CSS calc() overview
- 04 - Applying calc() in a layout example
- 05 - Challenge - Creating a type scale
- 06 - Solution - Creating a type scale
2. Learn CSS Custom Properties
- 07 - CSS custom properties overview
- 08 - Configure CSS custom properties
- 09 - CSS custom properties and inheritance
- 10 - CSS custom properties and Sass variables
- 11 - Using Sass variables
- 12 - Challenge - Add custom properties to type scale
- 13 - Solution - Add custom properties to type scale
3. Create Layouts
- 14 - Mark up a simple four-column grid system
- 15 - Create a starting CSS for the grid system
- 16 - Add media queries to your grid system
- 17 - Rewrite CSS to integrate calc() and custom properties
- 18 - Rewrite CSS to integrate gaps between grid cells
- 19 - Make the layout formula even more flexible
- 20 - Challenge - Media query integration
- 21 - Solution - Media query integration
4. Refactor a Web Page
- 22 - Project - Use calc() and custom properties
- 23 - Step 1 - Apply the grid layout
- 24 - Step 2 - Add custom properties to grid layout
- 25 - Step 3 - Apply a type scale and custom properties
Conclusion
- 26 - Next steps