Column & Cover: Mobile Layout

[00:00:00]
>> The next thing I'm gonna have you do is I'm gonna have you code, what? So we talked about the layouts. We've talked about things to watch out for. We've coded our semantic HTML. What is step three?
>> Mobile first.
>> Mobile first, right? So the next thing you're gonna work on then is the mobile design of how this is supposed to look.

[00:00:23]
So in this step, you might wind up adding some divs or spans if needed to add classes, right? So you're gonna need to style this up, just to work on mobile. That is all you need to do, make sense? We'll come back and we'll talk about the answers to the mobile results, sound good?

[00:00:44]
All right, so remember that when we talk about mobile display, this is our default styles. They are outside of media queries, so they're no media queries involved when we work mobile first. This is what you get by default, and then we're gonna use media queries as we go to larger size screens.

[00:01:05]
So we don't need to set up any media queries or anything else as we put in our CSS, we just start writing it. So what I'm going to do here, let's start from just to point out a couple of things that came up here in the classroom, the button up here at the top of the screen.

[00:01:26]
If you don't have your code on the left or the right, whichever you prefer, these buttons here at the top will change that orientation and will make this work much easier for you as we're working with responsive design essentially. Notice that as you grab the little divider here and pull it to the side, there's a tiny number that comes up down here on the bottom.

[00:01:50]
That will tell you exactly how wide this window is, the display window here. And I said in the website, Scroll back down here, this is less than 600 pixels. So what we wanna do here to set up is have this to be less than 600 pixels. So I've got it at 428, whatever.

[00:02:14]
You've got something like that. So I know that once again, I have some things I need to do. One of the things that happens, if you look at the word convenience here, kind of a big, long word here in the title. As I make the screen smaller, I do get to a point where convenience starts to scroll off, okay?

[00:02:33]
So we may want to make our font sizes a little bit smaller. Could just be the heading or we could scale overall? And I went through this with you earlier in our base styling. We had talked about all of the things here for our font scale. One of the things that we could do is change either our base size or our scale in order to reduce the size of our fonts overall.

[00:02:56]
So I am going to do that here. The very first thing I'm going to do is declare root once again. And I'm going to declare my scale to be 1.15. Because then everything is going to reduce proportionately overall, and that word convenience doesn't scroll off until I get to 247 pixels.

[00:03:23]
So again, is that important? Do we need to go smaller, depends? It depends, it always depends. What devices are you supporting, right? All right, so this seems to be small enough to me for phones and such. So that's the first thing I'm going to do. Then as somebody had noticed, the word instant was a little bit bigger in some spots than it was in others.

[00:03:49]
And is it bigger here?
>> It was just on the browser one.
>> Yeah, it's a little bit bigger on tablet and it's definitely bigger here on the desktop. Did I make it bigger here? I think I made it bigger there. So to make the font size bigger on fancy text, We can just say our font size is var(--lg), the large size.

[00:04:24]
And notice that it doesn't grow all that much here on the mobile device because our scale is smaller, right? But it will on some of the other sizes as they come later, and we can change our line height to 1.2. We'll make things a little bit, give us a little bit more space.

[00:04:43]
Because now the words Instant Coffee Facts are wrapping, we wanna have a little bit more space there. Okay, now as for the article itself. So we have a header, right, and we have an article in our HTML. That's it, we have a header, we have an article. The header's already styled, basically, with that.

[00:05:05]
We're done. So now, all we have to do is worry about the article. Inside of the article, we have the following. We have an h2. We have a paragraph. We have another paragraph, another paragraph. We have our image and we have our footer, okay? So this is often helpful.

[00:05:26]
If you start collapsing your HTML here, it starts to surface the relationships between these HTML elements. And that is important because that goes into your CSS styling. So some things we can do here for styling our article, Are the following. We can say that the padding is something like 2rem, 1rem.

[00:05:52]
So that will give us some space at the top of the article, getting the heading off of the header, right? And it'll give us a little bit of space side to side, so that we're not into the edges of the browser window. We can also set a max width of 1200 pixels.

[00:06:09]
I usually like to do this because it becomes possible to have lines that are so long, maybe you've been on a page like this, where you're trying to read. And you read and you read and you read, and you go to the next line, and it's so easy to skip, right?

