Home Page Content Spacing

[00:00:00]
>> Kevin Powell: Let's go take a look again at the new design and see what we need to do now that we have those colors in there. The top area has a really big yellow background on it, very shiny, gets everybody's attention, and then we have that section inside of there. So we'll start with that. Where that means over here, I do need to make a change because I need something to have that background. Right now I don't have anything.

[00:00:23]
So for that, we could use something like a section if you wanted to. If you just use a div, it's completely fine. We'll come in with a div because it's all sort of part of the main content. So I'm going to use div. If you want to use a different one or a section or something else, you can, and I'm going to close that down here. So let's just save that. I'm going to turn off my word wrap for a second to show the structure.

[00:00:46]
I have a div starting here, closing there, H1 image paragraph all inside of there. And now I have to give that a name. So let's give that a class is equal to. I'm going with hero. I don't know, I never know what to call these things. Top of the page, it's a common naming convention. It's a little bit outdated now probably, but I still use it. So if you have a better name for that top section of a website that gets people's attention, you can use a name that you'd like there.

[00:01:15]
So hero, that's all of this. It has that bright background color. Let's go and add it. As far as organization right now, actually, I'm going to talk about it more later, but I like having all my generic stuff first and then coming down and adding more specific things later. So we had the lead, the next one we can come down is now my hero. And we had the background. Background is going to be my var accent, oops, not accent, color accent 400 and oh, I can't read some of my text now.

[00:01:49]
So I need this area also to have another background, right? We had the background on there and we have this inner part that needs a background too. OK. So we come back to here, go back to the HTML and now I need something in here. I'm going to use something, it's a bit of a BEM naming convention. Oh, no, I won't use the BEM, but BEM would be something like this with a double underscore, where you might have inner or layout or something like that to have the inner part of it.

[00:02:14]
I'm just going to call it, we're on a really simple website, we don't need to worry too much. We can just call it hero layout. We could call it hero content. Anything like that would work. So again, naming things can be hard. Descriptive is a good idea. Now I need to come in. Now my hero content needs a background color. I didn't add that variable, so we're going to do that in a second. V. Color, I'm going to call it neutral 100.

[00:02:42]
I talked about that and then I actually removed it because I knew this lesson was coming up, where we needed to add the colors in. So, oh, I did it. I thought I deleted it, but I left it there. So my color neutral's there. But now I've run into another problem. I lost my yellow background. Where'd my yellow background go? It's underneath. It's underneath, yeah. The problem is I have two elements that have the same size.

[00:03:07]
The child is defining the height of the parent, right? So because the more content we add defines the height. We saw that with the default behaviors. So that means I need more background. I could come here and say this has a block size of, I don't know, 800 pixels. Not big enough, apparently. This is the fun thing of sizes, 1200 pixels. There it is, maybe the 800 is big enough, but we can see it's coming at the bottom now, but then I have to worry about centering the other content, it all becomes really hard to do.

[00:03:41]
We don't want block sizes. Don't want min block sizes, sometimes you do, but most of the time. If you need more background, what do we add? Padding. So padding, for now, let's just throw a number on there to see what it looks like. This is part of being like the developer thing is sometimes just throwing numbers at things, seeing how it shows up on the page and going from there a little bit. I'm going to resize that a bit, so, OK.

[00:04:08]
It's not fantastic, but at least we're getting somewhere. Hero content now, all the text is touching the edges. More background, we need padding. So I declare background, I declare pat, whoops. A declarative background, generally speaking, if you have a background image or background color, you're almost always going to have a little bit of padding on there. So now I can add a bit of padding there.

[00:04:27]
I'm going to zoom out a bit more on this side just because, just so we can get a better idea of what it looks like, and my monitor's a bit small, so we can see the entire thing. It's not perfect by any means, but we are getting there. We have something that's sort of coming together. The design itself doesn't have the image, but I'm going to leave the image there. It looks fine. Let's go back and take a look at the design again.

[00:04:50]
We want to change the link out for a button, we can do that in a second. We also have this center aligned text that's right here. So all of the text is center aligned. So let's go take a look here. I have an H1 image paragraph, so I could select each one of those to align the text. Image, I'm not sure throwing a text align on that would do much, but on the H1 in the picture I could. But once again, we're talking about something that's related to text, where if we're styling text, that's always going to be inherited.

