Styling Landmark Regions

[00:00:00]
>> Kevin Powell: All right, next up we're gonna look at the landmark regions, which are things like our nav or header, footer, article, section, aside, and so on. I think on this page, or no, I probably did it earlier on where I linked to, no, right here, this link right here does give you a bit more information.

[00:00:16]
It's from the w3.org, just on what being a landmark region even means, but they do help with assistive technologies, where people can navigate directly to different landmark regions on a site, so they can get through them a bit faster. Other than sections where I mentioned a bit earlier that you have to do a bit more work to get that to work, the one thing where I already did it, where we had the site header earlier and the site footer primary navigation.

[00:00:40]
These types of things, I really do think when you're using these landmark regions, you should give them a class and not just style them based on the selector because they can be, other than your main all of them can be reused in different ways. So classes really help out just to distinguish the different ways they can be used.

[00:00:58]
And so we're gonna get into some of the more specific use cases for them, but there's one very generic one, which is your section. And the section tends to be something that's just more generic than everything else. So for the section, I do like actually doing a section class, because there will be times you might have, like right now, when we're looking at our design.

[00:01:18]
We have these just sections of content, but then you might, the client comes back, they want to blog, and there's articles, and in those articles, maybe you have sections, and then those sections need to be styled a bit differently. So using the element selector, I'm always a little bit wary, even though it's kind of annoying sometimes to just come in and have a section.

[00:01:38]
I am, I do personally think that putting it in the layout makes sense.
>> Kevin Powell: And coming in here and just doing a section. For me, it's layout-ish because all it's doing is creating some extra spacing every time I have it. And that's just because every time I have a section, I need some space on the top and the bottom of them.

[00:02:00]
There's two different variations of this. You might have noticed it, or you might not have, and if we look actually at the smaller screens, and this is where you're just going back and forth between figma, looking at things, how much space is there, grabbing, and here you dive in deep enough.

[00:02:16]
You'll get it highlighting. And in there's like a padding section in the UI that will show you how much padding is actually in that area. So you can grab those padding numbers and use them. So yeah, we'd want to grab those numbers and use them for there. And you'll notice in the mobile version of it,if you go through and examine them all, you caneyeball it.

[00:02:36]
Once you see the first one and then you look through everything, the spacing is always the same, but when we get to the desktop versions, there are differences. So in the desktop version here, this one is a little bit narrower than here. This is big, this one's a bit tighter, top and bottom.

[00:02:52]
This one goes back to a larger space. And on the second page, the hero is the same. Larger space, I think these two are larger, and that last one is tighter again. In general, you should see this consistency between things. You might have these, a container, a container narrow, container wide.

[00:03:12]
You might have the same thing with your section spacing, but you probably shouldn't see a different value in every single one you go into. If you do that, your designer's not doing a very good job as a designer, cuz designs should have some consistency throughout them. So if you do see everything as different, you can freelance it a little bit and just choose a value that you'd wanna use.

[00:03:33]
Oops, just to know if you want to zoom in, the shortcut in Figma is space bar and then command, or if you're on Windows, space bar then control, but you have to push the space bar first. If you do Control or Command first and then push space bar, it doesn't work.

[00:03:47]
It's kind of frustrating. But space bar just so you can zoom in, like that. Now, because my UI is zoomed out so much, I can't see my values here, but I would take the same approach that we looked at. So in this case, it's the top and the bottom.

[00:04:02]
We know it needs to include the background color. So I would do padding-block. Just like we were using our margin in line before to add spacing on the left and the right, padding-block is only gonna add the padding on the top and the bottom, so our block axis going up and down.

[00:04:18]
Again its a logical property. It's, for me, nice to do that rather than saying padding three REM zero, just cuz then you might want to overwrite that zero on one specific area or something. So padding block only, top and bottom. I forget what it is. I'm gonna put two numbers in here and then verify them after.

[00:04:38]
But we could have the padding block like that, and then we need a media query because we need larger sizes. And this, again, is where nesting is my favorite thing in the world, because you can include the media query within the selector, so you don't have to repeat the selector, which makes life easier.

[00:04:53]
It just keeps organized. Every all the code for my section is here, I don't have to stress about scrolling down, finding a media query somewhere else. Where is it? It's all in one spot. The one thing people have asked me about is by then you end up with tons of media queries, because every component, every element, ends up with a media query.

[00:05:10]
Does it bloat the code base? Basically every host now does compression server side of your CSS file, and the thing they're really good at is compressing repeated code. And I've done tests with media queries like 10,000 media queries and I remember what but it was like 700 kb file that turned into like 32 bytes that was getting delivered to the user just because the compression is so good.

[00:05:34]
So if you're repeating media queries really don't worry about it. If you're worried about optimization of file size if your CSS file, it means you're pretty good, cause every compress one of your images a little bit better and you've probably saved more than you would off of the compression of your CSS file, we're optimizing it.

