CSS for a Simple Responsive Layout

[00:00:00]
>> Next up is the header, the banner, and the tour styling. By the time we're done with this section, as you see here in this screenshot, by the way these are all clickable so you can open them up in a new window and zoom in on them. By the time we're done with this, we'll have our header styled, we'll have our banner styled, and we'll get our tour dates sort of basically in place here, okay?

[00:00:24]
So that is where we are headed with this. All right, so go ahead and open up your CodePen for this. This is the easy design header and banner styling, or you can continue working in the CodePen you already have. Make sure you fork it to your account. And then we can get busy styling here.

[00:00:52]
So the first thing that I'm going to do is I'm going to do a little trick that a lot of you may not even be familiar with. What we have written so far for our CSS, this is what we wrote back in Chapter 2. It's just copied and pasted right here.

[00:01:07]
This is kind of like our base styling, and as you can already tell, we're already up to 137 lines of CSS. [LAUGH] We haven't even, like, really gotten started with this. So, I'm going to show you this little trick. What I'm going to do is I'm gonna put around this at layer base.

[00:01:33]
And we're gonna open our curly bracket here on line one, we're gonna scroll all the way to the end of our CSS, and we're gonna put in another curly bracket here at the end. And then you can say format CSS, it'll clean up any formatting issues that you have.

[00:01:54]
And now what that will do for us is we can collapse all of that CSS just like that. [LAUGH] That's our base styling, okay? If you're not familiar with Layer, these are actually used as part of the cascade. You can have unnamed layers, you can have layers with names is what we have here.

[00:02:14]
We can specify in what order we want the layers to apply to our design. I talk about all of this in my intermediate CSS course here at Frontend Masters. We are not going to use layers in the cascade, we are just using them as a grouping mechanism. So I wouldn't necessarily recommend that you use it this way in your production code it's more for teaching purposes and that's why we're doing this, just to make our code a little bit easier to read.

[00:02:46]
Okay, so to this we'll add some new CSS so I'm going to make another layer and I said this is like header and banner styling so we'll call it header. Just header and then inside of this we'll put in our styling it pertains to that header and the banner.

[00:03:15]
Now, when I start putting let's see styling right here on the webpage at what dimensions of the screen is it going to apply?
>> All dimensions.
>> All of them. All of them, right? So in other words mobile tablet and desktop. So when we start adding additional styling here we're really thinking about our mobile dimension right now.

[00:03:39]
So we're going to work on just styling the mobile dimension and then we'll start adding media queries that will allow us to make our changes for tablet and desktop. Make sense? Okay, great. So here at the header, let's start with our wrapper. And we can say something like max-width 375 pixels.

[00:04:04]
Okay? And if you're ever not sure what's going on, what is the thing I tell you to do always? The world's greatest debugging tool when it comes to your CSS border. Border one pixel solid. Usually I do red, but since we're on a green background, let's do white.

[00:04:26]
That'll always put a border on something so you can see exactly what's going on, because if you can't see it, you can't style it. Very, very important. We can't see what's going on here. We cannot style it. I think right now, in my base layer I may have the image style commented out.

[00:04:52]
Yes, a temporary comment right here. So if your image style in the base is probably not uncommented that's great I'm going to make sure that works that will put all of my images right inside of my wrapper, see how I did that?
>> So did you uncomment the temporary comment?

[00:05:13]
>> I uncommented the temporary comment, correct. Okay. Anybody happy with that?
>> Yeah, it looks great. I think we're done.
>> Awesome, yeah Mark.
>> Why pixels instead of rem here?
>> Why pixels instead of rem here? You absolutely can do this in rems. That wouldn't be a problem at all.

[00:05:36]
What I find is, again, for teaching purposes, I find when I get to these larger numbers, people get very confused. And the pixels are a better thing to use for that reason. Also when you go to your media queries, the rems and pixels are pretty well interchangeable. If you take a look at a lot of the way a lot of people write their CSS, they use pixels in the media queries and they use Rems elsewhere.

[00:06:01]
But you can absolutely convert this to rems and do that if you wish. Not a problem at all.
>> You ever use CH as a method of measurement especially in Mac's with circumstances
>> I have never used CH but that means nothing is neither here nor there. Whatever works for you, I think is an awesome choice.

[00:06:20]
>> Your question about your developing like mobile first?
>> Yeah.
>> In Chrome they have the mobile, they have tools where you can see it and for different dimensions. Do you like to just resize it to kind of look like a mobile or are there dimensions that you like to style it to?

[00:06:36]
>> Yeah, so what are the right dimensions? Depends on your design, okay? So you just sort of look at your design and see what looks good. Often your designer was gonna give you the dimensions to use anyway. [LAUGH] Designer gave me the dimensions to use here. That's how we wound up with these.

[00:06:54]
But if you wind up ever styling on your own, do the thing. Do the thing and figure out where it looks good for you, right?. If stuff starts rapping at a certain point in time, that's a good place to sometimes put a media query. Makes sense?. Okay. Okay, this is great.

[00:07:18]
I would like it centered. How can I center this on the page? My wrapper.
>> Flexbox.
>> Flexbox is one possibility. What would be another possibility that's even easier?
>> We can do margin auto.
>> We can do margin. So if we add to this margin, 0 auto.

[00:07:45]
Okay, two numbers. So the first number refers to the top and the bottom. The second number or keyword in this case refers to the left and the right. So what auto is doing is it's looking at the width of the page relative to the width of the wrapper which is 375 pixels.

[00:08:03]
It takes whatever space is left over, divides it by two and sticks it on the left and the right side. So it's centered. Makes sense? Awesome. Okay, so let's move on to our header. The actual header itself. It is kind of large, [LAUGH] so let's give this a little bit of breathing room, all right?

[00:08:35]
First of all, it's smashed up against the top of the page, so let's remedy that by giving it some padding on the top, three rem. Let's give it some padding on the bottom, like two REM. Yeah, you could write that in one declaration if you prefer. Whatever works for you is fine.

[00:08:58]
So that'll give us a little bit of space between our logo and and the image that comes after, okay? And then we could say header image. So remember, this is all just coming from our HTML here. We have our image. The image is right here on line 3 in our HTML.

[00:09:26]
It's inside of header. So we have here a descendant class. Images inside of header are going to do what? They are going to have a max width of a 150pixels. Why because the designer said so. Right, what else should we do there?
>> Center.
>> Let's center the image, yeah?

[00:09:56]
Okay, what kind of centering should I use and where should I put it? Anybody say we should use Flexbox? Could do that, right? We have parents and children here, header A. That's one way to do it. There's an easier way. Images in line. So all we need to do really here is say text, align center.

[00:10:26]
Boom.