[00:05:21]
So I can just go on my hero or the hero content, really doesn't matter which one you select in this case. I could declare it once and rely on inheritance to center everything that's in there. So if I come, let's do it on the hero itself. I always tend to put things as far out as I can get. I don't know why. If you put it on the hero content, it or hero layout inner whatever you call it, it would work fine.

[00:05:48]
So text align center and fun thing, it will also center the image. If you do a text line on an image, it will not center it because an image isn't like you're centering the thing inside the image, it doesn't make much sense if you select the image itself. Images by default are inline elements, so if you center and do a text align center on an inline element, it behaves just like text does, and it's centering with everything else.

[00:06:14]
This is by default, we're going to see a few other things along the way too. And so yeah, it's coming together. That area looks OK. There's potentially some problems here, we can come back and address, but I think that's looking not terrible. Let's keep on going. We can, I said we had this link is going to get turned into a button. So let me just resize that a little bit here instead of that. I can just come in with a button down here.

[00:06:42]
Like you could also leave it as a link if you wanted to, but if it looks like a button, I'm going to call it a button. It doesn't really matter as long as it has a class button on it, we can make it look however we want. Thought of something that might be good to look at, but, that would be start learning and I can save that. So I get this little button down here. Now buttons have a problem with them that we talked a little bit when I talked about inheritance.

[00:07:10]
They don't inherit the font properties. We can see that right now because my font is super tiny in there. We don't always notice it's not inherited because it's a sans serif and usually we're setting the properties of our buttons to be, or of the rest of our page to be sans serif, so the font, you don't really notice that it's different, but it is subtly different. But the main thing is it's super small.

[00:07:37]
So why don't we come up, I'm going to go right here and say that anything that is a button, or we could even come in with the more traditional selector of button for that and say font inherit. The font inherit is a shorthand for all of the font related properties, your font-family, your font-size, font, what else is in font, I'm not sure, but they're all, it's font style. All those are coming in, and you can see my button got bigger, it's using the right font-family and a few other things.

[00:08:04]
I don't like using the font-family for much because the font-family, you have to have things in a specific order, if I remember right. I find it a little bit confusing. I tend to use the longhand of just declaring my font-family, my font-size, other things, it's a lot easier to read, but, you can use the shorthand for everything if ever you wanted to. Now we're going to do the rest on a button class like I mentioned, just because I like being having this as reusable to use on links or on buttons.

[00:08:40]
Where we can come in and let's give this a bit of a size. We don't need size, we need a background color, so background color of our color accent. This is the one using our new color that we had 300. Sorry that it keeps jumping up the page. Buttons have borders on them by default. One of the few elements that has some extra styling. So border, you can do 0, that will work. That's gone. I'm going to take the image out for now, because I don't like it jumping on me all the time.

[00:09:10]
So now if it does move, at least we'll still see our button. Yeah, so the border zero works. You could also say border none if you want to sort of be more explicit. Either one of those is fine. I tended to put 0 because it's less characters for me to type. And then we need more background. More background means padding and a reintroduction of units again. We could come in with just pixels. Easiest one to use if you use them here, there's no problem whatsoever.

[00:09:42]
On padding of elements that have a background, I like using em. So I'm going to say 0.5em 1 point, yeah, we'll try 1.5 and see what happens. For button padding, I often have this where the top and bottom, oh, I don't know if I did the shorthand before, this, when we do, oh yeah, we talked about that. So the first two values is the top and the bottom, the second two values is the left and the right.

[00:10:04]
I tend to do the left and the right, much bigger than the top and the bottom, and it tends to give you a nice shape. You play with the numbers a little bit, and it works OK. The reason that I am doing the padding using em and not something else, is I want the padding to be related to the font-size once again. Em is always looking at the font-size of an element. So now on the button, if I change the font-size here, let's just say it's, I don't know, 2rem, make it really big, the padding will grow with it because this padding is looking at the font-size of this element.

[00:10:42]
Or if I make this a lot smaller, I don't know why we'd go so small, the text will get smaller, the padding will go with it, so it just keeps that relationship between things. It's really what em is really good at, so that's why I'm using it here. If just for fun, we did do this as rem instead. It's going to, let's make it really big. You start seeing it more when you exaggerate your sizes, but like, you see the relationship's changing a little bit, it's looking a little bit more cramped, and if I was to make this really small.

