From the course: CSS: Variables and Fluid Layouts
Unlock the full course today
Join today to access over 22,500 courses taught by industry experts or purchase this course individually.
Rewrite CSS to integrate calc() and custom properties - CSS Tutorial
From the course: CSS: Variables and Fluid Layouts
Rewrite CSS to integrate calc() and custom properties
- [Female Instructor] Now that we have our code working with regular CSS, let's refactor it using responsive design 2.0, with custom properties and with calc. We're going to start with what's in the mobile display first. We're going to put all of our logic right there in the mobile display and we'll just leave those declarations of flex basis further down here in the media queries, just for the moment. Once we get that formula that we're going to put in up there and correct at the beginning, then we'll go ahead and make changes in the media queries. So, first of all, what we want to do is we want to calculate the flex basis of these cells and that way we have to come up with that number is basically, how do we know that certain cells are that particular width? So let's talk about that first row where we have four boxes. We originally started by saying each of those boxes was 25 percent. What was the math…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
Mark up a simple four-column grid system6m 48s
-
Create a starting CSS for the grid system7m 1s
-
Add media queries to your grid system11m 39s
-
Rewrite CSS to integrate calc() and custom properties7m 53s
-
Rewrite CSS to integrate gaps between grid cells4m 35s
-
Make the layout formula even more flexible9m 26s
-
Challenge: Media query integration1m 24s
-
Solution: Media query integration1m 59s
-
-
-