Structured Variables

[00:00:00]
>> Kevin Powell: All right, now we're gonna talk a bit about structuring custom properties. And this is the part where it's a bit more design systemy, cuz there's different types of custom properties that you can have. And this is the one step I debated including this or not, cuz it does take a little bit longer to get into getting into our project still.

[00:00:17]
But this is the one phase where I really feel that idea of customization and adaptability, this is the most important step you can take along the way. In the design system world, what we've created so far, they're called primitives. Where we have brown 400, brown 500, brown 600.

[00:00:34]
You're just saying it's brown, it's lighter, it's darker, something like that. The next stage after that, and there's, I think, three stages in real design systems, but we're just going to be going to the semantic layer. So instead of having things and a semantic layer's describing what it's being used for, and it can feel setting all of this up, can feel like it's a lot of work to be going through and doing this.

[00:00:55]
But again, in the big picture, on to make your project a little bit more maintainable, I really do feel like it's worth doing, where you have another set of custom properties that are all looking at that original custom properties that you created. And as much as possible, when you're using your custom properties in your project, you don't wanna use any of your primitives you only wanna be using the semantic ones.

[00:01:18]
And we'll sorta explain explore why that is and how this makes life a little bit easier. So this is at the stage where you literally, if we go back to our you would go into your Figma file, and you would look at things. And so here, if I'm looking at this design, I see I have this text color here, I have a white text, and I have a bit more of a subdued text.

[00:01:39]
The subdued text tends to be the one that's being used most often through my project for paragraph text, though, it does go back and forth a little bit between that and the pure white. So you could go either way with this, but what I would do is by looking through this and looking at all the different ways things are being used, I could then come into my code, and this is where the syntax highlighting breaks a little bit.

[00:02:00]
If you go after this, which is what I'd wanna do, if I come here and I start doing more custom properties, so to say, I said text. And we'll do font size for a sec. No, we'll do color. So I can say, like text, we'll just do regular for now.

[00:02:17]
And then I would say, that's my var. And then I would choose, that would be my brown 800, I think it is. So I would say that the regular text should be the brown 800. You'll notice this is just VS Code not keeping up with modern CSS yet.

[00:02:33]
So after the media query, with nesting, for some reason, the syntax highlighting breaks. That bothers me a little bit. So it's easy enough to come in here and make another root selector, and then just keep on going, and then it doesn't break anything, it doesn't change anything. It won't cause any issues whatsoever in your project.

[00:02:52]
So you could have text regular, or text base, anything like that, just to say, like this is the main text color, text main, any name like that would be fine. You're just sorta saying this is my body even if you wanted, come in with a name that signifies to you how it should be being used.

[00:03:09]
What's the purpose of this rather than this is the color that it is? And then we could come and have a text high contrast and that one could be my var color white. So that way, we're, again, this is high contrast text, and we're using it that way.

[00:03:26]
And it's just a question of going through and finding all the different ways the different things will be being used. The background colors are another one, and so I could come in with a background-color, we'll call it main or bass, or whatever you wanna call it. And in this case, I would look at my Figma file and I would choose the color that I feel like is most commonly, probably the one on my background, sorry on my body.

[00:03:53]
What would the background color on my body be? And when I look at this, I just see at the top. I have this brown color coming through. It's the same brown color here. Now's are different, but it's the same one here. So this color tends to be the one for me that is the most commonly used one, but once again, I did give the versions that I'll be using right there for those.

[00:04:15]
So my main is the color that is the main color, the one that I'll set in my body, and then I have a light and extra light and a dark and an extra dark. And just makes it easy when I'm looking at something I'm not trying to remember is on that other, I need a darker background color.

[00:04:29]
I don't remember if it was a 600 or a 500 that I used, but I know I need something darker for this section. I probably remember if it's my main or my light. It's easier remembering sort of keywords and numbers necessarily, especially if you have these really big systems.

