Refactoring a Layout: Calc() & Custom Properties

[00:00:00]
>> Jen Kramer: The next thing we're gonna talk about is chapter four. Chapter four, we're going to start applying custom properties and calc to an example, a bunch of code that I actually had in the previous course on grids and flex box, here at Frontend Masters. So what we're going to do here is I'm gonna walk you through real slowly, we're going to talk through all the logic about how we're gonna apply custom properties in calc to refactor this code.

[00:00:25]
Then we're gonna take what we learn here from this little example, and we're gonna apply it to the homepage and start working on code for that. And then you are gonna get to work on the inside page for that. So that's the sort of arc of the next few things that we're going to be doing here.

[00:00:40]
So to get started with chapter four in your exercise files, go ahead and look in the chapter four. Look in the instructions, it will give you the starting code pen which is here upon the board. So you'll see here that we have some pretty basic, sort of HTML going on here.

[00:00:59]
We have a div around the whole thing, a div with a class of rubber cuz we often do, and then inside of this you'll see I've got some comments telling you what's going on. So here's row one with four individual boxes. You'll see we have a div with the class of row, and then we have article, okay.

[00:01:16]
And it's got some stuff, right. And the code just sort of goes on and on and on like that. I'm gonna just show this to you in full page view just so you can remember what this looks like. This is a prototype of a four column grid system and we were talking about pie in the previous course.

[00:01:33]
So we've got a lot of pie going on here and you can see we have our four columns here underneath of that we have a two and two, we have a one and a three, we have a four going across, and then down at the bottom is a one, two, one.

[00:01:48]
If we start to narrow down the screen, shockingly, things will start to rearrange. So there's our one, two, one, is now two going across with the ones underneath. We've got some things stacked on top of each other a couple places. And then when we narrow up the screen again.

[00:02:08]
I'm sure you're all shocked to know that they're all just sort of stuck on top of each other, okay? So that's the basic code that we have going on here at the moment. And when we're done here, the screen will look exactly the same. Don't you love working on a code like that?

[00:02:21]
[LAUGH] It's gonna be exactly the same. But we are going to spend a lot of time refactoring what we've already written. So I'm just gonna sort of hind the picture down here at the bottom, just so we can focus on the code part of this. Just so you can understand the math behind this because one of the things that's not documented here is the math and how the math actually works out.

[00:02:45]
You can see I've got some of these numbers here like 92%, there's a 4% here. 20, 44, 68, where does that stuff come from? You might be wondering how do we arrive arrive at those numbers? So let me go ahead and show you that.
>> Jen Kramer: So if you were to draw out the four boxes here, right?

[00:03:10]
So if we had a row of four boxes, it's one box per column, right? Each of these is gonna be 20% wide, so there they are, each 20% wide. We've got four percent margin to the left to the each of these boxes, and if you do all of that math, two four six eight, yeah?

[00:03:28]
And then 4 times 5 is 20, so that our depth 200%, yeah? Everybody good so far? So If I put two things together here, right? So put together these two, what does that wind up becoming?
>> Jen Kramer: How wide is each of those boxes?
>> Speaker 2: 44.
>> Jen Kramer: 44, right?

[00:03:53]
Because it's 20 plus 20 plus 4. If I put three of them together? we wind up with 20 plus 20 plus 20, which is 60. Plus 4 plus 4 which is 8, so 68, all right? Everybody clear where these numbers are coming from? So that not totally random.

[00:04:14]
Okay so now what we're gonna do is we're gonna start to rewrite this such that we're gonna leverage our calc and we're gonna leverage our custom properties here. So I'm going to start rewriting this at the very top of this document. Remember I said one of the things that we want to do with calc and custom properties is we want to put our logic at the top where the mobile is located and then in the media queries, we're just going to change the value of our variables.

[00:04:44]
So that's exactly what we're going to do here. So here at the top, we have our row, okay, display flex row wrap, that's going to stay the same. But rather than using this 4% margin thing that I have going on, I'm actually going to change this to justify content, space, between, okay?

