Styling the Card & Tags List

[00:00:00]
>> Kevin Powell: We need to style the tags and our spacing is actually a little bit too large as well. If we take a look at the Figma file, we used our card because our cards over here, the 1 rem of spacing is actually perfect. The spacing here is good, but if you look at these ones, the spacing on them is a bit tighter, so we do need to improve that.

[00:00:18]
For now, I'm gonna start by tackling the tags and then we'll do the tags and the notes at the bottom and then we'll tackle the titles and the other spacing issue cuz those come together quite quickly and in a fun little way. But the tags are the easier of the things that we're going to be looking at.

[00:00:36]
And once again, you probably know where I'm going with this. That I like styling them based on things that I already have instead of having to create a class plus having a data attribute on there. I want the data attribute on there because it makes my life easy to hook in with JavaScript.

[00:00:53]
It already exists. It's telling me what this is, so I might as well hook into that to change the colors of them whether they're, all the different colors that are coming in. So I'm gonna copy this for now. I'm gonna go to, let's find my components,
>> Kevin Powell: And my tag to me is a component, it's only being used in this one place.

[00:01:16]
But again, I wanna make something that potentially, if there's a card somewhere else that needs it, or maybe not even a card I can plug and play this, use it anywhere. So that's why I'm not doing it as a card tag or something else like that. I'm trying to make it as generic as possible.

[00:01:30]
And I'm just gonna come all the way down site, footer, hero, cards. We can do it just between my cards, my buttons, those are the types of things again. Organization, I just try and be like, this is more of like a one off. These are more reusable. You could even have sub layers, which we'll talk about a bit later, to be able to do these, if you want to.

[00:01:52]
So the first thing is, I have the area label. One thing I didn't do, and that I maybe should have done, is actually given these ULs all a class cuz this is one of those times where it could actually be useful. We could technically hook into the area label, if you prefer doing that, you can.

[00:02:11]
Since I didn't do it, what I'm gonna do is actually just select the role of list that's right here, and push command D Keyboard, which is going to select the next one and the next one. And I'm just gonna go through and select all of those and try to make sure I don't go too far, that's all of them.

[00:02:31]
And then I'm just gonna push left on my keyboard. So my cursor is moved over and it's not selecting the roll of list. And then I can give that a class is equal to tag list or tags, something like that would work as well. And just double check.

[00:02:49]
I can scroll up, there are scroll down now, I should say. If I look, I can see that it's added that on all of them. So I do apologize for missing that a bit earlier. And again if you'd rather Just use the area label, that would work as well.

[00:03:02]
It's already there. It sorta follows the pattern that we've already been doing. So you could do that. And we can say our card list, not card list, tag list. I don't really need, we do need to style this actually. Just throw a display of flex on there to get them to go next to each other and add a gap, and space them out a little bit.

[00:03:26]
So that's not too much. Just to be safe, it could be something where in the future there's more tags, you have less tags, you have other things, we could also just do a flex-wrap of wrap on here that would just prevent any overflow. You don't need to do this necessarily.

[00:03:40]
This could be a change that you add later on if you actually run into an issue, but it doesn't hurt having it there, and it just prevents future headaches from potentially coming up. But it's not a big deal one way or the other. The one thing I didn't do is add any classes to the list items themselves, just because we have a tag list.

[00:03:57]
So because my tag list has to have list items in there. I know some people don't like having descendant selectors we've already been using them a lot. So I'm very willing to do a tag list, Li like that, so if you don't want to use nesting, you could do it like that, or because I've been using nesting, we can come in and just grab that same type of thing.

[00:04:18]
We're just creating a descendant selector. And yeah, I'm okay with doing one two levels of descendants selectors. I don't think it's a problem. It's people complain about no scope in CSS. We do have scope now, which is a new thing, but this is scoping my selector. It's the list items that are in my tag lists, and I can style them this way.

[00:04:37]
So for that, we just wanna give them a couple of things, the padding will probably have to play with. So for now, I'm gonna make it too big. So if you have a smaller number by by all means, put it on there. But I'm just going to give it a little bit of padding, and I'm gonna have a bit of background color.

[00:04:52]
And for the background color, you might, whoops not, what I wanted. As you might have guessed, we've been doing this a lot. You can call this tag, will do tag bg. And I'm gonna give a fallback of a red just for now. We'll take that off after but it's a good way to make sure that all of the colors we put on after working.

[00:05:14]
We're saying if the tag bg doesn't exist, we use the red fallback. It just highlights it for us. So we can see that none of them actually have an official color that we've put on them yet. And maybe we could fix our padding now with that. It's gonna be really small on the top and then a little bit bigger on the left and right, I think, but the padding overall was really tiny.

[00:05:33]
And I do believe, let's go look at the Figma file. But the font family is different. And again, we can get that if I turn on. Let's double check. I can see it's using the outfit font family, and the font size is 14. So it's using the font family from our headings, and it has our small font size.

