Applying Custom Properties & CSS Calc()

[00:00:00]
>> Jen Kramer: All right, so let's go on and apply this to a real web page. Before we leave here, I'm just gonna grab this little bit of code right here.
>> Jen Kramer: These lines 8 to 13 here on the CodePen, so we don't have to retype them, okay? Cuz this is, this is the good part.

[00:00:18]
This is the fireworks for the day, okay? Copy that little bit of code. It's gonna come in handy, and then we're gonna go on to chapter five.
>> Jen Kramer: So here in chapter five,
>> Jen Kramer: In your Begin folder I'm gonna go ahead and open up my index.html, and then in the CSS, we're gonna open up layouts.css.

[00:00:50]
You can ignore the other files. You can ignore styles and the navigation. We're not gonna deal with those. I'm gonna turn on my word wrap here.
>> Jen Kramer: Okay, so all I've got going on over here in my CSS to start with is simply, so I'm gonna start floating my images when I get to 740 pixels.

[00:01:14]
Prior to that, I've got a default style. It's actually in styles.css, which centers the image and declares it as a block kind of layout, okay? So these are the media queries we're gonna work with. I've just sort of outlined them for you, so now we're ready to go ahead and start thinking about how we're going to apply this to this webpage.

[00:01:38]
>> Jen Kramer: Okay, so before I lose it I'm gonna go ahead and paste in that little bit of code that I copied from the code panel, just to keep track of it. But to get started here,
>> Jen Kramer: Let's go back and revisit what's going on with these images. So what we've got here, we have a four-column layout here.

[00:02:05]
We have our header. We have our nav bar. We've already actually done all this styling in associated with that, with the media queries. So we're just focused on this last bit of appearance down here at the bottom, these four columns that we have going on here, right? Okay, so it's gonna go from this where we've got four columns next to each other.

[00:02:25]
It's gonna go to, and by the way, notice that those columns aren't all the same width. Ooh, right? We have skinny columns and we have fat columns, don't we?
>> Jen Kramer: Okay, so just file that away. That's a thing that we have to think about. You know these designer people.

[00:02:43]
Okay, when we go to our large layout, we just took column number three and moved it to the bottom. We didn't move column number four. That would be easy. We moved column number three to the bottom, and what else did we do to it? We made it go horizontal didn't we?

[00:03:03]
So we have a couple of things we gotta do here for this layout, okay. Then when we go to our medium layout, we're pulling down columns three and four, stacking them on top of each other, and then for the very last part everything will stack on top of each other.

[00:03:21]
This is what we have now. This is already done yeah?
>> Jen Kramer: If you open up your page right now, this already works, but we need to work on coding this medium and large layout. So, let me go back to this extra-large look here. One of the things that you might have noticed is that some of these columns are wider and some are a little narrower, and I'm gonna give you another hint.

[00:03:46]
Our designer told us this is a 16-column layout. That's a good thing to know, right? Thank you designer person. Tanner, in the back, yay.