CSS GRID MAGIC WAND IN OXYGEN (OxyNinja Utility Classes)

so let me start out by saying that if you are not using css grid to build the majority of your layouts inside of oxygen then you are really missing out i already did a tutorial that compares grid to like the columns element in oxygen or just using flexbox controls inside of oxygen grid is far superior and it offers far more upside and it doesn't come with a lot of the negatives that the columns module and flexbox come with the problem is or the challenge is that a lot of people struggle to understand grid in the very beginning it's just like anything really it has a little bit of a learning curve but once you understand it you really unlock its power and especially this is especially true when you use a framework a utility class framework like oxi ninja and i just want to say off the bat yes i am an affiliate for oxy ninja however i i'm doing this tutorial and i use oxy ninja because literally i install it on every single website every website that i build comes with oxy ninja installed automatically it's part of the blueprint that i that i use so i would not be doing this tutorial and pumping up oxy ninja if i didn't use it on every single project and you're going to see exactly why i use it on every single project you don't know have to know anything about css grid you don't have to write a single line of code you don't have to use the grid builder inside of oxygen at all we're going to be able to build simple basic grids all the way to fairly complex grids just by using oxy ninja utility classes i'm going to walk you through the entire thing in this tutorial you're going to understand grid better by the end of this tutorial and then you're going to see the magic and the speed at which you can use and implement css grid simply by adding a few utility classes all right so let's go ahead and take a look at oxy ninja the grid utility classes and all that it empowers you to do welcome back to another tutorial everybody this one is going to be a complete game changer for you if you're not using a utility class system like oxy ninja you're going to see exactly why you need to be using a system like this let's take a look at what we're going to be able to accomplish here so i'm going to walk you through building simple even grid columns so 2 column 3 column 4 column 5 column etc we're going to talk about controlling the grid column size automatically so there's some oxy ninja presets that allow you to create like one-third two-thirds that kind of thing like offset grids and then we're going to talk about the manual column size control that you're going to have over your grids the manual row size control you're going to have over your grids we're going to talk about grid cell position we're going to talk about a really significant use case here like practical use case that you'll probably run into all the time which is alternating content where on mobile we actually want to change the stacking order so that we have instead of uh content image image content we're gonna have image content image content so that's nice and clean it's to be super easy we're going to talk about grids inside of grids and then i'm going to talk about gap control mobile responsiveness there's a lot of really cool stuff that we're going to cover and this might seem like a lot but look at the time on this tutorial it's not a lot of time we're going to fly through this and and that's going to prove to you the value of a system like this and i'm going to here's the promise i'm going to make you're not going to touch a single line of code doing any of this and you're never not once are you ever going to touch the grid builder inside of oxygen all right does that excite you it should excite you so let's get started we're going to add a div into this first section here and we'll just take a second to talk about general grid structure so here is the wrapper all right so this is the we'll call this grid wrapper all grids need a wrapper that control the grid structure and then you'll have the items inside of the grid so in order to do this in oxy ninja they make the naming convention is very very simple so for example if i want two columns i'll write the word columns and then i'll do dash two and it's going to find the utility class for me and i'm just gonna pop that onto the wrapper i now have a two column grid structure and i'll prove that to you by putting an image in here and i'm gonna set that image to a width of a hundred percent and you're going to notice that it does not span the entire wrapper because it is conforming itself to the grid structure and if i duplicate that image you're going to see exactly what's happening we have two images side by side now i'm going to select the entire wrapper and one of the things that grid is really really good at is gap control so we're going to put a gap just by typing the word gap and then putting a dash and then choosing the size of the gap we want so i'm going to choose a medium size gap and you're going to see that i now have a gap between these two items i don't have any extra room on top or on bottom or left or right so it's a perfect grid and the good thing about grid also is that as i continue duplicating these items it's just going to keep following the exact same grid structure and it's even going to put the gap automatically between the rows so i have a perfectly symmetrical grid now i'm going to delete these items because very rarely do you just throw items into a grid typically you'll throw containers into a grid and those containers will contain other multiple items like if you're making cards or something like that so i'm going to hit add and i'm going to hit add a div and i'm just going to put a class on this div that's going to create like a pseudo card like a placeholder all right so that's not really you know relevant to the actual tutorial it's just going to give us a visual placeholder for what like might be a card and then i'm going to duplicate that div and now we have two cards side by side so there is a basic two column grid now we haven't done mobile responsiveness yet i don't wanna throw too much stuff at you at once so what we're gonna do is build all these grids and then we're gonna come back at the end and talk about mobile responsiveness because mobile responsiveness is very easy but i just don't want to throw too much at you at once so i'm going to select our wrapper here and i'm going to duplicate it because i want to show you what happens if i want to change this from a two column grid to a three column grid so now i'm going to type in columns dash three and i'm gonna select that utility class and i'm gonna duplicate my card and you see that i now have three columns instead of two if i duplicate this wrapper and take away the columns three and add columns four you'll see that i end up with four columns and i can duplicate my card and all is well in the world i'm going to choose the wrapper and i'm going to duplicate that and we're just i mean this is like you know it's so fast and easy that i can actually just go through the monotony of adding all of these even though it's so obvious right so i'm going to choose the wrapper i'm going to duplicate and i'm going to do the final one this will be the last one so we're going to do in this section anyway nothing not the last one all together all right so i'm going to grab that card and i am going to duplicate so just like that in seconds i have a two column grid a three column a four column a five column and a six column grid you see how quickly that that happened you see how easy that was that is simple even grid columns with oxy ninja utility classes and they all have their perfect gaps all as well in the world let's let's move on so let's talk about different like offset kinds of grids all right so what i'm going to do is i'm going to grab the wrapper right the grid wrapper controls our grid structure and i'm going to type in columns dash one dash and you're going to see that i have two options i have a 1-2 and a 1-3 these are changing for me the fractional units of the the columns and i'm not going to get too technical with this stuff but you can see that one two is going to be a smaller first column and a larger second column so that when i duplicate this card it's automatically going to fill the rest of the space and then if i put my gap on here you'll see we'll just continue using the medium size gap all the way down you'll you'll see now that i have offset columns so these are obviously not even columns i have a small column and a large column now i'm going to duplicate this and i'm going to remove our one two and i'm gonna put on our other one so this is columns one dash and then my other option is three and so you now you see i have a slightly different grid a much smaller first column and a much larger second column now i'm going to duplicate this and we're going to roll through our other options so i have a columns 2 dash 1 and then i'm just going to go ahead and duplicate that and i'm going to take off the two one and i'm gonna put on the next one and i can you can even just do shorthand like this a lot of times like two dash and it'll just find it because it matches so there's two three and then i will duplicate we definitely don't want to make it a link wrapper all right i'm going to take off the 2 3 and i'm going to do 3 dash and that's going to give me my 3 1 and then i'll duplicate that and take off the 3 1 and we'll do 3 dash and i'll have my 3 2. so in seconds what have i done i've created a bunch of different offset columns now the thing about the auto columns is they will continue following the same format so this is the 1-2 i believe so if i uh duplicate the not the entire thing but the card inside it the next card will be small the next card will be large the next card will be small the next card will be large all right so if you want that format to to uh continue repeating all of the way down then you can use these autos if you don't want that to continue repeating if you want to make a manual kind of complex grid where you control the span of each item or each cell inside of the grid we can absolutely do that that's what we're going to talk about next so we're going to come down to grid column size control manual so i'm going to choose the wrapper here and i'm going to make this a four column grid all right columns dash four choose that and you're gonna see here that i have my four columns and you already know what we need to do next before we do anything else we need to see what our gap is okay set our gap and now let's let's say let's let's keep making two rows here all right so i'm just gonna keep duplicating these cards let's say i wanted this card to actually span two columns so it's a wide card and then these final two cards also span the two columns so i only need one of these cards to do this i'm going to remove one of them i'm just showing you how the grid works and then down here we'll only need one so i'm going to uh not duplicate excuse me oh deleted the whole thing sorry getting a little out of hand here hold on all right and click out and click in okay let's delete that one and let's click this one and delete this one okay perfect so now i remember all i'm doing here is trying to control the span of one of these elements here so i'm gonna click this card and i'm gonna type in span a really call span because there's a row span and a call span so i'm gonna do call span and then you get to choose like do i want it to span two do i want to span three do i want to span four i just wanted to span two because that's what we talked about doing and then i'm gonna come down to this end card right here remember we wanted that one to span two as well so i'm gonna do call span two and voila we are done so now i have a much more complex grid simply by adding a few classes like really one class to two different items or two different cells inside of my grid i created a four column grid put a gap on it and then on the first uh item i spanned it two columns and this and the very last item i spanned it two columns as well very very simple let's go ahead because that's so easy let's go ahead and create another one that's like that so let me go way up here and just steal one of my four column grids again so i'm going to copy that i'm going to come down here and we're going to click in here sorry when i screen record it's a little laggy and that's throwing me off here uh but we're gonna we're gonna be okay so what i'd like is one big center block actually let's not do this yet because we're gonna let's just do this in the next section so we'll talk about row size control cause now we're gonna combine column size control with row size control to create a different layout so i'm gonna choose the wrapper again and we're gonna set this to four columns man i really wish i could type better i'll practice all right so we're going to duplicate duplicate duplicate and just as you saw before we're missing a gap so it's very easy to just throw on a gap property columnsgap m perfect and then i want basically uh one large block here that spans two columns and two rows two columns and two rows so i'm just gonna start out by selecting the second item and we're gonna say call span the lag is killing me call span two perfect and then i just do the same with row so row span two so there's c row span two now you're gonna see it doesn't do anything and the reason is is because it's not stretching to fill the available space and the way that we do that is within one more utility class and this is an oxy ninja utility class simply called stretch and we put that stretch on and now it's gonna that item is gonna fill to take the available space and if i duplicate that very last card remember this is actually the last one in the position it's gonna fill on the opposite side so now what i've done is i've created a much more this is like you know a classic layout really but look how we created it in just seconds and we have our gaps it's all perfectly symmetrical it's going to continue uh you know the like if i put more content inside of this it's going to continue stretching to fill the available space it's not going to break really really powerful stuff and that was with a column span and a row span manual control simply with utility classes no code no grid builder no nothing you see how fast that happened next is cell position control so we have this box called move me and we're going to talk about how we can move this not by dragging it around but moving it with utility classes and you might want to do this i'm you know there's a lot of reasons you might want to do this i'm going to show you a practical reason here but before we get down to the practical reason let's just go ahead and test this out so what i'm going to do is use the c row start and see column start classes to determine what column and what row this item needs to be in again i am applying these to the individual item that i want to move so the first thing i want to do is move it to the first row so i'm going to type in row start and then i'm going to choose row number one and you're going to see it jumps to the first row now that's not where i want it i actually want it in this right corner over here so now i'm going to move it to the third column so if it's in the first row and if it's in the third column it's going to be in the spot i want it to be in so now i choose call start and i'm going to type in 3 and choose call start three and you see it has moved exactly to the position that i wanted to move on now what's important about this is this is me moving it on the desktop what if i only wanted to move it on a on a at a mobile break point so oxygen uh has these breakpoints by default and in oxyninja we map these to sizes so this one right here is mapped to what is called the xl size the extra large this is the large or l this is the medium or m and this is the small or s so you see these classes call start one call row start three whatever i set it backwards uh but if i do row start l you're gonna see i have another whole set here this is for the large device size so if i want this to be in row one only on large devices and below then i would put this class on here you're not going to see it move now because we're not on the large device size uh if i wanted to do column start l or m right i can change where it is on the medium devices i can change where it is on small devices this is how you control that so you have full control over a cell position an individual cell position at all break points i really want you to just understand how how extremely powerful that is and how simple it is just by using these utility classes now let's take a look at a real practical example here so if i let me make sure okay there's already a class on here so i don't want to do that all right so i've got let's take a look at our parent wrapper we've got two columns medium gap we're set to stretch and then columns l1 let me take that off so i can walk you through it so what we want to do is have these columns break to one column on large devices and by doing that here let me show you how so i'll type in uh l dash one and i'm just choosing columns l1 so on large devices there will be one column that's just how you read the class right it should be very straightforward so i put that on and when i go view the large device size you will see that it's stacked except we have a problem we have the content and then the image and then the next one is image and then content it would be really nice if we could put this image above this content right this is a classic problem that we need to solve in web design so very simple so i click on the element i want to move we just showed you how to move elements right i only want to move it at the large or i want to start moving it at the large break point every other break point below it's going to be fine by default so at the large break point i want to change its position now here's where it's a little tricky because right now there's one row and two columns so here's column one column two they're both in a row i don't wanna change its column position i don't want to swap these when it stacks on a large device there will effectively only be one column and we'll be left with just row control so i actually want to put the row start one class on here because on l devices i'm going to do row start l because i'm working on large devices and i'm going to choose one so that on large devices when this stacks the image moves to the first row alright so i'm going to click that and if we go preview you see that's exactly what we end up with so we have an image content image content now that took seconds it took longer because i had to talk you through it but if i was just building this it would have been mere seconds and i would have had exactly what i wanted to have that's the power that this uh infrastructure gives you that this framework gives you let's move on to grids inside of grids so we're going to take a look at another very common use case here so i'm holding on to my or i'm selecting my wrapper and i'm gonna make this columns and we're gonna do two three yeah let's do two three all right because we're gonna pretend now that this is an image and then we're going to put content over here and i need this side to be a little bit bigger to fit another grid inside of it so now what i'm going to do is i'm going to add a div and that's going to be the container for our content over there now two things number one you see there's no gap so we're gonna need to add a gap and i'm just gonna stick with the gap m for now but you also see that this is not filling the entire space it's not stretching all the way down all right so we already know how to fix that we talked about that we add our whoops we add our stretch class and you're gonna see right there that it snaps to uh fill the entire space and so now what i can do is actually use another utility class from oxy ninja and this one is for padding so i'm just going to type in padding man this lag is killing me absolutely killing me padding xl and that's going to put excel padding inside of this so that when i add like a heading you see that we are nice and evenly spaced out there all right so the next thing i'm going to do is i'm going to add just some text this is what a classic like maybe feature block section would look like so big image over here a feature headline and then feature text and then we're going to put a sub grid below it or just a grid inside of a grid really so in order to do a grid inside of a grid i just choose this container i'm gonna add a div and i'm gonna make it a two column grid so i'm gonna type in columns dash two and i'm gonna put i'm just gonna steal this and we'll just pretend this is another card and i'm going to pop that in and i'm going to duplicate it and then i'm just going to put a gap on this inner grid the same way that i do on all my other grids and then we can just space these things out with a little owl spacing this is not a oxy ninja utility class but it's a utility class i've done a tutorial on before so there you go we have a grid inside of a grid in seconds all right so this is you know a classic layout that you would use in web design and like i'm guessing if you try to build this with the grid builder or or manually with flexbox or whatever it would take you a while much longer than it just took me to do it that's for that's for sure so you see the power of a system like this all right now the question is what about gap control what about mobile responsiveness all right let's go back to the top so we have our two columns and let's just take a look at what happens like on on devices so this is the large device size you see this one is off the map over here so that's no good if there was content inside of these cells it would be mad squished so obviously this is it needs some love it needs some love so the cool thing about this is i can actually preview at the device sizes and then add my classes if i don't already know them now over time you're going to learn this system so well that as you're building a grid on desktop mode you can pop on the exact mobile utility classes that you need to make it perfectly mobile responsive without checking breakpoints that's pretty much where i'm at but if you're unsure you can always just go to a break point and see how the grid is behaving and then decide what you want to do and add a mobile utility class there and the thing about classes the reason you can do this is because the uh a class is not applied at a break point a class is just applied to an element so wherever you it like it doesn't matter what preview you're in here you add a class that's just adding a class it's not adding it at that break point so you can go to any breakpoint you want see what needs to change and add the appropriate classes so for example i'm good with this two column grid here at the large device size but on medium i'm not okay with that on medium i want it to be one column so i would type in m1 and that's going to give me my utility class for columns m1 which stands for on mobile devices make one column all right so there you go we now have one column on mobile devices if i go back up to the large device size i still have two columns and i still have two columns on desktop so you can see how easy that is to change the grid based on the break points so this three column uh on large devices i actually want that to break to one column because those are going to be too squished and i don't really want two columns so i'm just going to do on large i want two i'm sorry on large i want one so c columns l one now i have one on large let's deal with this four column grid here so on large devices i would actually like two of these side by side so i'm gonna do that so we'll do l dash two that's gonna give me 2 at the large device size and then on medium i want it to break to 1. so see i'm not going to go to the medium break point i'm just going to add m-1 here you're not going to see it change because we're not previewing the medium break point but when we do check the medium break point you see that we have one column all right let's deal with this much larger one here so this was one two three four five so if i go to the large here that's definitely not good in fact we might have to deal with the xl here so on excel i want three so i'm going to type in xl3 and i'm going to pop that on and i have 3 at the xl i want 2 at the large so i'm going to do l2 and then i want 1 at the medium so i'm going to do m1 and you see this is how this system works you just layer the classes on top of each other and it all works out so i come down to preview large we have two i preview medium we have one and then that's all good we don't need anything else now this last one let's take a look at our excel what we can do here so let's do three at the xl and then we're gonna be able to do uh let's check large okay let's do two at the large so that's l dash two let's do we can keep let's keep two here and say at the s is when we want it to break to one so s one so c columns s1 now we have one at the s size so now you see perfect mobile responsiveness through every single break point touching no code touching no grid builders just by using utility classes now here's what's special right yes i can change the column um the the the column number on breakpoints i can change these uh spans as well so remember we span this two columns what happens if i decide like well on a different device size like maybe on uh let's see this device size where are we here so on this device size i actually want this to just behave like all of the others so let's check my structure panel i've got the correct one done so what i'm going to say is so where we're at which breakpoint are we at so this is large so at l i'm going to do span that's call span l and i want to choose one and you see that it conforms back to one fr now one fractional unit just like all of the others and if i want to do that to this one i can say all right same thing call span l because i'm working on the l break point and i choose 1 because i just want it to be 1 there or you can say i want that one to be 3 at the large size right now i don't know if i'd ever do this kind of stuff but i just want to show you that you have full control over these items at all break points whether it's the number of columns whether it is the you know how many columns they span how many rows they span all of that is uh adjustable at every single break point we already talked about moving items at certain break points uh let's talk about gap control right because we've only been using medium gaps so far but if you ever come around and you're just like you know what i want a smaller gap for that one so this grid gets a gap of s now it's a small gap i don't like that maybe i want a huge gap right so i'll say gap xl now i can get a very big gap between the columns and if i continue to build this grid out you're going to see that the row gap responds in kind so it makes everything perfectly symmetrical again look i cannot reiterate the power this gives you the speed of development the consistency of the look and feel of the websites that you create that every single time you're using grids for layouts the spacing is going to be consistent and that's regardless of who's actually working on the site if you have a team and they're all trained and using this this uh these utility classes they can't mess it up right they're you're never gonna have grids that just look off or that break or what have you like this is going to be great for agencies great for freelancers especially but even if you're just working on your own website having a powerful system like this where you don't have to mess with the oxygen grid builder and i will you know let's put it out there the oxygen grid builder is fantastic but my question is kind of like why would you use something like that if you have cheat codes like this just get the cheat codes install the cheat codes and use the cheat codes so you've seen we've very quickly made a bunch of different grids some very advanced grids they're all mobile responsive we've taken care of traditional issues that happen across web design i don't know what else i can do to kind of convince you that that this is a extremely valuable uh system now let's talk about the uh clicking the link buying oxy ninja yes i am an affiliate for oxy ninja i'm not making this tutorial for oxy ninja commissions it's a nice like bonus i'm making this tutorial because i want to show you this stuff so that you can implement it in your game and make your life so much faster and so much easier time is money frustration is stress you want to get as much time like clear in your schedule as possible you want to get as much stress off of your plate as possible you don't want to have to mess around with this kind of stuff you want to just be able to quickly build out complex layouts in in oxygen without any headaches without any messing around have it be super consistent excuse me super consistent every single time and and then just move on with your life right so i would highly encourage you if you're not using a system like this click the link and a lot of you by the way have asked like kevin how can we how can we like donate to you how can we help support your channel don't donate money to me like don't just give me money for the sake of giving me money i love doing these tutorials i love teaching if you want to support the channel if there's a tool like this and you decide hey this is really powerful i should have this for myself just buy it through my affiliate link if you don't want to support the channel don't buy it through the affiliate link it's very very simple again i'm going to make these videos regardless i want to create content for free that's better than the stuff other people charge money for that's my main goal now along the way i'm i'm going to recommend a tool here and there and if you decide you want the tool buy it through my affiliate link and we all win you win because you get a great tool i win because i get a commission we all win because i keep producing great content like that's just how this is going to work all right so that's it for this tutorial if you have any questions drop a comment below i respond to every single comment uh hit like hit subscribe make sure you hit the notification bell after you subscribe i love you guys i'm so thankful for all of the support we just passed 2 000 subscribers which you know that's in less than a month we went from i went from like 500 600 subscribers to over 2 000 channels growing fast uh it's really really fun i love interacting with with all of you guys i'll be back very soon with another tutorial until next time peace

Channel: Digital Ambition

Views: 6,011

Keywords: oxygen grid, oxygen css grid, oxygen grid builder, oxyninja grid, oxyninja classes, oxyninja utility classes, utility classes, oxyninja grid classes, oxygen tutorial

Id: ev4SJ6y4JT0

Length: 31min 48sec (1908 seconds)

Published: Thu May 13 2021