[00:05:53]
I think I did 760 last time. We're gonna talk more about breakpoints once we get to the columns and deciding where they are. So I'm just using that number and I'm using the range syntax once again. And here I would just say padding block is I'm just gonna use six again I think these numbers are wrong.

[00:06:10]
So I'll verify that in a minute but we'll come and take a look at the website and then go back to my html and I'm just gonna use Control + F, if you're on Command, Command + F to open up the find. And I'm just gonna look for all of my sections so I can add that class to them.

[00:06:28]
And again, you could select in this project. If you did it directly on your section element as your selector, you'd probably be fine, but I'm just thinking big picture. It's not that hard to come in with a class of section on there. If you want a different name for it, you could always do like padding large something I don't know.

[00:06:49]
I just like keeping these things simple. So in each one of these, I'm just going to add that on there. Use my search feature to get to the next one. You could even do a find and replace and do it quickly. You could end up with all of these at once.

[00:07:03]
There's a lot of different ways to speed yourself up as you're using VS code if you're fancy with it. I use this all the time, and I'm not a power user.
>> Kevin Powell: So I can see that I brought some space in here. Now my content isn't all jammed together and all touching each other, another space coming here, another space coming here.

[00:07:22]
So I've done something right. At least my styles are working. And when I increase the size of it, there we go, you can see that the space got bigger because we're hitting that media query breakpoint.
>> Kevin Powell: The one thing, as I mentioned, is in the Figma file, we do have the different sizes that are coming in.

[00:07:40]
So some of them are smaller and some of them are bigger. So let's go get the actual sizes that I did provide. So, 3.75 up to eight and a 4.5. I'll try and remember that. So this should be a 3.75. This should be an eight, which is very big.

[00:07:59]
And if you got the sizes directly from the Figma file and using pixels, it's that same debate. If the user did increase their font size, do we want the font size to increase this padding or not. Maybe you'd prefer to be coming in and actually using pixel values here.

[00:08:12]
Most of the time, users are zooming in, but there are users who do change their size of their font, so you do wanna take that into account. With nesting, we do want to be a little bit careful, but we do want to modify our class here, and I don't mind coming in one more level here and creating that modifier.

[00:08:31]
If you're doing it with the modifier classes, rather than the data attributes, you would have to come outside and do the section. I'm calling mine compact just because we're compacting the padding on the top and the bottom. So you could create a new selector here and then have the media query for that one there and then change it.

[00:08:52]
For me, because I'm using the data attribute, I can include it right here and do my ampersand and then data padding = compact. And then we could change the padding on there. Whoops, sorry about that. I didn't realize that put the variable. I think that was eight rem, there we go.

[00:09:21]
In this case, I just realized I'm not doing this with a custom property. I'm just changing the value of this. Why I did it here, actually overwriting the property and down below with the wrappers. I did it with the custom property 4.5, sorry, 4.5rem. I don't have a great answer for.

[00:09:47]
So I think I'm actually gonna change this to use a custom property to be more consistent, 3.75rem. You don't need to, it's just a habit I really like having. This could even be padding block, but that's the only value that would change or be the top and the bottom, so I don't mind doing it this way.

[00:10:07]
So that would be var padding. And then for each one of these, we can switch that out right here. I'm gonna push Ctrl+ D. If you're on a Mac, it's Command+D. it's gonna select both instances of it, so I can just replace both at the same time. And so we have the padding that we should have some larger ones and some smaller ones.

[00:10:29]
We're gonna be coming with the background colors soon, which is gonna make these a lot more obvious, but I can see the compact one is already, I have a lot less space coming in here, which I'm gonna have to verify cuz some of the spacing looks a little, no, I think we're I think we're good.

[00:10:41]
Yeah, we have less spacing there we have more spacing on the other area, maybe. I might have to come in. I don't think I used that yet. So all the way at the top, we had the hero. So the hero, I am actually gonna add a section to that.

[00:10:58]
We're gonna talk more about the hero in choosing when something is gonna use a class like this, which is more like a utility class, versus when something would just get styled on a selector like that one. But I think for the hero thing, putting the section here makes sense, and then we can just come in.

[00:11:15]
Let me just turn word wrap on for a sec. So we can have our section with the class on there, and then I could say that the data padding = compact. And again, I just find it's more, using the data attributes like this, is the alternative for this would be section and then probably section compact, which I find having section with padding compact is just a bit more descriptive of what's happening.

[00:11:44]
You could, of course, do the padding compact like that as well instead. I just find you don't really see people doing modifiers that way. They usually try and keep them short. So with the data attribute, I find that's one of the reasons I like it is I find I become more descriptive in how I'm what things are doing, and that's why I like using them.

[00:12:04]
So we had that section, and then we also needed it down on this one, start your forging adventure. So I'm gonna look that up. Start your foraging adventure section data padding = narrow compact, sorry. There we go. And once we have the background colors and other things we should start seeing these come through a lot more.