0:00:00
What’s up everybody welcome back to the channel. Today’s video is going to be nice and short and sweet but it’s going to save you from a trap that a lot of people fall into when creating grids. Specifically when creating grids with utility classes. Now you should know that I’m developing a utility class system called Automatic.CSS. So this isn’t a situation where I’m like anti utility classes for grids or anything like that. I love utility classes for grids. In fact Automatic.CSS is one of the only systems that I know of that actually has automatic grid utility classes inside of it. So again this isn’t a situation where I’m biased against utility classes for grids. It’s a situation where you should absolutely not use utility classes. So we’re going to jump into the training site. I’m going to show you what not to do and then I’m going to show you what to do instead. Okay.
0:00:54
So let’s go ahead and hop in. Again this is going to save you tremendous amount of headache, struggle, strife, frustration because you’re going to easily get yourself into a situation where you break the scalability of the site. You break the future proofing of the site and you just put yourself in a situation where you’ve got to go do a lot of manual work where you shouldn’t have to do a lot of manual work. Okay. Alright. So I’ve got a testimonials card here and I’m going to build a grid for it the way a lot of people would do. We’re going to use utility classes. We’re going to use the automatic.css system. So I’m going to go ahead and hit add and we’re going to add a div. This is going to be the wrapper for my little testimonial grid here and I’m going to put a class of grid three on this and that’s going to give me a three column grid.
0:01:42
And now because I already have the card designed, I just have to drag the card into the grid. So now the testimonial card is inside of the grid. I want you to use your imagination and just think that I’ve actually put a repeater in here and we’re querying these from a custom post type called testimonials and all these testimonials are different. Okay. So in reality though, in training, I’m just going to duplicate them. So we’re going to have six of these testimonial cards. I’m going to again highlight the wrapper and I’m going to add a gap. So we’re going to do a gap of s. Alright. So I’ve got the bones of my grid but it’s not responsive, right? Because this is not an auto grid. So if I come down, you’re going to see it starts to squish. So I have to add two more utility classes.
0:02:29
One for the large break point. That’s going to make it break to two columns and then one for the medium break point, that’s where it’s going to break to one column. So that’s super easy. We just do grid L2 and we do grid M1. So now at the L break point, I have two columns and at the M break point, I have one column. So I now have a fully responsive grid and this is why people like utility classes for creating grid. It’s very quick and it’s very easy. The problem is here is a use case where we have testimonial cards, but this could be service cards, location cards and it’s a situation where we’re going to use a grid like this on maybe dozens of pages across the website. If you haven’t watched my video on custom post type use cases yet, I’ll link to it. Definitely go watch that. There’s a lot of value in it and you’ll start building more intelligent websites where, for example, with testimonials, if a company has 10 services, we’re going to have 10 service pages and on each one of those pages, there’s going to be a testimonial grid except we’re going to use relationships, bi-directional relationships, to only show testimonials that are related to each service.
0:03:44
So that when somebody’s reading about service A, they see testimonials about service A and service B has testimonials about service B. It’s an intelligent way to create a site. But what that means is that we’re going to have 10 of these testimonial grids and right now you saw me take four utility classes to build this grid and this structure is now set. If I copy this to other pages on the website and then the client says, oh, actually we want that to be two columns instead of three. And actually I’d like it if the gap between those cards was a little bit bigger. Now watch what happens. I have to go to this grid manually. I have to take away the grid three. I have to put a grid two on there. I have to now take away this other L tube because that’s no longer necessary. I have to remove the gap S and I have to put a gap in. So now we have two columns and a bigger gap.
0:04:41
But the problem is I now have to go to every other testimonial grid on the website and make those same exact changes. That is an absolute nightmare. It breaks scalability. It’s not future proof. The bigger the site gets, the worse the problem gets. You have no global control over these grids when you use utility classes. So this is a situation where like I said, you absolutely should not use utility classes for a situation like this. What should you do instead? Watch. I’m going to take away the utility classes completely. We’re not going to use them for this type of use case. I am going to put a custom class on here. It’s going to be called testimonial grid.
0:05:28
I am going to use the oxygen grid builder. Now if you are afraid of the oxygen grid builder, I’m going to show you the ropes real quick. We’re not going to dive in. This isn’t a deep dive. We’re just going to show you how to create the grid that I just created. You can really make any basic grid if you know these few things. So I’m going to click the grid button here. First thing you need to understand is that when I put those utility classes on the grid three class, it automatically makes that wrapper 100 percent width. So the first thing you can do when you put the grid on testimonial grid to do kind of the same effect is come down to the width area, change that to percent, and make it 100. Now your grid stretches across the entire max width of your website. It makes it easier to work with. Now I’m going to go up and I’m just going to control the column count. It says right here, column count.
0:06:21
Instead of one, I’m going to put three because we’re building a three column grid. Unfortunately, oxygen tries to do some of this stuff for you. It’s got this minimum width and a lot of people are confused by this whenever you choose the number of columns. So when you explicitly tell this grid to be three columns, this number does not matter whatsoever. Okay? So just delete that. Like you don’t even need it. Don’t even be confused by it. Just take that number away. That number minimum width only matters if you’re auto-fitting the columns, which we’re not going to get into. So you’re going to be setting an explicit number of columns. You’re going to take away the minimum width.
0:06:58
You don’t need that. The max width is 1FR. Okay? That’s one cell unit basically. You’ve already told it three. So each card is going to expand its full unit, which is one third basically. Okay? Don’t even worry about that. That’s too, like you don’t even need to know that. It’s set by default. It’s fine. You don’t even need to change that. What you do need to change is the gap. So by default, oxygen sets, this is 20 pixels. Well, you already know probably don’t use pixels, right?
0:07:27
If you’re using the automatic.css system, one thing you could do is just change this to rim, by the way, and then make it too rim. That’s equivalent. Well, we’re not even going to get into that. Okay? Yeah. We’re not even going to get into that. If you’re using automatic, though, you can actually hook in to the spacing system in automatic. So I can change this to none and do var space in. And then I’m going to have a spacing with gaps that perfectly matches all the other spacing on my website. All right. So that’s only if you’re using automatic.css. Anyway, we’re going to keep moving on.
0:08:02
You also have to do this for the row gap. So there’s a column gap that’s right here, running vertically, and there’s a row gap right here. Typically, you want those to be the same thing. So you have to come down and you have to go to none. And then I’m going to paste my same variable for space in. Now the column and row spacing matches equally. All right. So I have basically, and just a couple little controls here, created the same grid that I had before, except I do have to do the responsiveness. And the responsiveness, like where it breaks it, or how many columns are at each breakpoint, that’s where people get totally lost with this grid builder. And I’m going to show you why. And I do agree with you. It’s confusing.
0:08:47
But once you know what’s going on, it’s no longer confusing. All right. And the grid builder in oxygen is very, very powerful. It’s really well done. It has some quirks. But like I said, once you understand the quirks, you’re safe. You’re good to go. So what I’m going to do is I’m going to go to the breakpoint that I want to make the change at, less than 992. And what I have to do here is I have to click the grid button again. And then it’s going to basically go back to the defaults. It’s not going to remember anything that I did. Like you would expect it to. But if you know that it’s not going to remember anything that you did, and you just have to basically create a new grid at this breakpoint, you should be comfortable doing that.
0:09:27
So I change the columns to 2. I go back and paste my variables in the column gap and the row gap settings. And I don’t have to worry about men with or max with on this because again, those are irrelevant because I’m setting this as an explicit grid. So now I have a two column grid at this breakpoint. But guys, look, I’m doing this on this class. I’ve been doing all of this on this testimonial grid class, right? So now I’m going to go down to the M breakpoint. I have to click the grid button again. This time the one column is good. That’s exactly what I want as the default. But I still need to change the gaps. So I’m going to go back and redo the gaps. I would really love it if it remembered the gaps from what I did on the desktop. That would be nice.
0:10:15
It doesn’t. It’s a quirk. You’ve got to deal with it. But now I have a fully responsive grid. If we save this and go to the front end, I have a fully responsive grid. Looks good. Boom, boom. Now, what is the benefit of doing this? Well, because I built this grid on this class, I can easily replicate it anywhere across the website. And I have global control over my testimonial grids. So when the client says, hey, you know what? We’d rather have two columns. We’d rather the gap be a little smaller in this instance. Okay?
0:10:52
Let’s just, they’re making stuff up now. So all I have to do, any grid on my website, that matter if I’ve used this 10 times or 100 times, I go to the grid, I grab the class right here, I change the column count to two, I change the spacing to S instead of M. And I change the spacing here to S instead of M. And I’ve now effectively changed that grid everywhere. Now I can actually go in and delete the styles that were attached to this because they’re redundant. And then if I go to the M class, I just change the gap here from M to S. And again, it doesn’t matter if I’ve used this grid on 10 pages or 100 pages or 1000 pages, the changes that I just made because I attached them to a custom class just were made everywhere automatically, right? That’s the power of using the oxygen grid builder. And again, the use cases would be any grid structure or use case like testimonials, services, locations, whatever, that you’re going to use repeatedly throughout a website, do not use utility classes for that, use the oxygen grid builder and attach those styles to a custom class.
0:12:14
That is the advice that I would give you to make sure that your website is scalable and to make sure that your work that you’re doing is future proof and to avoid nightmare scenarios where you need to make a change across however many pages. And it’s just like manually removing and adding utility classes because everything that you did was built manually with utility classes. You don’t want to be stuck in that situation. So that’s basically all I’ve got for you guys today. I hope you found this super valuable and useful. I know that if you can avoid this trap, you’re going to like thank me later. And if you don’t avoid this trap, you’re going to get stuck in this trap and wish you had known better before you got so deep into it that now you have to redo everything that you just did, all right? So that’s it, drop a like, drop a comment, hit subscribe if you aren’t already subscribed and join me in the inner circle. We just crossed 500 active members in the inner circle and it’s going absolutely fantastic there.
0:13:14
And if you’re a member of the inner circle, you get access early bird access to automatic. CSS and my inner circle is also going to get a great lifetime deal offer for automatic. CSS as soon as the plug in is ready. So inner circle is the place to be. I’ll see you there.
