Moons of Saturn: Mobile Layout

[00:00:00]
>> Now that you have learned all of these interesting little tidbits about grid, all of the interesting kinds of syntax that are available to you, min-max, the ability to overlap grid cells. The ability to work with subgrid, all kinds of other tips and tricks, we're gonna put this all together in a exercise that we're gonna step through here as part of this video.

[00:00:21]
So, just to show you what we're gonna wind up creating, we are going to put together a page about The Moons of Saturn. And we will start off with, again, a featured card and then underneath of this we gonna have some other cards that are less important potentially.

[00:00:40]
And then down at the bottom, we have just some headlines. This is likely a pattern that you'll see a lot on news websites, you'll see like a big featured news article, maybe some that are less important and then you'll see a whole bunch of headlines. So that's the pattern that we're working with here.

[00:00:55]
We've got a very mobile kind of layout, very narrow screen. When we get a little bit wider, we gonna go to two columns, okay? And then still our headlines stacked underneath. When we get to tablet, we're going to put, two items next to that featured item. And then underneath we gonna have, some other various kinds of displays.

[00:01:17]
And then when we get to desktop, we're going to put all of our images up on the first row, and we're gonna put all of our headlines down on the second row. You're gonna code all this mostly on your own. Yeah, you actually have all the ability to work on doing this.

[00:01:32]
So my advice to you is, we're gonna start by reviewing that HTML, looking at those designs and then just focus on the mobile layout. This is the first part of what we're going to do. So right now, just focus on this mobile layout and consider how you might layout this page, because if there is no card, the cards themselves are simply stacked going down the page, that's a hint.

[00:01:57]
What we have going on inside of each of those cards, they are less than 500 pixels, is some kind of layout inside each of those cards. And then down here on the bottom for these headlines, that treatment is slightly different, okay? So you actually probably have two units of things going on here.

[00:02:13]
We have the image based unit, and then we have the headline based unit. And they're gonna require slightly different treatments. So if you open up your, opening CodePen here, what I recommend that you do is start just like I have showed you before. Flatten up your HTML so you can see the structure of your HTML, okay?

[00:02:32]
So we have a title, we have a series of articles here that are our cards, and we have an unordered list that has a series of headlines inside of it. You can dig into that HTML, of course, each list item has a link with a text. For each article, it's going to have some kind of image on the top, it's going to have an h2, it's gonna have some text, and it's going to have a button based link.

[00:02:59]
And down in the JavaScript, I've given you the instructions as one giant comment, and I've given you a little bit of starting CSS here. We have our border box model at the top, we have some, just some basic styling for our fonts, our images, and a basic button background.

[00:03:19]
So that's just enough to get you started. See if you can just work on the mobile layout part of this. Remember to make your mobile screen small, make sure it's under 500 pixels. And then see if you can start by laying out those cards within this particular design.

[00:03:40]
All right, so hopefully you've gone through this first part of this exercise where you set up the mobile layout just like we saw on the course website. So at less than 500 pixels, you should have one card that's gonna look slightly different than all the others. These additional cards you're gonna see a picture on the right, you're gonna see all the text in the button over here on the left as we scroll down.

[00:04:05]
And then down on the very bottom, we have three headlines and we have some lines between all of these. So let's see how I went about writing this. So first of all, do we need a media query?
>> No.
>> Why not?
>> Because you've mobile first.
>> Exactly, this is mobile first.

[00:04:23]
So, these are the mobile styles, they're the default, there's no media queries that are necessary. So, where I got started here, first of all, I said my h1, and I said padding: 0 1rem and that was just to get it off the edge of the page, okay? So that's all I did.

[00:04:44]
That's actually not part of our card system, but I did want it off the edge of the page. Then for my card itself, tell me how I'm gonna go about styling this, what's the first thing I need to do?
>> Apply display grid.
>> Display grid okay, display grid.

[00:05:02]
And so an interesting misconception I was heard from one of the students, which is that when you work with flexbox and you say display flex, immediately your screen changes. But when you say display grid, nothing changes and you feel like it's not working. That is actually just kind of the way these two specifications work, with grid, you gonna have to give it more information about rows and columns, with flexbox, it just defaults to a row right away.

[00:05:28]
So just something to be aware of when you see nothing happen, don't panic. Okay, so after display grid, what is the next thing I'm going to do.
>> Grid display column or grid template.
>> Grid template columns, yeah. Grid template columns, and I didn't really give you any specific dimensions, but it's probably something like 3fr 1fr.

[00:05:55]
So maybe about one third in that, or sorry, about three quarters in that first column and about one quarter in that second column, okay? We gonna wanna separate them by a border, border-bottom, 1pixel solid, ccc. Then I'm gonna give this some padding, 3rem, 1rem, and maybe I'll give us a little bit of a gap.

[00:06:23]
And I'm gonna make my column gap and my row gap different, so I'm gonna say my column gap will be something like 1rem, my row gap will be something like 0.5 rem, okay? So we kind of have the outline of a card there, although everything is in the wrong place, okay?

