AUTOMATIC.CSS Spacing Classes & Variables

0:00:00
All right, what’s up everybody? So I’m going to be honest with you. I didn’t know how to approach the announcement, what I’m about to unveil here. I thought about doing one video that tries to cover everything, but then that wouldn’t be a good idea. Trust me. So it’s going to be a series of videos. And I’m not even doing an intro. This is kind of the intro. I actually wrote an intro, and I’m going to link to it down below in the description, because it’s probably like you can come in on any of the videos I’m about to release. And I don’t want to have to explain everything every single time.

0:00:36
So every single video that’s going to be dripped out on this thing that I’m releasing today, the description is going to have a link to go to a write-up where you can quickly read like why this thing exists, how it’s different from everything else that’s available, all the details. OK, so let’s unveil it. It is a utility class framework for oxygen. It’s actually a utility class and utility variable framework for oxygen. And the quickest background I can give you is I thought about doing this for a very long time, but I kept telling myself, I don’t want to reinvent the wheel. I don’t want to reinvent the wheel. I don’t want to reinvent the wheel.

0:01:15
And because there’s other utility class frameworks, there’s Oxygeninja. I’ve recommended that a lot. There’s Oxymate. I think it’s a really fantastic system. It’s really, really well done, well put together. Both of those are great frameworks. Let’s get that out of the way. I’m a fan of both of them. I do prefer Oxymate because it’s simpler than Oxymate. But if you like more granular control, if you like Tailwind CSS, Oxymate, it’s fantastic. OK, so just wanted to get that out of the way. I like and appreciate both of those systems. However, I came up with concepts, specific concepts, and started using these concepts, and decided these other frameworks are not fitting what I need.

0:01:57
And the way that the direction I want to go in my development process, I want things to be a bit more automatic. So today, I’m unveiling a utility class and utility variable framework for Oxygen called automatic.css. Automatic.css. And again, the link is down in the description if you want to read about it. You can also grab the cheat sheet and all that good stuff. OK? But what I’m going to do is, in this series of videos, I’m going to highlight the key aspects of automatic CSS, and all the great stuff that it does. And why I believe it is in my eyes, I mean, I built it. So in my eyes, it’s like it’s the best utility class and variable framework for Oxygen.

0:02:43
In today’s video, specifically, we’re going to dive into spacing classes and spacing variables. And of course, there’s going to be a lot of overlap in some of these videos, because I’m going to show other things besides the main topic in order to get to where we’re going in the tutorial. So it’s going to give you a chance to see all parts of the framework. And I’m doing this on purpose because I want you to see some of the same things over and over again. Because it’s going to make those things click. And then eventually, I’ll do a setup video, like how do you install it, how do you set it up, all that good stuff. But let’s just get the, how do you use it part out of the way?

0:03:19
And what’s all the cool stuff that it does? And how does it do things differently? Let’s get all of that out of the way in this like series of videos that I’m going to be releasing so that when you actually get your hands on automatic.cs, as you already know how to play around with it, how to get started, how to put it to use. All right? I will say it’s in. It’s still in beta. I’m not publicly releasing it yet. You’ll get all the details when you read the link below. But it is coming very, very, very soon. And it’s like so close that it’s important to start getting out the videos, the announcements, all of that stuff now.

0:03:53
So let’s go ahead and dive in. We’re going to talk about spacing classes and spacing variables. So I have my little sandbox site set up here. I’m going to make this a little, not that window. I’m going to make this a little bit bigger. All right, let’s make sure that we’re still good. Yeah, in our framing. OK, cool. All right, so let’s just go ahead and get started. Off the bat, we have section padding. Now, it’s called automatic CSS, because all padding, all spacing, all text sizes, all of that is automatically responsive. Now, that’s not the only reason it’s called automatic.css. There’s a lot of other automatic things that happen behind the scenes.

0:04:33
But I want you to know, because it’s important, that all spacing, margins, gaps, anything that has to do with spacing is automatically responsive. So you’re not going to need any breakpoint controls for the stuff that you do inside of oxygen when you’re using automatic.css. Spacing is one of those hard things to get right. And it’s something that a lot of people can fiddle with. And section padding is different from div padding is different from spacing out items in a container versus building grids and things like that. So automatic CSS gives you control over all of this stuff, starting with section padding. Now, before we do this, let me make sure you can see it. So what I’m going to do is assign a class for the background, because I want us to be able to kind of see what’s going on here.

