CSS Generator Plugins Exercise

[00:00:00]
>> There are a bunch of other useful plugins that, once you have, let's say, the textiles in place, there are a bunch of interesting ones. And, like, honestly, I don't have a favorite, per se, because it really depends on the output that you need. One that I used to use a lot, is this CSS gen?

[00:00:21]
And what's cool about this one is you can have CSS variables or if you use Sass or less, you can do that too. And you can say, if you want hex values, I don't have any color. I might have a color in there or something like that, but colors, you can choose what modes you want.

[00:00:40]
Cool, cool, cool, root font size so for the sort of RAM question I got earlier, right? It will produce RAM add prefix or not, let's sit no. Use RAM font size. We don't need to add a style description. And then hold on my screen is now more zoomed in than it was, but we can kinda see.

[00:00:59]
We'll generate, and this one will actually generate a whole bunch of CSS classes that you can use, right? And so you could theoretically drop this into your like, literally CSS file and now have all of the typography using your designs available as CSS classes that you can just use.

[00:01:21]
So now what's really powerful about this is if I click on any of these fonts, I can see that it is text-9L typography light, right? And I know just through looking at it that there is a CSS class. Now I'm not sitting there going, okay, so it's like a size 96 font and this line spacing.

[00:01:43]
It generated all of that. I use the class, I move on with my life, I can go back to looking at guitars, right? I ship the ticket a lot faster. There is another one that I really like. There's variables to CSS and then there's also, there's a one similar that will like make it to CSS variables instead of CSS classes, right?

[00:02:07]
Like whatever your code base best, but like generally speaking, once you have an organized set of styles and or variables when we get to them, like there are ways to then take all the hard work of manually translating all of that. And auto-generate at least the foundational components of how you implement it in CSS, right?

[00:02:25]
So predominantly, because we can also do colors with variables, and you'll see why you might want to do colors with variables later, it's tricky. But let's just see how you can also do it in styles as well. If I look at these, they're kind of nicely, I grabbed this from something that generated variables.

[00:02:46]
You can see that the name of this layer is 50, right? That's not necessarily what I want. I'd love it to be called primary 50, right? So how do I deal with this? I bulk-rename them. So your job just real quick go in here and grab you don't have to do all of them grab whatever color makes you happiest, right?

[00:03:07]
Run the batch rename, run styler, right? Generate at least the styles for the colors and get a sense of that, and then we'll meet back up, and I'll kind of go through it with you. All right, so our mission but there's a little, little nuance to it since trying to undo a completed one, one edge case, which is these technically aren't layers since I was gonna get angry with me which I figured out by just eavesdropping on y'all during the break.

[00:03:38]
So, yeah, I think, like, when I go back and edit this, I'll make these into actual layers trying to take an existing color palette and on color palette, I had one edge case of in consider. But theoretically, let's pretend we lived in a happy place where that worked.

[00:03:54]
You could bulk rename them all and run Styler. Just like we did for the fonts. That said, I'm not willing to invest more time in this because I don't want color styles, I want color variables. So like spending time doing that, it's not interesting to me. Cool. One thing I wanna talk about is this works for an existing type system.

[00:04:13]
This works for existing color palette, right? However, I made this colorful palette, and you can too, and you can make your own type system, right, using something called math, right? Now I'm a liberal arts major, so I will not be doing the math. I will be employing computers to do math for me.

[00:04:34]
So let's go ahead and try out, but for the typefaces, one that I like is called typescales, and you can run it. And you can deal with the fact that my screen is a lot smaller than it was before. Actually, I can see all the parts that are important.

[00:04:56]
There's a few more fonts down here, but my increased resolution is hurting our feelings right now. But what's cool about it, you can set the base size for the RAM. 16 is like standard, so we'll keep that you can choose the way that the fonts scale. There seems to be some kind of music reference going on here.

[00:05:15]
You pick major third, you can pick a minor third, golden ratio that makes you happy. You can also see how all this stuff matters. You can pick the line height, how many sizes above the base you want, and how many below that you want, and whether or not you want to round the values or not, I don't ever want to live in a world with a 61.488 pixel font.

[00:05:39]
So I'm gonna choose around the values, and we hit generate, and it creates a frame with all of those font sizes ready to go. And for the trick that I wanted to show you before, we can grab each of these, right? If you hold command that trick we saw in the beginning, as long as you don't get like this is, I'll add another frame hiding under there.

[00:06:10]
Get rid of that, if I hold command, I can create, grab just the nested ones, right? And like, so now I've got each one of those and like, theoretically, if I ran Styler, I would get a bunch of styles called type at 9, type at 12, type at whatever.

