0:00:00
What’s up guys welcome back in this video we’re going to take a look at the color system inside of automatic.css how powerful it is with automatically generated shades and other color variants. We’re going to take a look at how to set up that system in the very beginning. We’re going to take a look at background overlays, background color classes, text classes, buttons and all sorts of cool stuff that have to do with color so that you can see how powerful this system is inside of automatic.css. So let’s go ahead and jump over to the sandbox site and let’s get to work. I’ve got a little hero section here that we’re going to quickly style up and then I’m going to show you exactly how the color system works and behaves from a global level. This is really, really powerful stuff. I think it’s going to help you a lot. It’s going to speed up your workflow. You’re going to love it. All right so let’s go ahead and in this section let’s just center everything real quick. Let’s also make this section bigger. I want a lot more responsive padding inside of this section. So I’m going to use a pad section class. We’re going to go XXL. I just want this hero section to be in your face. We’re also going to make all the text in this section white. White is one of those without setting up automatic at all. You have text white, text black and a bunch of gray shades automatically available to you at all times. So if you want text to be white, it’s as easy as going text white.
0:01:23
We’re also going to put a little owl spacing here to space everything out. Kind of evenly. Actually I want to do owl s on that. So it’s not quite so dramatic. Perfect. Now I’m going to style these buttons and all I have to do really is put a button class on them. So BTN and BTN. And so in the automatic system you have four different colors. You have primary, you have secondary, you have accent and you have base. When the plugin is available, by the way, you’re going to be able to automatically generate more colors if you need more colors. But for right now we have these four brand colors. This button automatically inherits my primary color, which is the action color for the website. It automatically puts in a hover variant as well. So your hovers are already set on your button class by default. That’s very, very cool, very powerful, makes things a lot faster for you. Okay, so the next thing I want to do is darken that background with a background overlay. And this is hard to do with a class in oxygen. You actually have to do this. Like you can’t just create a custom class and set a background overlay. It’s not going to work. But in automatic.css, I’ve gotten around that by assigning, making the overlay classes powerful enough to where they actually use a pseudo element to create these overlays.
0:02:44
So all I have to do is type in overlay. And I’m going to have overlays of all of my colors, all of my brand colors, as well as all of the opacity variants. Alright, so I can do an overlay primary trans 60, which is 60% transparency of my primary color, or what I really want to do here is the base, which is a darker color. So I’m going to do overlay base trans 60, and you’re going to see that it automatically darkens on my hero section. And I’m not stuck doing these overlays at the ID level. I can still use all of my utility classes with my background overlays, which is very, very powerful. So my hero section is looking really good. We can see how all of that stuff work. If I want a little contrast here with my button, I can always just do a button, and then I can just do a different thing. So I can do like you can do button secondary, right? And see how that looks. So now you kind of have an alt button inside there. And also if you’re wondering how I got these two buttons side by side, that was pretty easy. I’ll just go ahead and take those classes off. So that’s how it would be by default. But if you use the flex row, and then you use the gap S, there you go. You have your side by side buttons. You can even change how that behaves on mobile devices. Okay, cool. So that we’re going to call done. Now you could also make this white if you wanted to. So we can do button white and we can do text based ultra dark on that.
0:04:17
And that will give me that kind of alternate button as well. And it still does the primary hover, but all this stuff is editable as well. You can make your own custom alt button if you don’t want to just sit here and use utility classes for everything. I’m going to take a couple of those off. All right, so let’s get down here and just figure out real quick like how this color system works. Let’s do an owl S class on this. Kind of give some spacing to everything. And on this we’ll do a margin bottom. So we can move this grid a little bit further away. So here’s the primary color. So we have background classes for all of your colors and all of the generated shades. So I’m going to do bg and this says this is a primary color box. So I’m going to do primary. And then what’s really cool about this is I can make the text kind of match really well. So I can go text and we can do primary dark. And that’s going to give me a dark version of text. If that’s not quite dark enough for you or there’s not enough contrast, you can always do text. Alch, sorry, primary ultra dark. Boom. All right, so that’s a very dark version.
0:05:28
But it’s not black. It’s not like you’re throwing black on there. You’re throwing the primary color just a very dark version of it. So it actually blends and plays quite nicely. So that’s our primary color. Now let’s take a look at all of the different generated options that we have. Again, you don’t have to set these up in automatic.css. It’s all automatically done for you. So on this one, I’m going to do bg primary ultra light, just like it says there. So primary ultra light. And then I’m going to do primary light. And this you’re going to see the true power of this when we need to make a global adjustment. And by the way, I do want to, this is an automatic grid, by the way. Actually, it’s not auto. Let’s do grid auto for. So it’s automatic. We don’t have to worry about breakpoints or anything. And then let’s put a gap on here of m. Okay, so that’s looking much better.
0:06:22
Cool. All right, so we’ve got our primary color up there. We’ve got all of our generated shades. And remember, this is primary ultra dark. I can’t really read that text if I wanted to. Text primary. And you just go the opposite. So primary ultra light gives us the ultra light text. So that’s very cool, very powerful. Now the client is like, hey, you know, so yeah, we changed up our primary color a little bit. Is that going to be a problem? And think like you’ve used these, you know, variants all across the site. You’ve used their ultra light. You’ve used the light variants. You’ve used, you know, ultra dark on text. You’ve used maybe the complimentary color was used somewhere. But definitely the transparencies were used somewhere. And now the client wants to change the primary color. If you had set all this stuff up manually, you would be now changing all of this stuff manually.
0:07:16
But in automatic.css, it’s literally one change. So what I’m going to do is go to style sheets. And I’m going to go to the vars style sheet. And when the plugin is all created and ready to go, this is all going to be done in a plugin dashboard. But for right now, you just have to open a style sheet. And we’ve defined everything in HSL values. That’s where a lot of the power of the system comes from. And you’re going to see the primary color HSL values are right here. So what I’m going to do is choose a new primary color. So I’m going to go over to coolers here, which is a really awesome color website that I use a lot. And then I love I’m just going to hit start the generator. And this will generate color palettes for you, right? And you can see that maybe we want this to be our new primary color. So it’s not like super far off from what we have, but it is definitely different. So what I’m going to do is select that color.
0:08:09
I’m going to grab the hex code because I don’t think this oh, it does generate HSLs for us. So that’s perfect. But if it didn’t, if you just have hex codes, you can actually just go to Google type in your hex code. And it’ll give you the HSL value right there. And you just type that into the style sheet. But look, it did it here. So 358, 65 and 55, 358, 65 and 55, 358, 65 and 55. You guys see that all changing dynamically over there as we went? Like that’s the power of the system. So I have a new complementary color. I have new shades automatically generated anywhere this stuff has been used. It’s going to change for you. Look, that button has now changed to the new primary color. If I change the base color, like let’s go back to that palette, maybe we want this is the base. So that’s like a darker blue kind of base. So I’m going to go ahead and grab the HSL values here, 216, 49 and 22, 216, 49 and 22, what my silo sheet go.
0:09:15
216, 49, and 22. So now I have a brand new base color. It’s changed all my overlays. I haven’t used that base color anywhere else on this page. But you can definitely see that we are like seeing the full power of the automatic.css color system here. And then if I changed, obviously this was using the secondary color. So if I wanted to go and change that, we could change that. Just as easy. I do want to show you as well. If you’re not using background classes, like let’s go here to this primary. And I’m just going to take off the BG primary class. And let’s say I wanted a custom class, like custom background. Okay. Like that. You can always hook in with variables. So very very a var can’t talk primary.
0:10:14
Still gets me that background color. So I’m hooking into the automatic color system. But I’m assigning this now to a custom class. So you’ve seen that in the other videos that I’ve done. I’ll just actually just leave that super super powerful. You can do that pretty much on anything. Anything that accepts a color inside of oxygen. You can use a variable to hook into the automatic.css color system. So this is how colors work in oxygen. The setup for it is so simple. You saw me change it. But right when you install the system, all you do is set up your values here. And you are ready to rock and roll. And if anything needs to change or update in the future, your entire site is pretty much protected from breaking.
0:10:57
Because everywhere you’ve used this system is going to adjust when a new color is brought in. Like a color change is made. And like I said, yeah, it’s a little messy that you have to do it in the style sheet right now. The plugin is in development as soon as the plugin is ready. Version like 1.1 will have a dashboard. And we’ll be able to just hook in through the dashboard. You won’t have to ever touch a style sheet. But just want to show you the color system and how powerful it is. And get your thoughts and feedback. Hit like, hit subscribe, drop a comment below. Let me know what you think. That’s it. I’ll be back. Peace.