[00:06:44]
So what does that mean? What is the next thing that I have to do? Maybe I should try getting my image out of the left column and put it over on the right side, yeah, okay? And how would I do that? .card img, then we're gonna say our grid column is where.

[00:07:11]
>> 2/3.
>> 2/3, exactly, and my grid row is what?
>> 1/3.
>> Yeah, 1/3, because we want that image to span over all of the rows that are here. Or at least the one from the headline in the paragraph, I guess it's what I've got. Okay, for my h2 then .card h2.

[00:07:45]
You can optionally tell it where to go grid-column 1/2, it's already there, but you could put it in if you want and margin 0. They'll just tighten everything up just a little bit here. And then, that pretty much takes care of all of these cards here, these four, but our featured cards a little bit different, yeah?

[00:08:13]
That's a very cool picture and now we've made it so tiny we can't even see it. So, this first card, how would I select that first card? What is my selector?
>> First child.
>> Yeah card, first child, the very first card. What are we gonna do? Anybody have a suggestion for how I can can style my first card?

[00:08:36]
>> Display block.
>> How about display block? In other words, let's just turn off grid altogether. Actually I know why it was going on. Card first child isn't gonna work in this particular situation, why? What is our first child? Well, first of all, what's our containing element? The body is our containing element here, okay?

[00:08:58]
The body is containing all of these. What is the first child of the body?
>> The Moons of Saturn.
>> The h1 is the first child of the body. So, card first child, there isn't one, but, there is one of card first of type. So this is the difference between first child and first of type.

[00:09:17]
So first child literally means all of the children, whoever they are. It's just like we have girls and we have boys as children, right? And so for those children, the first child is whoever the first child is, right? But we can also say we have a first boy, and we have a first girl, yeah?

[00:09:36]
[INAUDIBLE].
>> Exactly, in this case, this is just first of type, and that'll select that first card, all right? Now let's deal with the end of this. So this is all looking pretty good. Let's go all the way down to the end here. So at the end, the very bottom there, we have our list.

[00:09:56]
List is the right markup because, of course, this is just an unordered list of titles that could be appearing in any order. But we need to give them a little bit of styling so that they look like this. Again, we still want to have the lines in between them.

[00:10:10]
We want the text a little bit bigger, we want it bold, and we want it green, and the text size is about the same size as our h2, okay? So anybody have any suggestions for how I might go about dealing with this? The first thing I'm gonna do is I'm actually gonna give this a class and you don't have to, you could just work with the ul and li and that would work just fine for the purposes of this example.

[00:10:42]
In real life, chances are you're gonna have more than one unordered list on the page like starting with the navbar, the navbar should be an unordered list. So a class is generally a good idea here just for the future, you're gonna add more lists, most likely to this web page.

[00:10:59]
And so now then I can say my class of additional. The three styles you're gonna use any time you don't want your lists, whether they're ordered or unordered, to appear as just text on the page stacked on top of each other are the following. You're gonna wanna say list style type of none.

[00:11:27]
And that is gonna get rid of the bullets or the numbers depending on what you whether you're working with an ordered or unordered list. And then we're gonna say padding: 0, margin: 0. These have historically been somewhat uneven some browsers have done padding, some browsers have done margin.

[00:11:46]
By zeroing up both of them, then you cover all your bases. Okay, then, after that we can say .additional li. So for those list items, what are we going to do? We need to make it bigger, font-size: 1.4rem. We made a make them bold so font-weight: bold. We need to have the border in between them, just like we have for everybody else.

[00:12:18]
So, border-bottom: 1px solid #ccc. And then we just need to give them a little bit of breathing room. Padding: 3rem 1rem. And that'll give you a little bit of space in between all of those, okay. And then of course, the last part of this is styling up the links themselves.

[00:12:50]
So we can do that additional a. And the color here, I'm not entirely sure what this color is. Let's see, let's go stroll down to our button here. The same color as our background color of the button, so we'll just copy that. And we'll make that the same color as our a.

[00:13:16]
Obviously, you could be using CSS variables in order to do this, and then that would make things a little bit easier. Oops, and I have to spell additional right, there we go, okay? And then, we could give this a hover state if you want, [COUGH] .additional a::hover, text-decoration, none.

[00:13:41]
So when we roll over our links, the underline disappears.
>> I guess CSS resets kind of out of date now then, right?
>> You can absolutely use a CSS reset if you want. There are various levels of reset. But there are some that normalize it. So whether it's padding or margin, you can normalize all that resets will actually turn everything off and then you have to actually re-code all of it, which I think is personally I think is a waste of time.

[00:14:08]
If I was gonna go anyway, I'd use a normalize, and it just depends on your personal preference. In my case, I think it's a little bit much for a lot of these exercises, so I tend not to use it. But if you like using it, there's absolutely nothing wrong with including one.

[00:14:22]
Certainly, you have a normalized style sheet as part of Bootstrap, I think it's in Tailwind as well.
>> It's not as necessary as it used to be.
>> That is true, thank goodness the browser manufacturers have actually, we continue to standardize. It's a 20 year process, [LAUGH] we'll get there one day, hopefully.