[00:11:13]
It starts feeling bigger and bigger than what it was before. So it's not super obvious, but it is one of those ones where it's nice to keep that relationship, so you don't have to worry about it too much. We have a button. It's a thing that people can interact with, and we want them to be able to make, you know, to know that they're going to to be able to click on it. So once again we can come in with a hover and a focus-visible.

[00:11:39]
So button hover, comma button focus visible. So we've covered the box model, but as we come in and start doing things, this is what you're going to find is you're going to be repeating a lot of the other stuff that you've also learned in styling the thing. It's very rare that you just add padding and then you add padding and then padding, right? So it sort of gives us a nice opportunity to rehash some of the things we've already covered.

[00:12:11]
So for this, let's just keep it really simple. You can choose your own colors because we don't have this in our design. I'm going to use the black, which is my neutral 800 and my color can be made var color, neutral 100. One thing I just noticed. No one commented on it. I might have done this somewhere else too. Here I've used background color, here I've just used the word background. Background's also a shorthand.

[00:12:38]
For now, we won't worry about that. I'm going to write background color. If you're only using a color, later we're going to look at images. If you're only using an image, you can just use the shorthand and you won't really see a big difference, but we'll stay explicit there. And did I misspell neutral? Background back, yes, thank you. There we go, so we get a hover effect. Nothing's going to happen, the button's not, we don't have a modal or something, but we'd assume this would bring them to like a page where they can buy something.

[00:13:07]
If I'd come here, and I haven't talked a lot about block and inline elements, on this button, if we change it to be a link, and I just give it an href so it's not broken, I would be fine if we didn't, but. We can just give it an href that's not going anywhere. Notice how a few things changed, the color of it I'm not going to worry about, but you notice how the positioning of it has actually changed a little bit.

[00:13:38]
It's moved up, the padding is actually covering a little bit of the other element. Does anyone know why that happened? Yeah, display inline by default. Yeah, and that's why is that changing it? Well, is a button is, oh, so like, so it treats it as inline text. And then I think so inline, does it not use padding top and bottom? Correct. So it's really weird. So an inline element, you can put padding.

[00:14:01]
I'm going to make the padding much bigger just so we can see this happen. But the padding is visibly there, but it doesn't make the layout change at all. And this is one of those weird behaviors that comes up and people are just like, I don't get, I have padding, why is the padding not moving the thing? So the reason for this is, as you said, it's an inline element, and inline elements are like our span that we had over here.

[00:14:29]
They're meant to be within text, and if that padding were adding like space around it, how would that work in the middle of a paragraph? It wouldn't, your whole paragraph would essentially break. Same thing with margin. Interesting with margin. 50 pixels. It doesn't do anything. Margin won't work on inline elements, but with the padding, it's visually there, borders as well, they'll be visually there.

[00:14:54]
The left and the right is working. It's the top and the bottom where they just cause this extra space. So it's really common on button elements if you have a class that you'll come in with a display of block, so it's very common on things that you want to be blocked to actually do a display of block, we're changing it away from the original type it was an inline element to now being a block element and you can see even though it's a link, it's actually creating that space now and the padding around it is actually impacting the layout that it was before.

[00:15:25]
So a little side tangent there, we can actually take advantage of this type of behavior up here in the heading as well. So if I make this larger, but at this size, it looks good, but right here where it's coming across two lines. So the whole point of an inline element is just to flow with the text and do whatever the text is doing. But sometimes you want these types of things to actually always break across two lines.

[00:15:50]
If I look at the design, it's always the black text underneath it is the big title. So even though this is a span, we can take that same approach over here, and on that span, I can say this is a display of block. And then it's going to force the line break. You might not love it because of this type of thing that can happen where you end up with one word by its own. Depends on the design, the situation you're in, but it can be really handy to be able to do that type of thing.

[00:16:23]
The alternative to that is in the HTML you could come in. And after the span, you could always come in with a BR for a line break. If you have to put a line break after every single span. Just do a display block on the span, then you don't actually have to go in the HTML to make the change. It just, it's sort of an included thing, you're including the line break by making it a block element. Block elements always take up the width, always force new lines, so, it's just a nice little sort of cheat there that we can have.