0:05:23
So I’m going to do BG secondary light as my background. Another version of automatic, another thing that’s automatic about the system is the color system that is involved with it, which is going to be its own separate video. All right, so on section padding, I’m going to go ahead and now that you can kind of see where the boundaries of the section are because there’s a color on there, I’m going to go ahead and show you some of the control you have over section padding. So there’s these pad section classes. If I want extra small padding on a section, I can put the CSS class on there. If I want to just small padding on the section, I can put the small padding on. If I want the medium, well, it’s already medium. That is the default.

0:06:05
Pad section large will give me a larger section, pad section. And by the way, this is all user controlled. One of the important features about automatic CSS is that you get to have control over all of these variables. OK, anyway, let’s check out the, so we got pad section, let’s do XXL. See the XXL version of that? And then, or that’s the XXL version, pad section, let’s do the XXL version. We get a pretty big section here. But look, when you go down, it’s not gigantic on mobile. It’s still big because you wanted it to be XXL, but it’s still very, very manageable. And what we’re, I would probably have a lot more stuff in there, by the way, besides just this heading.

0:06:52
Now, I want you to notice that the heading, I haven’t put any classes on the heading, but the heading is automatically responsive as well. And in fact, there’s perfect scale in the typography in automatic.css. So if I add another heading here, which I shouldn’t be doing, because this is not a heading tutorial or a text size tutorial that’ll come later, so this is heading to. So you can see the difference between heading one and heading to, right? And it’s going to scale perfectly all the way down. And you have control, full control, over that scale, without breaking anything. Very, very, very simple.

0:07:27
OK, let’s move on. How about div padding? So these two things are inside a div, which has no padding, because divs by default have no padding. So let’s go ahead and put another one. Let’s do BG Secondary. And maybe I want that to be just the normal secondary color, right? I don’t want it to be the light version of that color. I want it to be that actual color. Then what I want to do is I want to make the text light, but I want to inherit that secondary color so that the light text plays really nicely. Instead of it just being white text on that color, I want to use that color, but a very, very light version of that color.

0:08:01
So what I’m going to do is text. We’re going to do text secondary. And you get to choose. Do you want to do light, or do you want to do ultra light? Here, I’m going to try ultra light first, which is going to look very close to white, but you can still see that it’s that color. If you wanted a little bit less variant, you could do text secondary light. And then you get that. Let’s leave that for right now. And then I’m just going to pad. So this is not section padding anymore. This is normal padding. So I’m going to pad this with L, L padding.

0:08:36
And then I’m actually going to change the max width of this. So it looks more like a, actually, no, let’s not do that. Let’s center that. So I’m going to do center all. Then I want to center everything that’s in there as well. So I’m going to center all of that perfect. And then I’m just going to throw a little margin on the bottom of this. So margin bottom will do S. All of that that I just did is perfectly responsive. So if you see how it scales down, it’s all going to work very nice and neat. But I just put padding inside of a div. We space these items out a little bit. And in fact, those colors blend a little bit too much.

0:09:10
So I’m going to take off secondary light. And I’m going to do text secondary, or go back to ultra light. Perfect. All right, excellent. So let’s move on. That was padding inside of a div. Let’s do owl spacing. So with owl spacing, what I’m going to do is grab this. And I’m going to throw that in there. Well, let’s just delete that div. Oh, I don’t have hydrogen pack installed. OK. All right, never mind. So what else can we throw in here?

0:09:35
Let’s do an image. Cool. And I don’t know if I have any images in my media library on the sandbox. So let’s go to unsplash real quick. And we’re just going to, oh, there’s perfect. All right, we’ll just grab that. So we’ll download this for free. And we’ll put it on the desktop. Now we’ll put it in downloads. OK, I will just do photo like that. And then we’ll go to squish. And we will resize. And, oops, don’t, yes. Definitely maintain the aspect ratio.

0:10:05
So let’s just do 1600 here. And download, photo, replace. OK, now let’s go ahead and upload that. Pop it in. Perfect. OK, let’s center everything again. And now we’re going to just space all these things out evenly, right? We should probably drag that down to where it was. So I just want even spacing between all of these items. So I have this owl class, right, where I can do extra small spacing between everything. I can do medium spacing between everything. If you’ve watched, that’s actually kind of perfect. Maybe large would look really good.

