Basic Tablet CSS Layout

[00:00:00]
>> So let's move on to the Tour section of the page, now that we've got this header taken care of. This is the part that's really super fun. So, I'm gonna recommend that you fold up your HTML here, all right? So if we fold up all of our HTML here, let's just open up main.

[00:00:22]
Look at what's going on here inside of main. Okay, cuz we wanna get some columns going here with main. Anytime we wanna get columns we know we're gonna work with flexbox or grid. And the first thing that we should think about when we think about flexbox or grid is what?

[00:00:45]
>> The structure of what you are trying to achieve.
>> The structure of what I'm trying to achieve. So in my HTML, where is the parent, where is the children, or where is the container? Where are the items, okay? So here we have main that contains all of the things that I wanna lay out on this page, right?

[00:01:05]
So main is where I'm going to apply my layout. And then all of those children inside, there's an h1 and a bunch of paragraphs, they are what will be laid out, make sense? Cool, let's write it. Okay, so we are in the Tour. We're in our Tour layer.

[00:01:28]
I had my media query here, I'm gonna run line 1 through 43. So there's my wrapper. All right, so let's put in a style, main, >*, this is a great thing to do anytime that you are working with any kind of layout, this will always give you the border, 1px solid white.

[00:01:57]
So that's gonna give us a border around all of these things that we're trying to lay out, yeah? Even though we have some h1s and we have some paragraphs in there, we have a border around everything, so we can see what's going on. Here it is. Okay, and so now, I'm gonna use grid for this.

[00:02:25]
And the reason why is eventually I need my h1 to be all by itself, right, sort of on a row by itself. And then all of these tour dates need to be on a grid underneath, right? So I'm gonna use grid over flexbox for this, for that reason.

[00:02:42]
So how would I start writing some grid layout here? First of all, what is my selector?
>> Wasn't it just main?
>> It would be main, right? So on main, all right? And then how do I set this up for grid?
>> display: grid?
>> display: grid. Great, and nothing happens.

[00:03:15]
Why not?
>> You didn't give it any columns.
>> I didn't give it any columns. Exactly, so grid-template-columns will be, there's a bunch of ways to write this. Let's just write it this way, repeat( 3, 1fr), what does that mean?
>> Three columns, each getting one fraction of the whole.

[00:03:44]
>> One fraction of the whole. Whatever that whole is, break it into three parts, right? Where do fractions, that fr unit, where does that work in CSS? Can I use it anywhere?
>> No, just on grid.
>> Just on grid. So sad, wouldn't it be great if we could use fr anywhere?

[00:04:07]
That would be amazing, but it only works on grid. Okay, so there we go. It did exactly what we told it to do.
>> Looks great.
>> Looks great. We're done, moving on. Now, if you like it, you can keep it. There's nothing wrong with this, but anyone wanna make a comment?

[00:04:26]
Something you'd prefer.
>> Tour needs to span the entire width of the grid.
>> Yeah, the designer said tour needs to be on a plane all by itself, right? Okay, so let me remind you about grid and how this all works. I keep touching my tablet and it keeps moving my notes.

[00:04:46]
Okay, so do you remember the story of grid lines inside of grid? You ever heard about grid lines? Okay, so in your grid you have, obviously, a series of lines represented by these fine borders, yeah? Okay, and you can count these lines, the numbers are their names. You start counting like a human with number one, not like an engineer.

[00:05:15]
Don't start with zero, okay? Count like a human. So this line here is? Line one. This line here is?
>> Two.
>> Two. This line here is?
>> Three.
>> Three. This line here is?
>> Four.
>> Four, okay? Likewise, we can do it with rows. So this line on the top is?

[00:05:35]
>> One.
>> One. This one is?
>> Two.
>> Two, it looks like two lines cuz of the two borders, but it's really just one line, all right? This line here is?
>> Three.
>> Three, and this one down here at the bottom is four. Yeah, okay, so we can specify an area with our main h1, because that tour is an h1, and we can specify that area using those numbers.

[00:06:05]
So what would be the starting point for our row? What number do we start with for our tour? If we want it to go all the way across here, what number do we start with?
>> One.
>> One, so, we're gonna say grid-area, and the shorthand goes like this, Let me put in the numbers and then I'll tell you.

[00:06:31]
1 is for that first row. Where is our column number starting?
>> Online says -1.
>> -1, really? No, not -1, we're starting with 1, yeah.
>> 0?
>> No, 1. We count like humans, we start with 1. We don't start with -1, we don't start with 0, [LAUGH] okay?

[00:06:58]
So we start with 1 as our starting row, what is our starting column number?
>> 1.
>> 1, so that's the next number. Okay, where is our ending row?
>> 4.
>> No, 2.
>> How many say 2? How many say 4? Okay, it would be 2, because we just want it to span over this first row.

[00:07:26]
Not all the rows, just the first row. So 2, that's our ending row, and our column would be what?
>> 4.
>> 4, cuz we're gonna go all the way over to the end. Woo, look at that. So let me give that to you as a comment. So this is grid-row-start / grid-column-start, these are the actual CSS properties.