[00:05:56]
So that means here I can come in with my font family of FF heading, even if it's not a heading that's what we're primarily using it for. So I'm happy with that. The color was pure white, so that was our high contrast. And, let's hit save on that just to see them.

[00:06:17]
That looks decent. We'll have to check the font sizes. It was 14, we already looked at that, sorry. So for that, we can come in font size. You'll notice there's an issue with the backgrounds on them. Some of them are bigger, some of them are smaller. We'll talk more about that.

[00:06:44]
So if you've run into that, don't break your head over it. It's a simple fix that we'll explore in a little bit. The last thing though I will do is add a border radius to them. Border-radius-1 should do the check on those. And we might have to tweak the padding, but actually if I'm looking at this one over here, the padding looks decent.

[00:07:07]
Maybe it's even a little bit too big on the top and bottom, I'm gonna try putting 0. We might not need any, that looks a little bit better actually. And again, these are stretching out, so it's hard to tell for sure. We can always tweak this a little bit after once they're not stretching anymore, but something like that does look decent.

[00:07:26]
And then for actually coloring them and getting the correct colors on them, we have those data attributes that I mentioned that we can hook into. So we had the data edible is equal to, and we had the different ones. Or we had only two for this, so data edible was either edible or if you did true and false, you'd do it based on those, edible.

[00:07:48]
And for the background color on these, I'm gonna let you think about it a little bit. I'm gonna set them, but this is the one time I'm using the primitive colors that we had. Because if we go all the way back up, I mentioned that almost everything I try and set like a color to so like background, accent, extra light, main, dark, I'm coming in with these semantic meanings for them.

[00:08:12]
When I get these one off colors like this, where I don't know what the context of them is, I find it hard to come up with a semantic value for it, or a semantic name. So sometimes I leave these like this. You could do something like this is a data sorry, error.

[00:08:27]
This is success. And this is warning. That's sort of the typical like UI element styles that you get with orange, red and blue, and those types of things. But then I always feel kind of weird doing tags with them that are not related to those names at all.

[00:08:41]
And then I don't wanna link it to the color. I don't know, I don't want it to necessarily be toxic because then I might need that color for something else where toxic doesn't really make sense. So, sometimes coming up with semantic names can be a little bit tough and if I don't have more context with the project I'm doing, I'll just leave those primitives in there.

[00:08:59]
But if you have good names that you'd rather use and you wanna create that extra layer with the semantic names, 100% I would encourage you to do that. And we're gonna explore later on today, a lot more about why I like having the primitives and the semantics, and the value that you get from having both of them.

[00:09:14]
But we'll get to that a little bit later. So let's get back to those tags though. So the edible in this case is, this one's easier cuz it's our accent color. Background accent main should make. There you go. You can see all the edible ones have come in with the green.

[00:09:36]
I think I have too many toxic ones. I forgot to change a couple of them along the way, but that's okay. We can just copy that, paste it, if it's toxic, as I said, then I can just use the color red, 500 and toxics working. I can see that has come through on the different toxic ones.

[00:09:58]
And then we do the same thing for the other ones, so I can copy that one. Now instead of edible, it's the season and we just run through on the different seasons we have. I should have copied this one because it uses the same color.
>> Kevin Powell: And I'm just gonna make this a bit bigger so you can see all my code.

[00:10:21]
So the summer, spring, and fall, there are no winter mushrooms. We don't harvest in the snow. The spring is the color teal and the summer, sorry, fall,
>> Kevin Powell: Is the color orange, I believe. And then I can just double check, and if I don't see any bright red ones showing up, I know that I did it correctly and everything is working there.

[00:10:59]
Awesome. So, and just again, to reiterate, this is one of the reasons I like hooking into like, the data attributes. Instead of having to double the attribute plus a selector just to do the exact same thing with the class, I said selector, but I should have said class.

[00:11:14]
There's no reason that we can't just use our data attributes like this, and especially in a case like this where we're hooking into it with the JavaScript that makes our life a lot easier as well. I think it makes a lot of sense to do it this way.

[00:11:23]
I also just realized I put background colors on all of these, but we'd set up our BG tag so I could have just redeclared that, and that was originally what I was going to do, so we can just control D that and switch the custom property instead. They have the exact same result.

[00:11:40]
One or the other, it's not really a huge change. So if you did it the way with the background color, it would work completely fine. If you do it with the custom property this way, it's also gonna work. So, it's not really a big difference one way or the other.

[00:11:53]
We'll see in the next section or the next part where we do the titles. Why custom properties really can help you out in styling things. And to put the finishing touches on this section, we're gonna fix up our titles and the spacing for these. So to be able to do that, if I go over to my mushroom guide here, HTML file.

[00:12:12]
I am going to do one thing that I mentioned we don't necessarily have to do when we're on the homepage, is on my class all the way up here, not on that one. We're gonna go even higher on the section, all the way up here. I'm actually gonna give this section a name, and on the first page, I said, if you can avoid doing that, we might as well avoid doing it.