0:10:42
So we’ll do owl large. If you’ve watched my video on owl spacing before, then you know exactly how it works. But what all you really have to know, like the basics of it is it spaces out everything evenly without any extra bottom or top spacing. So it’s really, really, really powerful. Now if you have two things like this where you want them kind of grouped together so they’re not spaced so far out, you want to control the spacing on them a little better, you can just throw a div in here. And then you just drag that into the div. And then you drag that into the div with it. And now you have a new little container here where you could center everything.

0:11:18
And you could even do owl on this. So it’s owl small. And now you have nice even spacing there. So you don’t have to use owl spacing, but it’s one of those things that’s very, very helpful for things. I could have done margin bottom classes on all the stuff. I could have done margin top classes on all this stuff. But the owl spacing works really well. What if I wanted a completely different background there? What if we wanted our BG base backgrounds? That’s a bit dark. So let’s take off that. Let’s go base ultra light. So BG base ultra light. There’s that same color, but a very, very light version of it.

0:11:53
That looks pretty clean. What if I don’t want this thing to be so big? Well, I can just do width, and we’ll do large. And notice it’s going to stay in the center of the screen because I’ve already told the section to center everything. So that’s very, very helpful. What if I wanted to just round the corners real quick? We’ll just do medium rounding on that. So that happens very fast. What if I wanted to break this out of its section? Have you ever seen that? So let me take the width L off of here. And what if I wanted this to go beyond the bounds of this intersection? Well, no problem.

0:12:26
I’ve got these breakout classes. We can do breakout Excel. And it just goes right outside of the bounds of that container. And it’s still, by the way, automatically responsive. It’s nothing is ever going to break. Everything is automatically taken care of for you. I didn’t have to adjust a single break point to make that thing work, right? That’s the power of something like automatic.css. All right, so I’m going to take that off. We’re going to go back to what I had before. I actually liked it when it was just smaller like that. OK, now let’s talk about grid and flex gap control. So I’m going to quickly build a little grid here. And I’m going to put a card inside of my grid.

0:13:02
So first thing we’re going to do, automatically.css, I think one of the first frameworks to introduce automatic grids. These are grids that don’t require any break point classes like you have with most systems. So I’m going to do a grid, and we’re going to do auto. And I’m going to say auto three. So this is going to be a three column grid. Now, when I put a card in here, it’s going to expand to fill the whole thing. But if I put three of them, because that’s what I chose, three, it’s going to limit it to three. So you can see right there I have my three cards. And then what I’m going to do is I’m going to put a gap on here.

0:13:36
This is a spacing tutorial after all, right? So we’re going to go with gap, and we’re going to go with M. OK, and you see my medium gap is perfectly put in there. Now I’m going to put a margin bottom on this. Because I don’t know if we’ve looked at the margin bottom classes yet. So there’s a large margin bottom on there. And I’m just going to quickly build a little card. So I want to show you the variables part of this right now. So everything else I’ve done with classes, what I’m going to do now, because with cards, think about if there is going to be 12 of these cards. I want to be able to control them all globally, which means if I want to adjust the spacing on them, I don’t have to go remove a spacing class from every single card.

0:14:17
So what I’m going to do, the best practice here, is actually to use custom classes. So I’m going to call this custom card, just like that, OK? Custom card. Now with other utility class frameworks, you kind of like lose the framework at this point, right? You have to abandon the framework, and you have to do your own custom styling, which means you’re going to have to take care of all your own responsiveness. Everything is in your hands now. When you go custom, you go custom. But with automatic.css, when you go custom, you saw the full power of the automatic CSS framework, because you can hook into the framework using custom variables.

0:14:54
I call these mirror variables, because they mirror exactly how the framework behaves. And when the framework, if you adjust the framework variables in the future, all of your custom elements will adjust accordingly. So everything that you’ve built that’s custom still works with everything else that’s based on the framework. So I’ll show you, right? So here’s your custom card. Now I can’t assign the BG class to this. So let’s say I wanted to do a base card. So it’s going to be BG base. It’s going to be like a dark card like that. I can’t do that, because it’s going to be on every card. And then I’m not going to have that global control.

0:15:29
So what I can do instead is I can choose my custom card class. I can go to background, and I can do var base. And now I’ve hooked into the automatic.css color system to put that background color in. What about the padding? I’m not going to use padding classes for this. I’m going to go to size and spacing. I’m going to set it to none. And I’m going to do var space m. And I’m going to hit enter. That gave me the top. And now I’m going to apply all. That’s going to put it all around that card, again, assigned to a custom class. So then when I add a heading here, you’re going to see, oh, and let me go to my card here.