[00:05:08]
So I'm going to let flex box actually manage its own space and you'll see why, you'll just have to take my word on this, it's going to work out great, okay. So remember, space between means what?
>> Speaker 3: Spaced evenly except for the two [INAUDIBLE] on the end.
>> Jen Kramer: Right, not on the ends, but between the various boxes on the page, okay?

[00:05:30]
And then so if I was going to go ahead and start working on my math. All right, for that first row I had four boxes, right? And I told you it was a four column layout, true? So I could have a width of of one sort of call it a width of one, and a width the one, and a width of one, and a with the ones were like four units if we thought about it that way.

[00:05:55]
Does that kinda sort of make sense to you? Okay, so if some number of columns and we have some number of boxes, basically in terms of how this is gonna fit together, and those are gonna be important to us and doing our math. So I'm gonna start by here on my row, just to show you that we can declare variables wherever we want.

[00:06:15]
Remember, we're scoping them. So it has to be now a child of row in order to leverage this variable. I'm gonna make my columns to be 4, okay? Cuz this is a four column layout, so there's 4. All right, now here, everybody clear on what this little selector means here?

[00:06:39]
>> Jen Kramer: Okay, new to some of you. So those angle brackets, anytime you see those angle brackets in your code, that is an indicator that this is attribute selector. So in other words we're working with HTML attributes. So what's an HTML attribute? Give me an example of one.
>> Speaker 4: Class or ID?

[00:06:57]
>> Jen Kramer: Class or ID, give me one that is not CSS.
>> Speaker 5: A truff.
>> Jen Kramer: A truff, right? A truff will be an example of an attribute, so it's those not the tag itself, but the other are supporting things, yeah, okay? So here we are saying, for a class, that somewhere inside of it, that's the star equals has the string call hyphen.

[00:07:20]
And it just so happens to be that all of my column classes here all start with call hyphen, cool. So I can just uniformly select all of them with that selector. Very nice, okay? So right now, this is the mobile layout. So this flex number here, this is the shorthand.

[00:07:37]
Remember, for flex grow, for flex shrink, and flex basis, okay. So, grow zero, shrink zero, flex basis is 92%. And we have a margin of zero on the top and bottom, four on the left and right, make sense? Okay, so that's going away, bye bye. [LAUGH] So glad to have you, but see you later.

[00:08:04]
What I'm gonna do here is let's just do a quick analysis of what's gonna happen here. Basically, what I'm going to do is I'm going to say I have some number of boxes. I have some number of columns and that's gonna determine my width, right? Boxes divided by the number of columns, so if I have four boxes and I have four columns if you divide four by four you get one, right?

[00:08:34]
Multiply that by 100%, we have one great, big huge box occupying the row. Does that kind of make sense? Okay, all right, the math for you so you can see it. So I'm gonna set up a variable here called width. And I'm gonna give it a with the four because we're in mobile, everything is going to stack on top of each other.

[00:08:53]
So every box is going to be four boxes wide, right? Okay, and so then I'll set up a variable here. I'm gonna call it initial basis. And I'm gonna say that we have calc. And we're gonna calculate a variable called width, right?
>> Jen Kramer: And we're gonna divide that by a variable called columns.

[00:09:28]
>> Jen Kramer: So that's gonna give us 4 divided by 4, true. That gives us a value of 1. Is 1 helpful to us? Probably not. It would be better if it was in a percent format, yeah? Okay, so let's multiple it also by a 100%.
>> Jen Kramer: And so my initial basis is just gonna be a 100%, okay.

[00:09:55]
Then we actually needed to display this on the page, so we could display this as our flex basis. So now we needed to clear our flex basis and that's simply going to be what? The variable of the initial basis.
>> Jen Kramer: If you want it to still say flex, you could say, simply you could say flex.

[00:10:19]
Flex, and in that case it would be 00. And then the variable of initial basis, right, that would be the same kind of thing. If you wanted to write it that way, whichever way you want to write it is fine. To keep it clear, I'm gonna write it this way, cuz we're really just dealing with the flux basis.