[00:06:28]
If I wanted to bulk rename these things, that's where I can hit command r. And I could say, instead of type at, We can say like whatever, and like you can rename the numbers if you want to, but you can rename these to whatever you want, and then you could theoretically run Styler on them.

[00:06:58]
Right? Created nine new typefaces. There's one for bulk replacing fonts. This will do it in, I believe, enters the default one, now they're in style, so if you need to adjust it, yeah, it's Enter. You can also replace the font, stuff along those lines, right? Like, ideally, as an engineer, like the design team, probably has come up with some kind of typography system.

[00:07:21]
But if you find yourself at a startup playing designer, because you are the only front end engineer, I was like three years ago, this is good, because have I read a book on type systems and color theory? Yes. Do I really trust myself? I don't. And so this will go ahead and kind of get you some of the basics as well, and then you can use some of these tools to bulk create the styles that you want.

[00:07:47]
You might have to do some little manual renaming, but the overall time investment is not that much, particularly if you don't have a bunch of people staring at you. You kind of just do it during something else. It's a little bit of clicking, but you can kind of like, get through it all pretty quickly.

[00:08:03]
There's still a piece of me that wants to slay this beast, but I'm not going to right now. All these seem like bad ideas, okay? But the same basic approach works for any styles that we wanna create in bulk. The other thing we can do is to create a color system.

[00:08:19]
There are a lot of different tools for this. The one that I like is again, I happen to use Tailwind at work. None of this is Tailwind specific. I mean, that one is definitely Tailwind specific, but this one is not. This comes from a website called uicolors.app, right?

[00:08:43]
Which you can also go visit, but what this does is it allows you to pick a color, right? And then it creates all the various shades for you, and what's even nicer is it can generate a color guide like these ones that I tried to reverse engineer and failure.

[00:09:03]
And it will also create either the styles or the variables for you as well, right? And so you can define that base color, tweak it however you want and then like have it say, hey, create styles. It will give it a default name. In this case, there is, I've used multiple, like color palette apps, and they all will give the same color the same name.

[00:09:29]
So there's clearly some JavaScript library that everyone uses. But we're gonna talk a little bit about color names versus semantic names in a little bit right but like one would argue in no world do you really want this called fountain blue? You either want to call it like primary brand, information danger error, or blue.

[00:09:52]
Fountain blue seems oddly specific unless you have 17 other blues, so we can call this blue, and we say, create the styles. And you can see that it generated a color palette, much like the one that I accidentally tried to have as reverse engineer. And then if we go into the color styles, you can see that I created all of these blues that we can now use without ever having to think about the hex code ever again.

[00:10:22]
And again it also helps making sure that we have consistency across the designs because it is a lot easier to accidentally just drag and drop that little like color wheel in a design than it is to look up yet another hex code, right and implement that stuff, right?

[00:10:35]
Like, it's not that big a deal when you're working on design. It's a bit big deal when you're implementing it. So this will create all that for you as well. If you need to get rid of these you can also just scroll up, hit Shift. No. Maybe not that I don't think and go across the boundaries of the different sections.

[00:10:57]
Hit Shift and delete lots of things. I do entire sections. Yeah I can, right? And so you can go ahead and delete them if you don't want them. Now styler will like also like, again we saw before, you rename a thing, and it can handle renaming so you don't have to leave stuff if you're just trying to rename it.

[00:11:18]
But we don't want all these styles right now, because they were just us playing around, but I want to delete all of them in front of you because that's boring. So styles, I would say at this point at the time of recording, I mostly only use styles for layout grids, shadows, and typography.

[00:11:39]
When variables come to typography, I will probably use variables fat for reasons I will show you in a little bit. There are things that variables don't support, even though they support colors. For instance, linear gradients, styles only, right? And so there's a time and a place to still use styles.

[00:11:56]
And if you're like, I don't really understand when I'm supposed to see a style and when I'm supposed to see a variable, welcome. It's like a weird, like, transitionary period at the time of this recording, that is a valid thing. If you have a bunch of styles, right, one could run the styles to variables plugin.

[00:12:16]
Why you might use this even if you don't have a bunch of styles is it a lot of cases there is more tooling for generating a bunch of styles than there are for generating a bunch of variables. So sometimes it makes sense to generate a bunch of styles and then create variables off of that.

[00:12:32]
There are plugins where you can theoretically throw in a picture, and it will generate a color palette from that picture. That seems cute, it's really useful. You throw in like a screenshot of your current UI, and you have a generated color palette based off the current UI, which is a lot better than what I did, which is sit there with a color picker for 30 minutes and select them one by one.

[00:13:00]
So that's another way to do it. Depending on what situation you're in, there is usually a tool that exists that makes your life somewhat easier.