Refactoring a Layout: Applying Custom Properties

[00:00:00]
>> Jen Kramer: What we're going to do is we're gonna come down here to our media queries. And instead of assigning this margin, this margin goes away. We don't need that margin anymore, all right. Now what we're going to do here in my media queries, instead of saying the flax with the value here, I'm gonna call out what?

[00:00:22]
>> Jen Kramer: What is gonna change from where we were outside the media query to inside media query?
>> Speaker 2: The width.
>> Jen Kramer: The width, that width variable, right? Okay, and so that value is gonna change. So here, the value for this, this is going to become flex, or sorry, all we have to do is this, width of two.

[00:00:48]
>> Jen Kramer: Right? Because now that 2 will go into our calculation here, we'll have 2 divided by 4, which is 0.5 multiplied by a 100%, we get 50%, right? 2 boxes of 50% each next to each other. Make sense? We haven't got into the gap yet so, let's do the easy part first, okay?

[00:01:13]
Okay, so what does it mean here for this one? Column of 1-4 and 2-4.
>> Jen Kramer: And really I've refactored some other stuff here, too. This should also be .call(-3) and .call(-4). What is this one going to be?
>> Jen Kramer: col-4 should be the giveaway, what would be the value?

[00:01:45]
>> Speaker 3: Back to 4.
>> Jen Kramer: How about 4, right? We're back to 4. Not all of those were set that way, and I'm not gonna go through all the code to explain Be now, the 1-4 and 2-4 and all the rest of that. You can read the original code if you want.

[00:02:00]
And the ordering we're gonna leave alone. Okay, then when I come down here to my desktop sizes, what is this gonna become? It was 20%, what's my value of width now?
>> Jen Kramer: How many boxes across do I have? Four boxes, right? So my value of width is what?

[00:02:25]
1, 1, 1, 1, 1, right? Okay, so here my value of width is 1. What would my value of width be here?
>> Speaker 2: 2.
>> Jen Kramer: 2. My value of width here?
>> Speaker 2: 3.
>> Jen Kramer: 3? And 4 is gonna carry down from the previous media query. So if we take a peek at what we built so far,

[00:03:02]
>> Jen Kramer: I probably have to save this for so I can show you, hang on for that.
>> Jen Kramer: Thank you, and now we can take a look at this in full page view. And we can kinda see, okay? So there's the 4 the 2, the 1 and the 3.

[00:03:26]
The full row, the 1, 2, 1. And if I start to narrow this page down,
>> Jen Kramer: All my media query points work, yeah,
>> Jen Kramer: Okay?
>> Jen Kramer: And look at that. There they go, they're all stack on top of each other. Awesome? Look how little code it took for us to write a 4-column grid system using really something pretty simple?

[00:03:54]
What about that gap? Cuz we've just done the super easy thing here, we managed to put in 25, 50, 75, and 100%, okay? Big deal, but what about those gaps? That's something we need to go back and add. Okay, so let's think again, if I have a row with four boxes in it, and they're pushed all the way out to the side with justify, or series, the justify contents at the space between, how many gaps do I have?

[00:04:26]
>> Jen Kramer: Three gaps, right? If I have three boxes of any size, how many gaps do I have?
>> Speaker 2: Two.
>> Jen Kramer: Two. If I have two boxes of any size, how many gaps do I have?
>> Speaker 2: One.
>> Jen Kramer: One. If I have one great big huge box, how many gaps do I have?

[00:04:40]
>> Speaker 2: Zero.
>> Jen Kramer: Have you determined the pattern here?
>> Speaker 2: Minus one.
>> Jen Kramer: It's kind of like that, isn't it? Okay, so let's go ahead and set this up. So the way I went ahead and did this math was as follows, I''m gonna set something called the gap. I'm gonna establish that here again outside the media query.

[00:05:01]
Here's my logic. I'm gonna call this the calc. And the way that I did this was I said the variable of columns,
>> Jen Kramer: We’re going to subtract from the variable of width, yeah? Variable of width. Okay. So, if I did that math real quick that would be like 4 minus 4, would be 0%, right?

[00:05:35]
Or 4 minus 3 would be, would be 1, right. And it'd be more helpful to put that into a percent, wouldn't it? So I'm going to multiply this by 1%.
>> Jen Kramer: Okay? So that's gonna calculate my gap for me. And now what I'm gonna do is my flex basis calculation here becomes what?

[00:06:10]
>> Jen Kramer: I need to add that initial basis, and then how am I gonna bring it in the gap?
>> Speaker 2: Subtract it
>> Jen Kramer: Subtract it, right? Yeah. So we're only going to say from my first basis We'll say simply calc,
>> Jen Kramer: And then we're gonna say, the variable of initial basis minus the variable of gap.

[00:06:44]
>> Speaker 2: I mean, one more closing parenthesis.
>> Jen Kramer: Am I missing one? Yes, I am, thank you.