Perfectly Space All Elements in Oxygen With ONE CSS Class AKA "Owl" Spacing

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 uh 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 to follow along uh so you know let's 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 you know used all the time in web design and development 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 3 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 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 um so i use oxy ninja which has a whole utility class system and part of that utility class system is css grid classes so um if you don't have oxy ninja it's not uh 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 3 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 column 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 oxy ninja 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 gonna break down to one and then one column versus three and then i'm gonna add a gap of large to this as well so that's gonna 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 it a little lighter than that uh 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 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 b-e-m uh 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 there are 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 lorem ipsum to put in as our text that might be like too much yeah let's just let's do that all right and then uh we'll say feature number one all right so we've got our icon we've got our heading we've got our text we've this is like a standard card right now let's just add a little styling to our cards we're gonna go because we do want this to look you know kind of like it would in in real life to some degree so there's white and then i'm gonna go to size and spacing i'm gonna go to padding none and i'm gonna put one three v max and then i'm gonna apply all so that's gonna 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 gonna do uh traditionally we're not gonna use the owl spacing technique yet that's coming we're gonna 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 vmax or whatever unit you prefer i would stay away from pixels but let's say you wanted to do like one let's let's use cause you know i like i like vmax a lot uh let's use one v max here and then i would go to the heading and i would have to say all right so u2 are gonna get one v max and then i go to the text and hey you two are gonna get uh one v max on the bottom and then the button is is just there right so now we have sp 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 um but if you're going in and adding a new card by scratch maybe you're doing this on another page you're going to go to a different page and yeah with hydrogen pack you can copy it 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 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 gonna 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 gonna be feature two and then i have to go and say okay now i gotta add a class to all those so that's card underscore icon and then i gotta come here and do card you get the point right like that'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 uh so what i'm gonna do is we're gonna clear this there's some good ways and and some bad ways right all right so i'm gonna show you a css selector here and this is you know 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 to fix these things so i have card here and i'm going to say all right i 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 uh 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 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 uh 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 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 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 called a sibling element all right so i'm going to say select and just let me just do this i'll just do it for you so you can see all right and then i'll explain what it is so this selects all elements that are direct uh the siblings of uh 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 that's basically what this is doing um so it's basically not selecting and i 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 uh 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 uh top margin this has the heading as its sibling so it gets top margin this button has the text as its 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 style sheet you'll see that this one line of c 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 are 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 uh 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 uh you know two different uh divs right or two different um yeah let's just let's just say we have two different divs and and actually maybe like three different divs because we can see how this works on like a a more global level as well so uh let's go back to our style sheet and we're gonna do we're gonna create a generic selector okay uh generic spacing so i'm gonna call this space 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 vowel spacing because there's going to be multiple versions of it m 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 one v max 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 2vmax and then if we want an extra large version let's go to like four vmax 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 gonna go back to my structure panel and you can see that div that i just added and we're just gonna call this uh container okay and then we have our three uh sections here our three like columns using css grid right i'm just going to stuff those inside this container for a second uh because there's an extra step we have to do to make owl spacing work with uh 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 use like a real world use case because you would if you were doing this with cards you would just keep going with the grid and the grid um gaps would automatically take care of this but i'm just sure i'm just uh demonstrating this technique okay um and maybe here let's just if we're gonna 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 a heading in it and it had uh like a sub text kind of thing 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 them xl 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 could actually do the same thing on the cards right um so and let me just do this real quick so everything can stay in alignment so if i didn't have the uh card spacing so let's go back to style sheets and remember this card that we created i'm just go ahead and grab this and put it at the end so that's gonna 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 there 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 um 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 uh let's go ahead and duplicate this section whoa i just duplicated the card that's not what i want to do uh 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 in properly cool okay and then on my section i want to center all that stuff nice but you see it's all colliding together and if you see if i put owl spacing extra large let's do large i like large better owl spacing and it's double dash by the way alice 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 uh different colors here so we can see so i'm going to go back to my id background and we're going to 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 car 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 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 basically added spacing to the top of this section with owl spacing and here's why and i'm gonna 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 this 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 all right so you see why that didn't work so i'm going to select ct section and a wrap and we're going to go back over here and we're going to go into structure sorry we're not gonna go into structure we're gonna go to manage style sheets and back to here and then i'm gonna 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 gonna say ct section inner wrap and then owl spacing s so owl spacing s uh 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 rap 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 i think my brain 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 gonna do is we're gonna see if that works and then if it does i'm just gonna copy this down 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 so owl spacing s 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 gonna take off owl spacing l because that's gonna 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 excel 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 gonna 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 it seems like a lot more complicated uh when you're walking through it and setting it up for the first time 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 digital gravy 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 uh 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 uh 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 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 uh over here in the selectors panel i can organize i can put things in folders so this is an alternate way to do this kind of advanced selector usage uh 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 vmax 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 uh 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 wrap with div and then put the icon inside the div 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 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 uh be all end-all expert on css and doing this stuff but these are techniques that i use often i haven't run into any problems with them uh they're they're well supported so again just 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

Channel: Digital Ambition

Views: 10,126

Keywords: oxygen tutorial, css, lobotomized owl, oxygen spacing, oxygen padding, oxygen margin, oxygen how to, oxygen builder

Id: uo1qWQWqK68

Length: 29min 22sec (1762 seconds)

Published: Thu Apr 22 2021