[00:12:33]
These are gonna be really hard to come up with meaningful names, especially in generic areas like we've had for a lot of this project, like for this, start your foraging adventure, you don't want a class like that. This is just a two column. This is a two column like it's hard to come up with a meaningful class name, so just using a couple of things to change the background color is a really nice approach.

[00:12:52]
In situations like what we're doing here, and with our grid down at the bottom, these are sort of a bit unique in how they're going to work and what they're doing. And it's a lot easier because this is like a specific thing that it's a mushroom guide, and we need to style it specifically for that.

[00:13:06]
So in cases like that, I think we can come up and just say this is our mushroom guide space section. So it's still a section, but we just have a little bit of changes we wanna make to this, and it's going to be specific to if that guide exists in there.

[00:13:22]
If we're doing another section that doesn't have the mushroom guide, that's fine. But this is only for if we have the specific thing it contains our filters and all of that that we're going to be using. So in a case like this, I think it makes sense to actually give it its own name.

[00:13:38]
And, if we go back, and I'm gonna back to the cards just so we can look at the CSS we wrote for them a little while ago. On the titles, we use the custom properties for the card-title-font-size and card-title-color. We never really used these cuz we relied on the fallbacks values that we put on those when we did it.

[00:13:55]
So we got the orange title with the right font size originally on those ones that we did on the first page. But because we have these custom properties that are here, and because they're using fallback values, what that means is we can come in and let's for this one, I'm gonna do this within my components.

[00:14:14]
I'm gonna do it with close to my hero, because again, I see it sort of the hero's like a sectioning component versus a card that could go anywhere. So after my hero I'm gonna say a mushroom-guide. And I don't have to select the cards that are inside there, cuz custom properties are inherited.

[00:14:32]
So that means I can come in and say that my card-title-font-size and let's just do something ridiculous for now, and we'll go back here so we can see the change actually happen, and hopefully it does let's just do three rem. And they get really big, and then we could do our card title color and say that it's hot pink, and they'll change to hot pink.

[00:14:57]
So by creating these components that have exposed custom properties relying on fallbacks that's sort of the default setting, and then you can have the parent that's redefining those. And that gets really powerful in how you can use that, because you can say, you don't want to have to go on each one of these cards that are in the mushroom guide and put a class on there, or create a new class that's gonna change it.

[00:15:18]
You can just go on the parent and say, anything that's inside of here, it's gonna get these specific values. So in this case, you could just put the numbers you want, but we have custom properties already. So in this case, let's go look at our design. If we look at the title here, it is, I didn't use the settings, but it's the 21 and it's the outfit, or outfit we already knew, but it's the font size is 21 which I believe is the font-size-large, and the title color it didn't do my variable there.

[00:15:53]
So I'll do it the long way, is the high contrast right there. Let me just wrap this, var,
>> Kevin Powell: Like that, hit save, and there we go, those come in and they're styled nicely. And not only did we set that up with our card titles, but the other thing we did with this is when we were setting up the gaps.

[00:16:18]
We did something very similar. We can go and find that really fast, card. In our card, I set the gap up with a card gap that doesn't exist, but we gave it the fallback of one. So by default, it's always gonna be one, but if we need to overwrite it, we can do that very easily.

[00:16:34]
So we can go back, we don't have to go back the mushroom guides, right here. So I can also say that my card gap is, say, 0.5 rem, or 0.57. That's too small, so I think it's 0.75 you can throw on there, and then it adjusts the size of the gap that's on each one of those.

[00:16:53]
So it's a really nice way I find to be able to just have one parent. It can we're only restyling our cards right now, but you could be coming through and making changes to a lot of the sub components that are within something by doing it this way.

[00:17:04]
And it can just make it so you just have these blocks that are resiling things and it can be really handy. The last thing we need to do is our little note that's down at the bottom, so we have our card. Card title. This one's nice and easy, so we'll do it quickly.

[00:17:21]
Card note, background color is the light. Probably the extra light actually cuz our card's light. So now we can go to the extra light. And again, I like doing it this way cuz then I don't have to think about what number something has. Give it a bit of padding.

[00:17:41]
Maybe it's a 0.75, so it's the same as our spacing. We can check the Figma file. And one thing I do with Figma files is I just tend to eyeball it a lot. [LAUGH] Some designers don't appreciate that I do that, but I'll eyeball it a lot. And then if I see there's a discrepancy, then I'm not really getting it, I'll actually go into the Figma file and get the exact value that's being used.

[00:18:03]
Padding is 0.75 and then we can do a border radius on there as well of br probably the 1, 2 maybe. And, I think that looks pretty good. So if we full screen that all of those cards are there, we have to style and make our selects work, but at least the cards are all there.

[00:18:26]
If we take a look, it's nice and responsive and just works without us having to do anything. We also have to fix the, whoops, sorry. We also have to fix the weird way that things are stretching in them. But other than that, I think we're off to a pretty good start on this section.