[00:07:58]
So you could write this out as four separate statements or you can use the shorthand, up to you. grid-row-end and grid-column-end. So that's the order of those numbers and what they mean, and that's the way you count them. So that tour wound up being pretty easy. Okay, so the last thing we need to do is just get rid of our borders here, that was just for debugging purposes.

[00:08:32]
Okay, ooh, so pretty? Nice, and now you can do the thing. Ooh, it all works. How cool is that? Okay, fantastic. All right, so this last one here, we have our series of reviews and images down here, right? And we said we wanna put those side-by-side. So inside of my reviews layer, I am going to add my media query so that all my CSS is together.

[00:09:11]
So @media (min-width: 800px). All right, so I'm gonna ask you guys, you're gonna write this code for me. So always start with your HTML. We wanna put three boxes, all next to each other. Where am I going to make my declaration? Where is the parent or the container?

[00:09:46]
And where are the children? So where is the parent in this case?
>> The aside.
>> The aside, and where are the children? They're divs with a class of image-group, right? Okay, so with that in mind, what do I write here inside my media query, what's my selector?

[00:10:12]
>> aside.
>> aside, okay, then what?
>> display: grid.
>> display: grid. Then what? Grid-template?
>> Yeah, grid-template-columns. What are we gonna do?
>> repeat.
>> repeat.
>> 3 times
>> 3.
>> One fraction each.
>> 1fr, whoo-ooh. Okay, now what?
>> gap.
>> How about a gap?

[00:10:58]
2rem. So pretty, yay. [APPLAUSE] Okay, and you could do the thing again. Wow, look at that, so awesome.
>> Why would you do grid sort of flex cuz you could just do flex-grow?
>> You could do flex, absolutely. Nothing wrong with that. You could do flexbox, if you wish.

[00:11:26]
I think you'll find for layouts like this, more people are tending to use grid than flexbox. Flexbox tends to be used when we have an unknown number of items. So I have something coming off the server, and I've got image. I'm Instagram, I've got some number of images coming off the server, I don't know how many images there are gonna be.

[00:11:45]
>> Right, and I need to somehow deal with that in a layout, I think people tend to use flexbox for that more.
>> Okay, I don't know how am I gonna phrase this, but could you do a media query and change the font size?
>> Sure.
>> Is that typical, so adjust.

[00:12:05]
>> Yeah, what would you like the font size to be? You want it to be bigger or smaller?
>> Well, I'm just thinking, I was trying to make a website and I set something to 16 pixels, it looked good on a desktop.
>> And then I saw it on my phone and it was way too big.

[00:12:20]
>> Yeah, okay.
>> So do people usually account for that for a p tag?
>> Absolutely, you can, but because of the way we wrote our fonts, we have a very cool way of doing that, okay? So let's just take a look at that real quick. Let's say we wanted to change our font size here.

[00:12:38]
We can go back to root, and we can change our base size to 2rem. That's all we have to do. How awesome is that? Literally, change one variable in our media query, and it affects everything. Okay, or in addition to or instead of, obviously, you could also change your scale, right?

[00:13:10]
So we had a scale of 1.25 before or something, right? Let's say we want it 1.414. That actually didn't change much. Did I call it scale?
>> Yeah, it made tour bigger.
>> It made tour bigger. Yeah, it may be less obvious with the other stuff. [INAUDIBLE]
>> Mm-hm, yeah, I think we get a bigger bang with the base size, but this is one of the wonderful things here.

[00:13:42]
You can do other stuff here too, like I don't want white to be white anymore here at this media query. I don't know why you would do that, but let's just say that that is true. White now has a value of red, okay? So there you go, [LAUGH] okay?

[00:14:05]
Just cuz you can, doesn't mean you should.
>> [LAUGH]
>> But you can change the values of any of these variables, yeah? Okay, all you have to do is put it inside of root. So the logic is really abstracted, this is the cool part of the CSS. The logic is abstracted to that top of the webpage, and now here we just change the variables and use the same logic to process them.

[00:14:28]
Pretty awesome. Okay, we really don't wanna do that. [LAUGH] All right, any other questions here on what's going on?
>> So in Tours, the tour dates are going as a row?
>> Yes.
>> Could we change those to be a column with grid easily?
>> You mean going in a vertical direction, a series of columns?

[00:14:57]
There might be a way to do that, but there's another way you could manage this, which would be you could just say, I think it's just columns: 3, right? Yeah.
>> You're saying having the image in one column straight down?
>> No, I mean like when I originally read Tours, it's 31st and then second then will below it.

[00:15:30]
>> And then eight.
>> Yeah, that may be a reason to do a flexbox.
>> Okay.
>> For sure, cuz then you could definitely put that in columns.
>> Got it.
>> Yeah, this columns: 3, it's just another way to lay things out, you have very little control over how many columns there are, or their spacing, or anything else.

[00:15:51]
It happened to work really well right here, but this is another way to do this. More commonly, columns like this is used in, let's say you have an article and you wanna have two columns of text, and you don't know where that break in the text is gonna happen.

[00:16:04]
Using this column's property here, you could say it has two columns, and even if the page is shorter or longer, it'll format the text into the right spots. Yeah, okay? So let me put it back to the way it was.