[00:06:24]
Our eyes are not designed to read lines that are this long. So we wanna reduce the width of our page overall to keep it readable, okay? So let's just set a max width of 1200 pixels. It won't matter here at mobile sizes, but it will later. Yes, Dinesh?

[00:06:40]
>> So nowadays, you're using secondary monitors-
>> Sure.
>> [INAUDIBLE] large size.
>> Yes.
>> So these will come into handy when we use those kind of things.
>> Yes, those extra large monitors, and you're gonna like the columns, too, for those extra large monitors. Watch those tricks coming up here.

[00:06:55]
Okay, I wanna center this on the page, margin of 0 auto. Now that I've given this a max width of 1200 pixels, as we get larger than 1200 pixels, so let me just show you what that looks like. Not so much relevant right now, but it will later.

[00:07:13]
What will happen, and my screen is too small to show you at the moment. Let's see, I zoom out a little bit. So you can see what happens as we wind up with, as Dinesh was saying, on some of those larger screens, if we have extra space, we're gonna distribute it evenly on either side and center this on the page.

[00:07:34]
Makes sense? Okay. We'll reset. Okay, great. And then, all right, so now we get to the good part. The big question here, basically, this is all formatted, more or less, except for the footer. And I'll just format that for you real quick. In our article footer, we can just say our margin top will be var(--lg).

[00:08:09]
Hey, we have a number, let's just work with it. That'll give us some space there. And then I can say, make my font size var(--small). Okay, so my citation is a little bit smaller than everything else.
>> Does it have to be article footer or we can just give footer?

[00:08:29]
Because here we just used [CROSSTALK].
>> If you do just footer, then it will apply to any footer on the website. In this case, it makes no sense cuz it's one page. Yeah, okay, then comes the fun part. So the fun part is, the image is here in the HTML down at the bottom, we wanna put it up here at the top.

[00:08:52]
How are we going to do that? There are two possible answers to this. Anybody wanna suggest one?
>> I was trying with an order, but it didn't work out. So I don't know why.
>> We will have to do some kind of ordering. But in order to do an ordering, how are we going to do that?

[00:09:08]
>> Flexbox?
>> You could do Flexbox or?
>> I looked at the hint, it's an object position.
>> Well, that's part of it, but not yet.
>> Okay, is it a grid?
>> Or grid, flexbox or grid. Those are our two options for layouts these days. Pretty much, there are some other things.

[00:09:25]
But generally speaking, we're either gonna use flexbox or grid. Flexbox is good if we don't know exactly how many things we have. We have a stream of images coming off a database and we don't know if it's gonna be 20 or 200, flexbox is great for that. But if we haven't design, we know exactly how it's going to work, you may choose to use grid.

[00:09:46]
And grid as what I'm gonna do a lot of today. So to get started with grid, the very first thing we're gonna, and by the way, I'll mention, I have a whole course that's devoted to flexbox and grid right here at Frontend Masters. And it'll walk you through all of this step by step.

[00:10:00]
But in brief, what we will do is say, display: grid. Flexbox and grid are all about the relationship of parents and children when it comes to the HTML, okay? So we always have to pick which our parent is gonna be and which are our children. So our article is going to be our parent, or the grid container, in this case.

[00:10:24]
And then that'll give us access to the h2, the three paragraphs, the image and the footer, as the children of that article. And we can rearrange them in space. What happens if I wanted to, for God knows whatever reason, I wanna reorder this element right here? Could I do that with grid?

[00:10:48]
If grid is all about parents and children, could I reorder?
>> We're talking about just children as immediate children?
>> Correct.
>> Then no.
>> No because is a grandchild of article, yes?
>> Or a great grandchild.
>> Or a great grandchild. Yes, correct, great grandchild, true, right?

[00:11:12]
So grid is not going to touch those elements inside a footer at all. It's only gonna touch h2, three paragraphs, image and footer. Make sense, okay? So for grid, then, we need to tell it how many columns we wanna have and how many rows we wanna have. So grid template columns will tell us how many columns do we wanna have.

[00:11:37]
And how many columns do we want? One column, one column here at mobile design. So then, we can tell it how wide we want that column to be, and I am going to say 1fr. fr is a unit unique to the grid. You will not encounter it anywhere else.

