0:00:00
Hey, what’s up? Welcome back to the channel. My name is Kevin Geary and this is the place for digital agency owners and freelancers. If you love agency growth content and in the weeds tutorial based content, especially related to UX design, web design, SEO, and oxygen, then definitely hit subscribe. Definitely hit the bell so you get notifications of new content. All right. Today we’re hopping back into oxygen. I’m going to show you what I call the owl spacing technique with one line of code and one CSS class. You can space evenly every element inside of a container or a section in oxygen. Very, very powerful keeps code to a minimum excellent technique. Also makes spacing across the entire site very, very consistent. Again, I call it the owl spacing technique. Why? Because it’s based on the lobotomized owl CSS concept. However, you don’t need to know anything about CSS. If that kind of stuff scares you, no problem. You can just grab the code, plug it into your style sheet, start using the classes and you’re off to the races. But if you want to see how it works, if you want to see how it’s created, I show you all that inside this video. So let’s go. All right, guys, let’s go ahead and get right into it. We’re going to talk about evenly spacing elements inside of sections and containers. I call this the owl spacing technique because it’s based on the lobotomized owl concept in CSS. You don’t have to know any of this stuff to follow along. So let’s just get right into it. So I have a blank page here in oxygen. I’m going to say add and we’re just going to add a section to start out with. And then we’re going to use this concept first with cards, which are used all the time in web design and development.
0:01:45
So I’m going to add a div. And we’re going to give this div a class of card. And I’m going to put some basic elements inside of this card. So let’s say this is going to be like a feature card, for example. So we might have an icon and we might have a heading. And that’s going to be a level three heading. And then we might have text. And oops, I don’t need to be putting a class on this yet. Add a text element. And then let’s add a button element. And I’m going to talk about some best practices as we go through this as well. Now typically, you know, cards are they don’t exist just by themselves, right? So I’m going to add another div below. And this is going to be our columns. And I’m just going to quickly use. So I use oxygen, which has a whole utility class system. And part of that utility class system is CSS grid classes. So if you don’t have oxygen, it’s not, it’s not required for this tutorial, basically, but you’re going to see me use it. So I’m going to just do columns three here. And it’s going to set me up for three columns. If we look in the structure panel, here’s my card. I’m actually going to name it that so we can keep everything organized. And then this div right here is my columns. So I’m just going to throw this in here. And you’re going to see that it already shrank it. And then I’m going to be able to add more columns there. And I’m going to end up with three columns. And then while we’re here, for any of those of you who are wanting to learn how to use oxygen in a CSS classes, especially with grid because it makes CSS grid like phenomenally easy. I’m just going to go L1. And that’s C columns L1, basically at the large mobile size. It’s going to break down to one. And then one column versus three. And then I’m going to add a gap of large to this as well. So that’s going to put a gap between my cards. And let me go ahead and put a background on this section so that you can see what we’re actually doing here. All right. So here is, and that’s just an ugly color. I like, you know, let’s make a little lighter than that. How about like that? Okay. Cool. So here is my card. And I have an icon, a heading, text, and a button. We’re going to talk about how to space elements evenly inside of sections and containers. That’s the whole point of this, right? So the first thing I’m going to do, let’s talk about best practices here for a second. You need to have a class on each of these things.
0:04:14
Not to use this technique, but just best practice. You need to put a class on each of these things. And I use, I like to use BIM naming conventions, BEM. It’s, you know, nothing fancy. It’s just like this, right? So you click on your icon. Remember, this whole thing is a card, right? So all of these are parts of a card. They’re elements inside a card. So in order to keep our naming conventions very clean, we do card and then double underscore icon, right? And then card, double underscore, heading. And then I click the text, card, double underscore, text, and then card, double underscore, button. Cool. And I’m just going to say that this is a click here. And we will go to, let’s just quickly grab some, Laura, Ipsom to put in as our text. That might be like too much. Yeah, let’s just do that. All right. And then we’ll say feature number one. All right. So we’ve got our icon. We’ve got our heading. We’ve got our text. This is like a standard card, right? Now let’s just add a little styling to our cards. We’re going to go, because we do want this to look, you know, kind of like it would in real life to some degree. So there’s white. And then I’m going to go to size and spacing. I’m going to go to padding none. And I’m going to put one three V max. And then I’m going to apply it all. So that’s going to give us some nice spacing. That might be like a little too much. All right. Cool. So there’s a little padding on our card. But you still see we have the problem of these elements being all squished together. All right. So here’s what we’re going to do.
0:05:52
Traditionally, we’re not going to use the owl spacing technique yet. That’s coming. We’re going to see what the problem is here. So traditionally, we would say card icon, right? And we would add our bottom margin to this. So I’d go to like, I’d use rim or V max or whatever unit you prefer. I would say away from pixels. But let’s say you wanted to do like one, let’s let’s use because, you know, I like, I like V max a lot. Let’s use one V max here. And then I would go to the heading. And I would have to say, all right. So you two are going to get one V max. And then I go to the text and hey, you two are going to get one V max on the bottom. And then the button is just there. Right. So now we have our element space. But look what that required, right? So I have a class on each of these things. And then I have spacing on each of the classes for those elements as well. So now I say, you know what I want to make another card. Well, I can always just duplicate the card, right? Which is cool. That’s super efficient. But if you’re going in and adding a new card by scratch, maybe you’re doing this on another page. So you’re going to go to a different page. And yeah, with hydrogen pack, you can copy, you can paste to, you know, in between pages. But just roll with me for a second. Okay. If I was creating another card from scratch, I would have to apply the card, right? And then I would have to add the icon. And then I would have to add a heading.
0:07:26
And I would have to add text. And actually while I’m here, let’s go ahead and just say H3 on that. And then I have to add text. And then I would have to add a button. Cool. All right. So and then we’re going to say click here again. And then what I have to do. And let’s go ahead and get that text. I just want these to be all the same for now. This is going to be feature two. And then I have to go and say, okay, now I got to add a class to all those. So that’s card underscore icon. And then I got to come here and do card. You get the point, right? Like it’s a lot of manual work. So the question is what if there is a way to just automatically space all these things like that? And so there are some ways to do it. So what I’m going to do is we’re going to clear this. There’s some good ways and some bad ways, right? All right. So I’m going to show you a CSS selector here. And this is one way people might try to tackle this. And I’ll show you like problems. Like the thought process we go through to try to fix these things. So I have card here. And I’m going to say, all right, I want to add margin, even spacing to all those elements, right? So one thing I can do is I can select my card. And I can say, and this, this is a direct child selector. So I can select all the children of the card element. And we are going to, and by the way, this is how you select everything. All right. So a little star. So this means I’m selecting all direct children inside of a card. And I say margin, bottom. And we were using one V max, right? And so you see I have even spacing, except there’s a problem with this, right? This button is a direct child of the card.
0:09:19
And also got bottom spacing, which we actually did not need. Because now there’s more spacing on the bottom than there is on the top. So this is not a useful solution to our problem. So then people say, all right, well, to get rid of this, what if I just put margin on the top of everything? All right. So we’ll just change this to margin top. It works, right? But you still see we have, now we have more on the top than we did on the bottom. We don’t want that either. All right. So we have to go further into our CSS journey. Now this is where the lobotomized owl technique comes in. And what I call owl spacing. And we’re doing this on a card. But I’m going to show you how you can use this actually, generically on any container. All right. So first things first, let’s delete this. So I actually do want to select all children. But I only want to select children that are adjacent to another element at that same level. What’s what’s called a sibling element. All right. So I’m going to say select and let me just do this. I’ll just do it for you. So you can say, all right. And then I’ll explain what it is. So this selects all elements that are direct the siblings of all the elements that are children of the card. Oh my gosh. I don’t know if I even said that correctly. All right. But that’s basically what this is doing. So it’s basically not selecting. And when you do this, you want the margin to be on the top. And the reason is is because we look at the card. Here’s the card level. Right. So I’m basically saying select anything that has a sibling. Right. Any child that has a sibling. This child element does not have a sibling above it. Right. This does. It has the icon above it. So this gets top pat top margin.
0:11:17
This has the heading as it’s sibling. So it gets top margin. This button has the text as it’s sibling. So it gets top margin. The icon has no sibling. So it does not get any top margin. So we have even spacing without any extra at the top and without any extra at the bottom. That is what this technique does. All right. So if I go back into the silo sheet, you’ll see that this one line of see or this one selector, I should say, and really one line of CSS evenly spaces our elements there. Now let’s check this out. So if I go to add another card, remember that problem we had earlier. So I add the card class to this. And then I add an icon. And I add a heading. And this is going to be an H3. And then I add text. And then I add a button. You see naturally it’s all like if these were the same height. Okay. And I can just go see with these classes. I can just add a stretch class. And now they’re all equal height anyway. Click here. Look, the spacing, I didn’t have to go add the classes. Now I should as best practice, right. Still add all of those classes eventually for you know, ultimate scalability purposes and future proofing. I should still add all of the classes to these items. But the spacing is already automatically taken care of. Okay. Now let’s say I had you know, two different dives, right. Or two different, yeah, let’s just let’s just say we have two different dives. And actually maybe like three different dives because we can see how this works on like a more global level as well. So let’s go back to our style sheet. And we’re going to do, we’re going to create a generic selector. Okay. Generic spacing. So I’m going to call this spate, owl spacing. If I can type today. And I’m going to say owl spacing. And we’re going to do, actually we’re going to do owl spacing double dash because this is a type of owl spacing because there’s going to be multiple versions of it in for medium. All right. And then I use my direct child selector. And then we’re going to do the lobotomized owl technique. And then I’m going to say margin top. So for medium spacing, let’s just roll with like, let’s just roll with the 1v max.
0:13:51
Okay. Cool. And then let’s say we want a large version. So if we want more padding, let’s double that. Let’s go to two v max. And then if we want an extra large version, let’s go to like four v max. And then maybe we also want a small version. And this is going to be like 0.5 v max. So these give you the option. Basically if I add this class to a container, anything inside that container is going to be evenly spaced to these varying degrees. So the small, medium, large, and extra large give me extra control over how much spacing there is. Now in oxygen, there’s one extra step because I’m going to show you in the code just in just a second. So what I’m going to do is add a div. And I’m going to go back to my structure panel. You can see that div that I just added. And we’re just going to call this container. Okay. And then we have our three sections here, our three like columns using CSS grid, right? I’m just going to stuff those inside this container for a second because there’s an extra step we have to do to make owl spacing work with sections in oxygen. Okay. So there we are. So if I’m on the container level, which contains all of these columns, and I put in my owl spacing, owl spacing, and then I just decide which one I want. Maybe M. You see, I have even spacing between all of those now. This isn’t a real world use case because if you were doing this with cards, you would just keep going with the grid and the grid gaps would automatically take care of this. But I’m just demonstrating this technique. Okay. And maybe here, let’s just, if we’re going to do it more realistic, let’s say you had a container there and then you had another div. And then this div had like a heading in it. And it had like a subtext kind of thing.
0:15:55
Right. And so you see now, and if I put that on top, which is be more like how it goes, and then we can center all this stuff. And we can center everything in here. Okay. All right. So now you see like we have a heading and text and now there’s space between those elements, which did not exist before. If we take off our owl spacing M, these things all collide together. What if I put owl spacing extra large? I get even more spacing between these groups. And then let’s say I threw another group down here. You can see it’s automatically spacing all of this stuff out. So this maybe goes to be like an H3 level. And then I have more text there. So this is like another supporting heading. And then there’s text with it. This is the main headline. And then just for this purpose, we throw in our third card. And so you see everything in this container is evenly spaced out with one class. I didn’t have to go in here to this container and add a margin bottom to it. And then add a margin bottom to this container that’s holding that none of that stuff. I just select the parent container and I say, hey, I want all these things spaced evenly. Right. And I want to excel spacing. If I don’t like that much spacing, well, I just created an L. Right. So I can get a little bit less and a little bit less and a little bit less. You can actually do the same thing on the cards. Right. So let me just do this real quick. So everything can stay in alignment. So if I didn’t have the card spacing, so let’s go back to style sheets.
0:17:35
And remember this card that we created, I’m just going to go ahead and grab this and put it at the end. So that’s going to take our card away. So if I just went owl spacing, M, and I did that to every card, I would get the same effect. The problem is that you’re having to do this manually. Right. And it’s better on an element where it’s a card where you might have three of them or six of them or nine of them or a hundred of them or whatever. It’s better to give it its own owl spacing like we did in the style sheet. So because then you just have to use the card class once and it automatically takes care of it. So I don’t have to do it to each individual element. You can see as I remove them, they’re the spacing is staying the same because I gave the spacing back to the class itself. Right. And so you can do that with anything really. Lots of there’s tons and tons of use cases for this. Now for sections, because this is super useful for sections too, which I’ll show you. Right. Let’s go ahead and duplicate this section. Whoa, I just duplicated the card. It’s not what I want to do. Let’s go to section up here and let’s duplicate. And then I want to take everything out of that container so that we can do this at the section level. No, no, there we go. Okay. Delete the container and then everything’s spaced and properly. Cool. Okay. And then on my section, I want to center all that stuff. Nice.
0:19:07
But you see it’s all colliding together. And if you see, if I put owl spacing extra large, that’s too large. I like large better. Owl spacing and it’s double dash, by the way. Owl spacing double dash large. Uh oh, it broke. And the reason it broke is because of how this is structured in the HTML. And let me get different colors here so we can see. So I’m going to go back to my ID, background and we’re going to choose, um, yeah, just a lighter gray, even lighter gray. Okay. So let’s save that. Let’s go back to the front end and let’s take a look. Cool. So here’s our section where the owl spacing broke. Actually, it doesn’t look like it broke. Um, but it does break in the builder. Let me see. Let me, let me just check this real quick. Um, yeah. No, it’s not there. Okay, it’s because the, okay, the card, duh, uh, I didn’t select a gray. I selected a white apparently. Um, yeah, text or at least it’s the same color as the card. I don’t know. Okay. Uh, yeah, let’s do that one. And then let’s do text light. Okay, so we can see everything. Okay, now we’re set. All right, so we go back to the front end. We refresh. Here’s what we’ve got. And unfortunately, we don’t have, um, all right, let’s fix this real quick. Uh, so we go to card and we go to text, typography, color and, boom, okay, thank you. Can we move on now? All right, let’s refresh. So here we are. Uh, we have the problem of, we, we basically added spacing to the top of this section with owl spacing. And here’s why. And I’m going to give you all this code because this is a little advanced, right? If you, but you can copy and paste all this stuff and then just use the classes, that’s kind of the point of this tutorial. But I do want to show how this stuff works for people who do like to write CSS and who might want to, you know, really understand how this technique works. So, uh, let’s take a look here. We’ve got our section. This is where we put owl spacing L. You can see it right there on the section. But what it’s selecting is the first, remember, it’s looking for direct children. There’s only one direct children of a section in oxygen. And that’s the CT section inner wrap. That’s not what we want to select. We want to actually select the things inside the inner wrap, which are the actual children that we’re trying to target.
0:21:34
All right. So you see why that didn’t work. So I’m going to select CT section inner wrap. And we’re going to go back over here. And we’re going to go into structure, uh, sorry, we’re not going to go into structure. We’re going to go to manage style sheets and back to here. And then I’m going to show you another trick that you can do with this stuff as well. Um, all right. So let’s come down here and we’re going to say CT section inner wrap and then owl spacing S. So owl spacing S. And actually, sorry, we need to do it this way. Um, let’s go back and grab CT section. Because if it’s a CT section with the class of owl spacing. So CT section with the class of owl spacing S. Okay. Then we target the CT section inner wrap. Then we get our direct children with adjacent siblings. Okay. And then I put a comma after this. Uh, I’m hoping I wrote that right. Uh, I think it might bring by the way. Uh, so if you’re, if you’re new here and I’m new here. Uh, so let’s enter, let’s, let’s introduce each other. Uh, I, my brain works less when I’m recording my screen for some reason. It’s like that same thing. Like, you know, people can’t do math in public, which I also can’t do math in public. I also have a hard time coding in public or like, you know, when I’m doing it live and I know people are watching, it’s, it breaks something in my brain. So I might have to do things, you know, two or three times or do extra problem solving when I’m doing this stuff live. Uh, so what I’m going to do is we’re going to see if that works. And then if it does, I’m just going to copy this down. Um, and then what we need to do here, this owl spacing S is, see, you know, if you put this on, there’s going to be a conflict, right? Um, so owl spacing S.
0:23:26
And I’m going to do not, uh, CT section, okay? Believe that is what will work. Okay. So let’s, let’s try this with owl spacing S. So I’m going to take off owl spacing L because that’s going to mess things up. Owl spacing double dash S. And you see, we got no, no spacing on the top of the section. And we have even spacing the very small version between all of the three core elements, which are the heading div that contains both of these things, the columns div that contains the cards and then the bottom div, which contains both of those elements, those things are all evenly spaced. So now I’m going to go back to my style sheet here. And I’m going to copy that line right there. And I’m going to paste. And then I’m going to paste, let’s keep these things spaced out. And then I’m going to paste there. And then I’m going to change this to M. And I’m going to change this to L. And I’m going to change this to XL. And now if I go and I decide, you know what, I want large spacing here. There it is. And you see, we’re still getting that. And the reason is because I didn’t add those not tags, right? So if we say not CT section, okay, I’m going to paste that there, paste that there, paste that there, and hit save. And then refresh. And we have our large even spacing between all of these elements. All right. And so that’s a, you know, it seems like a lot more complicated when you’re walking through it and setting it up for the first time.
0:25:10
But just know that you now with a little bit of prep work have a generic spacing tag that you can put on any container, any section where you can say, I want to evenly space everything in this container. I want to evenly space everything in this section in oxygen. And you don’t have extra padding or margin on the top. You don’t have extra spacing on the bottom of the final thing. It all works nice and perfect. Now let me show you one other thing. So in the style sheets, go to style sheets and did it all great. So this thing right here, right? There’s really no reason for that to be. It’s one line, right? There’s really no reason for it to be in the, in an actual style sheet, right? So I’m going to show you by deleting this, how we can actually do this inside of oxygen. So, and this is a really cool feature that you can use not just with this technique, but with any kind of what I would call an advanced CSS selector or just a non default CSS selector. Got me? Okay. So here’s our card, right? We need to style this card and we want to use that technique. So I’m going to go to manage and I’m going to go to selectors and I’m going to click add a selector and I’m going to type in card with the CSS selector dot ahead of it. And then I’m going to type in my actual my whole like line, the whole selector, right? Which is the open carrot and then our star plus our star. Oops. All right. So that is the technique we’re trying to use, right? And I hit okay.
0:26:41
And I have the selector here and now look, I have the panel over here where I can go to size and spacing margin to the top was one V max. And now you can see that our spacing technique has worked. And I’ve created the selector inside of oxygen with a panel inside of oxygen instead of having to write all of the CSS right by hand. And and all of this is over here in the selector’s panel. I can organize. I can put things in folders. So this is an alternate way to do this kind of advanced selector usage. And that is the owl spacing technique. If you have any questions about this technique, I’m going to put the code down below in the description area and stuff so you can just copy and paste it into your own style sheet and start using it. What I would recommend doing if we go to style sheets. Remember, you can make extra versions. There can be an extra small version. There can be an XXL version. You can use instead of V max. You could use rims. You can use clamp functions. You can use whatever you want here. So feel free to customize this. But this is the basic technique. I think it’s super powerful. We saw some of the problems with the traditional ways of doing spacing, especially if you need spacing to be even. Oh, one last thing. So if you wanted these two things to be close together, then and you still wanted to use this technique with everything else. Because maybe there’s even more elements, right? And it’s just these two things that you want to be close together. One way to take care of that is we go to our structure panel and we look at our card. We can go over here and we can just say rap with div and then put the icon inside the div.
0:28:23
These two things separately are no longer direct children. The div that contains them is the direct child of the card element. So these will not get the owl spacing technique applied to them. So now they can be super close together where you see these two are far apart to match the owl spacing, right? So if you guys have any questions about this stuff, don’t hesitate to drop a comment and ask if you saw anything that I can improve on. If you saw any mistakes that I made, anything that’s not going to work somewhere, anything you think is going to break. Let’s have a discussion about that as well, right? I’m not the be all-in-doll expert on CSS and doing this stuff, but these are techniques that I use often. I haven’t run into any problems with them. They’re well supported. So again, this open to discussion. I always want you to know that. Hit a like if you like this video, drop a comment, make sure you subscribe to the channel if you want more great stuff and that’s it for this lesson. Peace.