[00:04:42]
Some of the really big systems you have, you might have 20 versions of one color, and knowing which one to use for a background color can be a nightmare. So by setting things up like this, it just makes life a lot easier. So once again, if you want, you can grab them all from here and it's just going through the text.

[00:04:59]
Brand and brand light, as well. In that case, for these two, the reason I chose brand and brand light is, well, I mean it's sort of describing what they're being used for. I think it's actually pretty straightforward for all of them. And then I'm doing the same thing for the headings where we have the heading small, heading regular, heading large, extra large, and then the font size is here.

[00:05:21]
So I'm doing it. If it's a font size, then it's just my body text or paragraph styles. And if I put heading, it means it's gonna be used on my headings. And it just makes my life a little bit easier than trying to remember the numbers that I'll be using along the way.

[00:05:35]
And again, by having these two things as separate layers, it makes the projects a lot more easy to make adaptable and changeable along the way. The one thing I'll say actually a little bit of inconsistency here that I had SM, LG and Excel, but I wrote regular here.

[00:05:49]
If you'd rather come in with an RG or just write the full name out, you can. The other thing people might not like here is that I'm using really long, descriptive names cuz people like less keystrokes. I like doing it this way, cuz it separates my primitives from the ones I'll be using my project.

[00:06:05]
So I know that if I'm looking for a font size, hyphen, hyphen, I write the word font, and then I'll just see all my font sizes come up. And so that's the reason that I do it with the longer version like this, rather than coming through and, yeah, I prefer writing things out a bit longer.

[00:06:23]
It takes a few extra keystrokes to do it, but it makes it more clear what it's being used for. I hate going into a system and then trying to remember all the abbreviated versions of what things are, and then you go into a new project and they decided to use different abbreviations.

[00:06:34]
It just drives me nuts. So I'm I'm a big fan of being verbose, even if it takes a few more keystrokes. It just makes it more clear what everything is. So what I would actually suggest if you want is to dive in, and if you wanna use the same ones I'm gonna be using, they are in the course portal that's right here.

[00:06:53]
You might find other things in the Figma file. There's other things we might have to add as we're going through or you might wanna come up with a slightly different naming convention for yourself. These names might not be names that resonate with you. You might want shorter versions of the names or other things along the way.

[00:07:07]
There's the tags that are in there. You might think about how you'd set those up cuz they don't have any colors for those as one example. So if you wanna poke around in the Figma file for maybe about five minutes, come in, you can bring these in, play around with them, use them a little bit, just to see if it makes sense in how they're working with the current content we have on the page.

[00:07:23]
We don't have a lot, but at least you can experiment and play with it a little bit, and then in five minutes, we'll move on and start actually using some of these things.
>> Kevin Powell: I'm just gonna grab the ones that I had here for the sake of gravity, and bring them into the root right here.

[00:07:42]
Ooh, whoops, let's do that again, copy,
>> Kevin Powell: Select all of them and paste that in. There we go, just to overwrite those other ones. And then this same thing, I did provide the font sizes here. And we talked with that a bit before, so I'm just gonna grab those and bring them into my project.

[00:08:04]
And we wanna still be in the root right there. And, again, the nice thing with Prettier is it takes care of the indentation for us along the way. And with that done and having all the custom properties in there, it's finally time to start flying some of these styles and actually getting our site to look the way we want it to.

[00:08:22]
So, I did mention looking around for other things. There's one of the things that I said that I would find useful. Or I think I would find useful here would be for border radiuses as well just cuz there are consistent border radiuses throughout the project. Sometimes they're very large, sometimes they're a bit small sometimes they're a lot smaller.

[00:08:40]
And so I came in with these a little bit on the naming of these again, and the inconsistencies for my own way of working is, I like numbering my border radiuses instead of saying small, medium, large. If you prefer small, medium, large, or anything like that, by all means, come in with the names that for you make sense.

[00:08:58]
It probably makes more sense to use those just because I've been using that naming here. But I'm stuck in my ways because of how I've always worked. So whenever I do border radius, I always just think of a number. So that's why I'm doing it this way, cuz I'm guessing that question would come up.