4.3 Add Unstyled Content: CSS

Hello, welcome back to responsive web design revisited. In the last lesson you got all of your HTML and JavaScript in place for your vanilla version of your site. In this lesson you're gonna get all your CSS in place. And we're gonna be building our responsiveness in for each element that we add CSS to, progressively as we go through the whole process. So, we're not gonna wait until the end to figure out how to add in responsiveness; we're gonna be doing it as we move along. So, to help us with that process, we're also gonna be making use of Chrome's developer tools. So, open up the developer tools. And then hit the little mobile icon here. This emulator is so helpful. You've got these rulers along the top which will help you keep track of the dimensions that you're working with. You've got the ability to drag the little window here instead of having to resize your whole browser when you're wanting to have a look at your responsive functionality. And, then you've also got all of these presets that are available for you. So you can be checking how your site's going to work responsively, with real specs all the way through your whole development process. All right so, on to CSS. Now in every case, the first thing you want to do is get your font families in place, because every font is a little bit different. They have slightly different sizes. And you're going to need to make sure that your layout works with the specific size of the font that you're using. Now, in this case we're using lato as our primary font, and then we've also added in a full back font stack. So we'll save that. And now you'll see the lato font has been applied throughout the entire site. The next thing I want to do is to add a little bit of improvement to our basic RAP responsive class. So, if I grab this and start to shrink down the size of this window, you can see the content is crunched up, straight against the side of that rap class. So we want to add a little bit of horizontal padding and we'll go ahead and do that now. All right, we know that 75 rem is our maximum width. So before we reach that 75 rem, we're going to add in some left and right padding. So I've just added in two rem worth of left and right padding when the browser reaches a sa, a width of 79 rem. So let's see how that works. Now as we see this shrink down, you'll be able to notice when the, there you go, you see that little change there? So before the content ever gets to the point where it's pressed up against the edge you can see the padding kicking in to effect. Now, the other thing that we wanna do is change up how much width there is on this padding when we start to shrink this down to be quite small. When you get down to the smaller widths, you don't want to be losing too much space down the edges here. And what we are gonna look for is when we hit about 600 pixels in width, we're gonna shrink that two rem of padding down to 1.5 rem. So we'll grab another media query. [BLANK_AUDIO] And we will paste that in. We've taken that 600 pixel width, by looking at our rulers here. That seems like a good spot for us to change up the padding amount. However, as you know, we don't want to use pixel values anywhere in our entire style sheet. And where that REM-PX package that we installed earlier will come in very handy. Now you just select that value, and press either control or command, depending on whether you're on Windows or Mac. And then Shift+R, and convert that to a rem value. Let's save that and have a look. Now, when we get down to 600, you'll see the padding size decrease. Do you see that small change? That small change is significant enough to make the layout far more readable when we're getting down to these smaller widths. Then from here, what we want to do is just work through each block and each piece of content one at a time and write the vanilla CSS for them. First we've got our logo and title. Alright, now what we have added here is, this is our wrap up around the logo and title and we're floating that to the left. And then we're also adding some spacing above it and below it, so that it will align with, at the same level as our navigation bar. Now we don't want pixels in here. We want to convert that to rems. So just using that same shortcut that I showed you earlier. And we're also adding a little space to the right of the logo so that the nav menu and the logo don't get crowded up together. And we are setting the width of the logo but in rem units. So what that will do it, is it will make sure that as the font size is increased or decreased, the logo will always keep its correct sizing. Now we've got our h1 title. And this font size has come from our style tile PSD. So we know that it has a font size of 42 pixels in our mock up. So we've added in that font size. And now we are going to convert that to rems also. We've also grabbed the font weight from our PSD. We've set the line height of the h1 title to 45 pixels, because that's the size of our logo and we want the text to have an alignment with that logo. So then we'll also convert that to rems. Now here we're adding in our responsive functionality for the logo and for the title. And this does two things. One, it reduces the amount of space that can be in between the logo and the navigation menu when you're down at those smaller sizes. And it also reduces the size of that heading text. Right, let's have a look at how that works. Now it looks a little bit funky because we haven't styled up our menu yet. But just pretend that isn't there right now. You can, you can see we've got our logo and our heading is aligned properly. And as we shrink that down you'll see the text also reduce in size. All right, next up let's add in our menu code. And it's gonna be quite a bit of CSS here so we won't go through it all line by line. So, this is just put in our default nav menu, styling in that's going to apply whether we're using the expanded nav menu or the collapsed nav menu. So, this just does things like removing the bullet points, making all the menu items line up either one next to the other in the expanded menu or making them stack correctly in all these types of things. And we have a media query here. That will determine what size our expanded menu will open up at. So what we're saying is any size 61 rems or above will show the expanded nav menu. The following code is what allows the expanded menu to operate in the way that you saw in the earlier demonstration. Then, we have our collapsed nav menu. And this says whenever there's less than 61 rems of available width, that means there's not enough room to show that expanded menu. So, instead, we'll show our collapsed menu. Let's have a look at that. All right. So there is our expanded menu and we already added the JavaScript to make that work earlier on. And now when we shrink this down, once it reaches 61 rems, there you go, you have your collapsed menu item instead. And you can change up that break point depending on how many items you have in this menu. So let's say you add another item or two and now you need to have the smaller item kick in at, let's say, 1,150 pixels, or the equivalent of 1,150 pixels. So then you would just go in here, change that to 1150px, and then convert it to rems. And then just use that value as the point at which you switch to different types of menus. And you can see that that took effect immediately. Now, that's the point at which you switch from one to the other. So that's an example of where we talk about content first. You're not designing everything around specific resolutions of devices. You're making your decisions based on what the content that you're working with needs. Okay, now let's have a look at our hero unit. Now, we're gonna do something really cool with this hero unit and that is taking advantage of the ability of ems to fully scale. So we have set the padding, the internal padding, inside the hero unit in, in ems. And all of our other values, all of our fonts and everything else are all set in em values. And the reason I'm doing this is because with ems, the actual size that they come out depends on the font size of the most immediate parent, the most immediate container. Rems relate to the font size set against the HTML element. But by using em values here, the actual size that all of these things come out at will be dependent on the font size that's set against the hero unit itself. Now h, let's have a look at how this appears at full size. Sorry, actually, we'll just add a background color to that really quickly, so you can see it more clearly. Gray. So we've got this padding amount here, and here, and all of these sizes, these are all set in em values. And what that means is, when I want to shrink everything in the whole unit, I can do so just by setting a base font size. So by setting .95 rem as the base font size for the hero unit, the effect that will happen is all of these elements here will be scaled down to 95% of their original size. So, watch this. So, we'll shrink this down. And there, did you see that? Everything, the padding, the font sizes, all of the layout items are all shrunk down to 95% of their original size. And that's a really handy trick that you can use when you're putting together your responsive functionally. Right, so now you've seen the basic process that you're going through for each one of these content elements. Let's go ahead and just add in all the remaining CSS, and then we'll have a look at what we've done with each of these areas. All right so here are our selling points. We've split these into four columns. And in a lot of cases, if you're not doing super complicated grids, you don't need a super complicated grid system to manage your columns. Now all we've done here is we've said that each of the selling points will be 22% wide. And they'll have a margin on the right of 4% and the only exception is the very last of these selling points, which will have a margin of 0 and that has given us the effect that you see here. So this is 22% of the available width, with a 4% gap in between. And then when we get down below a certain size we change that up so instead of taking four columns there'll be two columns. And to do that we're just changing the width to 47% with a right margin of 6%. And then when we get down to a smaller size than that we change it so that each selling point is 100% width with no margins on the right. And just like we talked about with the navigation. These break points are dependent on when the content doesn't look right anymore so when it's starting to look too squashed up, that's when we put in a break point so that we change the number of columns there are for that area. And we'll watch that in action. It switches down to two. And then down to one. And then, for the rest of the content elements we've done the same thing. So, in all cases, always working with rem values. Our information video, we've set that to 50% width and floated it over to the left, so that the welcome message will wrap around it on the right. And then we've added in media queries at the point at which the content just starts to look less readable then it ought to be. And we've used the same sort of a column system with our testimonials again. 22% width for each of the testimonials, and then we've shrunk them down. And changed up the number of columns. And the same thing has happened with the footer. We have our copyright notice floated on the left and our social icons floated to the right, until we get down to a width that that doesn't look any good anymore, at which case, everything is center aligned. So I'll have a look at how those things work. And you can see, everything just collapsing down smoothly. As we go down to different heights. Down to different widths rather. Now from here you can go ahead and you can try out your layout in any of the different emulators that are available here in the developer tools. And you can make sure that everything is working just as smoothly as you need it to. Okay, so that's it for your vanilla CSS. In the next lesson, we're gonna start adding all of your visual styles to this. So we'll be taking what you created in your PSD, and we'll be putting all of that into CSS and rounding out the overall appearance of your site. I'll see you in the next lesson.