0:16:08
So we have text base colors, our background. So what I’m going to do is on our text color for this card, so I’m going to do the typography. I’m going to go to font color right here. And I’m going to do base ultra light. The ultra light variance of that color. And then I’m going to change this to an H3. And I’m going to say card heading right here. So notice, I have my spacing in there, which is all automatically responsive, because it hooks into the automatic.css framework. I’m going to throw some text in here. And I’m going to throw a button in here, perfect. And I’m just going to throw the class button on there, which automatically inherits my brand’s primary color.

0:16:51
It does that for you, because the primary color is like the action color. So I’m just going to make this a click here. And then I actually want this button to be small. There we go. Because it’s on a card, you know, I don’t want to full size button. I just want a small button. All right. Now what I’m going to do is give this its own heading. So I have it, you know, global control over all of these headings. So this is going to be custom card, double underscore heading. And then I’m going to say custom card, double underscore text. And then this is also going to be custom card underscore button. But I’m probably not going to do any styling to that. But it’s just there for future proofing purposes.

0:17:28
OK. So this is a card. This text needs to be smaller though. OK. So I’m on the custom card text. I’m just going to go to typography font size none. And I’m going to hook into the custom variables. This is going to be text s to make that text nice and small. And then I’m just going to add some margin here. So this is going to be bottom margin none, var. And this is going to be space s. And then on this one, I’m going to go kind of large, larger. This will be m, m spacing. OK.

0:18:05
So we’ll do var, space m, perfect. And I have a custom card now. And I can go to my, well, I’ll just do that. We’ll stay there. So now let’s look at the power of the grid. All right. And I’m trying to figure out how to do this. OK. Because usually I use hydrogen pack. And that’s not installed on my sandbox. I was like, oh, I can’t copy and paste with the keyboard. But I can just duplicate. So remember, I told the grid to have three columns. So I’m going to go ahead and duplicate, duplicate, duplicate, and duplicate.

0:18:37
So now I have six cards, three columns, two rows. All of that was automatic. Now at this point, with most systems, you would have to go to a, you would have to like look at where this is going to break and decide how many columns you now want to have on large devices, how many columns it needs to be on medium devices, how many columns it needs to be on small devices, probably one, right? Well, with the auto grid inside of automatic CSS, and by the way, I’m going to do a whole thing on grid. We do have all the manual grid controls and manual grids. But this is the automatic grid, right? The automatic grid, if you don’t need granular control over what happens on all the break points, and you just want to trust the automatic.css system to handle it for you, you use an auto grid.

0:19:22
And that’s what I did here. So I did an auto grid of three. I’m doing nothing else. It is automatically responsive. So as I break down, it still looks good there. Notice it’s broken to two already. Then I come down here. It’s kept to two, because they can still fit pretty nicely. I come down to this one, and it’s decided, all right, this now needs to break to one column. It does all of that automatically. All of that happens on it. I did not do anything else to that div, all right? Like I said, you still have all the manual grid controls if you want them.

0:19:53
But if you just want to go automatic and save a bunch of time and headache and hassle, you can put, you can slap an auto grid on a container and move on with your life. So I’ve just showed you a bunch of spacing controls, padding controls, margin controls, owl spacing controls, gritting, gap flex gap functionality that will work on gap containers or flex containers as well, by the way. This is only like a 10th of the automatic.css system, right? I’m going to be releasing video after video after video, detailing key parts of this system. What I want you to do is click the link in the description below, and I want you to read about the system why I created it, how it’s different, what are the advantages, what are the disadvantages, and just familiarize yourself.

0:20:39
And then just pay attention as video after video comes out. And kind of decide like, is this a system that intrigues you? Is this a system that you think you could find immense value in when using it on your own projects? Leave comments below. I want to hear your thoughts on a system like this. This is going to get really, really fun, guys. And the system is not finished. I’m going to continue adding to it, refining it. There is a lot of cool stuff, a lot of kind of forward thinking concepts that are going to be coming to the automatic.css system. So I’m super excited about this. I hope you guys are excited about it. Hit the like, hit the subscribe, drop some comments. Let me know what you think.

0:21:24
This is just the beginning. All right? So much more to come. So much more to share with you. I’ll be back very soon.