[00:11:55]
It doesn't work anywhere else except inside of grid. And fr stands for?
>> Fractal, something.
>> Fractals, the French, the something, right?
>> [LAUGH]
>> It's a fraction. One fraction of the page. Well, how many fractions do we have on this page?
>> One.
>> However many you want.

[00:12:16]
In this case, we're gonna say there's one and this column is gonna occupy that whole fraction of the page. Could I have just said something like 100 fr or 1,000 fr? [COUGH] Sure, one column. Now it's 1,000 fractions wide, makes sense? Okay, we'll keep it simple though, we'll just call it 1.

[00:12:42]
We're also gonna tell it how many rows we're gonna have, grid-template-rows. How many rows do we have?
>> Six.
>> Six, how did you get six, Andrew?
>> You counted the HTML elements earlier?
>> Yeah.
>> The h2, three p's.
>> One, two, three, four, five, six. There's six elements.

[00:13:08]
There's six children, so we want six rows. And the way we can write that is we could write it the same thing six times. Or we could say as a different shorthand here, repeat(6, auto). And auto, of course, is the height of the rows, automatic, whatever. We want it to be as high as the column.

[00:13:35]
All right, So, yep?
>> Sorry, what would the longhand be of that?
>> The long version? Yeah, what would it look like? auto, auto, auto, auto, auto, auto. Totally legit, you can do that, okay? But that's what you would have, otherwise. All right, good question. Okay, so as for this image here, one of the things that I'm going to do to this image is I'm gonna put a div around it.

[00:14:08]
And the reason I'm doing this will become clear a little bit later, but I'm gonna give this a div with a class of article-, img-wrapper. And this has to do with how the image is going to resize as we go forward. So I'm just gonna add it here and just say magic is coming.

[00:14:37]
Technically with what we have done so far, you don't need this div, but we will when we get to later layouts. And since I wrapped it around the image, this is just taking the place of the image by itself in that row. Make sense? Okay, so now what I'm going to do then is I'm gonna call my article-img-wrapper.

[00:15:00]
And now what I need to do is specify where I would like that image to display. So if we count these rows, you can think of these as having lines that go across the page, right? Our heading here goes from one to two, make sense? We count like humans, we don't count like engineers.

[00:15:20]
We don't start with zero, we start with one. One to two, and then our next one goes from two to three, right? Our next one goes from what? Three to four. The next one goes from four to five, all right? So right now, our image is from five to six.

[00:15:38]
Where do we want it? We want it from two to three. So we're going to say grid-row: 2/3. And that will move your image up right on up there to the top of the page. [SOUND] I saw that. [LAUGH]
>> What's the difference if I just put in a 2, it goes where I expect as well?

[00:16:04]
>> Basically, if you just say 2, it's going to assume that it's gonna go from 2 to 3.
>> Cuz there's another property where you could specify how many rows it takes.
>> Correct, so I could say, I actually want it to go 2 to 4. And in the design that we have, it will not look different.

[00:16:23]
It'll just make an extra row for the last item. I don't wanna get into that level of complication. But by always specifying the first number and the last number, you'll never be wrong. So that's why we do it this way. Yes, Mark?
>> There's a couple of questions online.

[00:16:40]
>> Great, love it.
>> Instead of the auto, can we write 1fr six times?
>> You could, let's try that. What do you think will happen? Anybody wanna take a guess?
>> Force each child to be the same size?
>> Hm.
>> That's what I would think, yeah.

[00:17:07]
>> One, two, three, four, five, six.
>> So they all size to the largest one?
>> They all size to the largest one, see that? That's probably not what you want.
>> Okay.
>> Okay, yeah, so they're all sizing to the largest one. So when we say auto, it's just gonna size to the content.

[00:17:26]
Now I'm gonna rewrite it this way, 6, auto. Yes?
>> Could you use figure instead of div?
>> You could use figure instead of div, that would be absolutely fine. You don't have to have the figure caption. The image is moving around in the design. So yes, figure would be absolutely fine instead of div.

[00:17:50]
Great suggestion, other questions?
>> I missed, sorry. I missed the explanation about dynamically setting the rows, is that not possible with grid?
>> Dynamic, like we don't know how many rows we're gonna have? Grid is smart enough that if we've called for six things, if we had 25 things, grid would continue to make rows.

[00:18:14]
It will just continue to make them. Even though we've specifically specified 6, it will make 25 rows of auto height in this particular case.