English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 2h 02m | 385 MB
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.
Topics include:
- 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
Table of Contents
Introduction
1 The evolution of responsive design
2 What you should know
Learn CSS calc()
3 CSS calc() overview
4 Applying calc() in a layout example
5 Challenge Creating a type scale
6 Solution Creating a type scale
Learn CSS Custom Properties
7 CSS custom properties overview
8 Configure CSS custom properties
9 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
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
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
Resolve the captcha to access the links!