Styling the Hero

[00:00:00]
>> Kevin Powell: Up until now, we've been doing a lot of utility classes, a lot of very generic things that we're able to reuse over and over and over again in as many places as possible. Eventually you run out of those. [LAUGH] You get to some more unique areas, where you have background images, or where you have just unique font sizes, or other things that are happening, like we do with our hero.

[00:00:18]
And those things just need to be styled, there's not a lot you can do about that. And that's why I like utility classes, I like reusable classes, and at one point you sort of hit that limit of how far you can push them. For our hero, we could use a mix of utility classes and not, and I sort of did that a little bit already, not too much.

[00:00:38]
But I'm just gonna go look at, I have my hero flow section, so I could come on here because my hero should always be centered. So I could say this is also text center, and then I could also say that it's text high contrast. And then maybe there's something else I could throw on there as well, the font size needs to change as well.

[00:00:55]
So then I'd say, okay, this also needs font-size, I think it's the md one that we need on there, and it increases the font size that we need. And this is where I start looking at that, going, ugh, that's a lot. And I still need this hero class on here to be able to add the background image and potentially do a few other little tweaks.

[00:01:16]
When I have that, and I still, first of all, I'm hitting so many utility classes. It just makes me feel like, okay, maybe this shouldn't just be utility classes, maybe it's time to create a class. And that just compounds even more when I know I need to have a unique class to add some unique styling to it that I can't do with my utility classes.

[00:01:34]
So as much as possible, I'll leave a couple of them on there, and this is really just decisions. I don't wanna recreate flow and I don't wanna have to recreate my section spacing, cuz those work and they're exactly what I need them to be. But what I don't want is, all those other things, it's easy enough to include in a single selector, and it just means less confusion.

[00:01:55]
If I'm needing to make a change, I look here and I go, there's no text alignment or no font sizes or other things, I know that that's just gonna be on the hero selector. This is just finding that balance that you find works for you. I don't have much else to say on that one.

[00:02:10]
The one thing I will do here, we didn't do it yet, so I'm gonna add a span around the word Mushroom Foraging, cuz that does need a different font size and a different font color. And again, I could 100% do that with just utility classes and it would work fine, but because I'm doing this hero and it's unique to the hero or unique to the h1, I'm going to just combine all of this together.

[00:02:35]
Cuz I'm going into component mode rather than utility class mode, so my h1, if you wanted something more generic, site title, something like that could work. I'm in my hero, I don't know, I went back and forth on this, honestly, on what to call it. I'm just sort of partial to like this title is specific to this area that's on this background.

[00:02:53]
So it's really specific to being in the hero area, so I'm going with the BEM style, this is a title that belongs in the hero. If you'd prefer just the h1, if you'd prefer doing site title or having a generic one, like we did for these section titles, it's really up to you, and what would work best for you.

[00:03:12]
So we can come up to here ,we'd want to go, it's definitely not base, not really layout, because it's not layout related. It's very specific to one thing, so I go into my components and I can create my .hero. First, you do the simple ones, text-align center, nice.

[00:03:32]
The font size here, as much as possible, I like relying on inheritance instead of selecting the paragraphs, if I can. So I'll do the font-size here, and that can use the custom property font-size-md. Some of this I am remembering just off the top of my head, but there's no harm if you go in the Figma file and you look at it.

[00:03:54]
You can get the information on what the font sizes are in the panel on the side, so I do apologize that I'm not always referencing it. But just coming in here, checking the sidebar, which is really small on my screen. But you'll be able to get it and see the specific sizes that are being used, because the names I used are very similar from the Figma file for the font sizes and the custom properties.

[00:04:14]
So the font size should go up a little bit, the color was my high-contrast. And this is a nice thing if you're using, like I named my utility classes the same that I named my custom properties. The advantage with that is whether you're doing it through a quick utility class or if you're doing it through the use of just writing styles this way, there's no confusion about what you're calling it, cuz you're using the same name in both places.

[00:04:36]
So if you need the high contrast text, whether it's going to be through a custom property or just through the utility class, you'll remember what the name is. So that should make the text white instead of the the other color that we had. We need a background image.

[00:04:51]
People often ask me, what order do I like putting my properties in? I do have a bit of an idea in my head, but I usually just try and remember the things I need to put on there, and I start putting them. I think that's one hero. You might get this where we can see the image is repeating itself a little bit, background-size is cover.

[00:05:14]
You don't need to necessarily do this, but background-position, center, just so it's always based on the middle of the picture. People ask me sometimes about getting a specific area of the image and where it's cropping and everything when it's a background image. If it's a background image, it should be decorational.

[00:05:33]
The text is what's important if, hopefully, you don't have a client that's saying, I need this one specific thing visible cuz positioning background images in very specific places isn't the easiest thing to do in the world. There we go, we get that coming together, we just need to fix up the title of it now.

[00:05:48]
So we can come here, hero__title, or however you decided to come up with your class name for there, and the font-size was my font-size-heading-lg, so it should get a bit bigger. I might have had something on there already, I had the h1 selector I think higher up that I put, so that was coming through.

[00:06:07]
You could either have the span on the beginning of it, and that's setting the smaller size that's white, and then the span over here, that's the larger font size in orange, or vice versa. It really doesn't matter which way around you do it. I always tend to do the first thing I see as the main part, and then I can say my span that's inside of there is the font-size xl.

[00:06:32]
And again, this is why I like using custom properties with really clear names that I remember, cuz I know it's my extra large, I just put xl, and I get the list, and choose the heading xl. And the color was my brand, text-brand, and that comes in, and because of the way the custom properties were set up, so if we go take a look back at those in in our base.

[00:07:01]
It mentioned that the 900 and the 1000 were set to the same size, then, here I was making them separate sizes. So the reason that I did that was just so we get this happening, where it's smaller sizes, it looks like that, and then this becomes larger when we're at bigger sizes.

[00:07:19]
One last problem is this looks really ugly when the word of is sticking over here, just cuz of the difference in font size, it is not nice. So the easiest way to fix that, and this is a really common thing that I do, is when you have something like this that's making these types of changes.

[00:07:38]
I also come in with a display of block, and that way you just force it to be on its own line all the time. If you do this, do some testing, cuz sometimes it can lead to some really awkward line breaks. But in this case, and especially with the pretty the text wrap balanced on the heading, I think it's helping us out a little bit.

[00:08:00]
So if you're using Safar or Firefox, you might be seeing it a little bit different. The balance should actually work in all the browsers, it's the pretty that doesn't. So, yeah, the balance just helps us out a little bit with the look of that, and then we get a nice hero area that's coming together pretty well.