How to Create a Custom Responsive Grid in Oxygen (Best Practices & Grid Jiu Jitsu Tricks!)

what's up everybody welcome back to the channel it is super early in the morning and i don't usually do tutorials in the morning but i have a really really busy day today so i wanted to get this done and out of the way um it's a highly requested tutorial we're going to talk about how to build a custom responsive grid in oxygen and we're not going to be using utility classes we're going to be using the grid builder in oxygen and this is i you know i wanted to do a grid builder tutorial but i don't want to do something boring like let's just go through every setting in the grid builder and explain how it works what i'd rather do is just build a real world thing and i also want to throw in some uh some jiu jitsu type tricks right like some grid jiu jitsu uh we're gonna do a staggered grid and we're gonna do a staggered responsive grid that auto staggers i don't know let me just show you an example okay instead of trying to explain it so i'm gonna screen share i pulled up trello.com because a lot of sites use this technique online but uh you know i was just looking around to try to find a quick example and trello's site happens to have one so if we start scrolling down here you're gonna see that a lot of times when companies are trying to demonstrate features or talk about features they use this kind of grid where it's an image or an asset and then feature text and then you come down and it staggers so there's it's asset on the left content on the right content on the left asset on the right asset on the left content on the right you get the picture right of course when you drop down to mobile on something like this so if we inspect this and bring up our mobile editor here you you come down and you see what has to happen now trello's um you know they do it a little bit different than i tend to do it like right here they kind of go really small with the asset uh and the text really hasn't changed much um but then they finally stack and when it stacks what you're gonna notice is the asset always comes before the contents you have asset content asset content asset content that's how it's nice and clean you don't want it to be asset content content asset that doesn't that doesn't make any sense for the flow of the page so let me get out of responsive mode here so what we have to do is we have to use the grid builder and oxygen we're not going to be using utility classes vanilla oxygen grid builder and i'm going to explain how the grid builder works as i go through this tutorial this is what i would say as let me let me go back to camera here this is like a follow along tutorial don't just watch this tutorial if you are not super familiar with the grid builder in oxygen or you want to know it better and be more confident with it follow along with this tutorial open up a blank page and let's go step by step through this little tutorial here and then you will be confident because what we're also going to do if you if you look here we also have to think about spans because if you notice this asset side is smaller than the content side this is wider this cell over here is wider than this cell right here so in this tutorial we're going to cover column spans which is really important when you're building custom grids you really want to know uh the power of column spans so we're going to cover that as well so you're going to learn a lot in this tutorial but you're not going to learn a lot if you just watch the tutorial i really want you to follow along with this so this is what we're going to build right here i have a blank page set up here and we're just going to dive right in so i'm going to hit add and we're going to first add a section we're also going to talk about you know best practices with custom class names and things like that i really encourage you to win your building you can go for speed just like how fast can i get this done or you can go for here's how to do it right here's the best practices and every time i build a grid or every time i build a component on a website i am going to implement best practices to my best ability right there's always things you're going to get better at in the future but you definitely want to implement best practices at all times and not go for speed right you go for speed and then bad things happen with future proofing and being able to edit the website easily and you know at some point down the road so we're going to cover those best practices all right so the first thing i need is just let's get one of the grids set up and by the way this is not one single grid what we're gonna do is we are going to build uh separate grids for these okay because this ultimately gives you more control over things so we're going to just build the first grid which is an asset and then content asset on the left content on the right and then we're going to talk about how to make one side bigger than the other so i'm going to add a div the div is going to be my grid wrapper all right so we're just going to start kind of by adding components i have the structure panel open over here i will try to name things as well so we're going to call this grid wrapper awesome now you can name whatever you name over here doesn't matter that's that's for you okay so whatever makes the most sense to you go for it now what we're going to do is we're going to apply a class to this we're going to call this a feature grid or a feature row even right um so you could say feature row and that would that can just be our custom class so we'll just go with that um feature row like this so feature dash row now on that class we are going to enable the grid so we're going to click the grid button and it's going to ask you the column count now before we get into this i want you to scroll all the way down and you're going to find this width box almost always you're going to find that you want to set this width to 100 now there's cases where you wouldn't want to do that but in a situation like this because we are these are spanning the full width of our of our page uh not the full width of the screen obviously but the full site width the the viewport max of the website we want that to be 100 so you set that to 100 the next thing that we need to do is look at here this area where we have default settings from oxygen oxygen is trying to give our grid default settings and in most cases we don't want those default settings i think it should not do this but i guess they're trying to be a little bit helpful but in actuality what they end up doing is creating a situation where your grid may actually break and this min width is one of those defaults that can absolutely break your grid depending on what you are trying to do so almost always i come and set this min width to zero pixels i don't i i will control my grid thank you i don't need this minimum width now if you are autofitting the columns which means that you're basically going to this is where you would determine the min width so you say all right i'm going to put items in a grid and every item needs to be this wide and then you figure out oxygen how many of those items can go in a row based on you know the width of the grid and the width of the elements but we're not even going to get into that territory we don't even need to worry about that so i'm going to turn that off and when you turn that off you can just set this minimum width to zero pixels okay now gap it's putting a 20 pixel gap into your grid automatically by default if i change this column count to two which doesn't matter for right now and then i just add two divs i just want to show you again this is kind of a yeah we are going to build this thing but i also want to teach you about the grid builder as we go you are going to see that there is by default i don't think this should be the case but there is 20 pixels of gap in your grid all right so that to me is a problem number one 20 pixel units are are you know not accessible i don't use pixel units so at the minimum i would want that to be in rem but i also want that to be responsive and i also want it to follow spacing now in automatic.css i would use a variable but we're going to do this completely vanilla i'm not going to use automatic.css at all for what we're doing so i'm just going to come down and change this to rem and i'm going to do a gap of 3 rim which is about 30 pixels but that's a much more accessible unit here so i'm going to do the same thing for the row gap okay and this is only going to matter when things stack on mobile devices which as you're going to see with the grid builder is a little bit janky as you start to do the responsiveness for other device sizes anyway i digress okay let's take out these divs because we're getting a little bit ahead of ourselves so i have my feature row i have grid enabled column count is what we have to talk about next by default it is one we've taken away the minimum width we've set our gap properly now it's time to talk about column count now the thing with grids is when you just set column counts it tries to make equal columns so every column is going to be the same width so if i do two and i have two elements in here like an image so i'm going to put an image and an image and it's doing this stretch thing lately i i don't think it used to do this but it's not going to bother us in a minute just showing you that both of these images are the same width right okay so i'm going to go back to my grid wrapper if i set this to three i am going to get another column of equal width all right it made all of the columns smaller to fit a third column so if you just try to say well i need two columns or three columns or four columns and you don't use column spans you can never create a grid where one cell is smaller than another cell now in grid this is called fractional units right but that's a really long complicated word so we're going to think about this in parts right so we have two parts to three parts just think about it that way right this is a not three and three it's two and three or it could be one and three or it could be two and four whatever you want it to be right but if we think about it in parts and we think about this as being two and this is being three and then we add those together what we actually have is five three plus two is five and this is going to make a lot more sense as we go into this i'm gonna take out these terrible images and we are going to add a five column grid so now we have five columns to work with when you have five columns to work with you can make one of the cells take up two of those columns and another one of the cells take up three of those columns and then you've used all of your columns right so two parts to three parts so what i'm going to do is i'm going to add two divs all right so we're going to add a div and we're going to add another div i can just duplicate and what you're going to see when you first add them is that there's just two really small grids because there's three extra spaces that aren't being taken up so now what i'm going to do is go to the grid wrapper where i enabled the grid i have my two child elements i don't want to touch those right now i just want to touch the parent because the parent controls the grid structure and in oxygen the parent also controls the children alright so if you scroll down here you're going to see these child span overrides and what these two boxes are is a visual representation of the cells that i have added to the grid not all the available cells just the cells that i've added right so if i added another one you will see three boxes down there instead of two because when i click on one this is how i can override their its span so it's only showing me the divs that i've added into the grid container so i'm gonna delete that because i only need two right there's only two containers here all right so i'm gonna i'm grabbing my wrapper my whole grid wrapper and i'm going to override the first one with a column span of two i'm going to override the second one by clicking on it with a column span of three and now you see i have two columns one is two parts and one is three parts make sense okay so we're getting somewhere now a lot of you might wonder hey kevin let me go ahead and save this while we're here so save as is that a scalable vector graphic okay that's an svg so we'll just say asset and now i'm going to come over here and pop that in and a lot of you are going to wonder image browse all right where's my downloads here's asset.svg and select okay so we've added that asset so you might wonder hey kevin why did you add a div when you don't need a div you could just put the image in there in that position and it's going to do the exact same thing it is an extra div which means it is an extra dom element however it gives you more control it's it's more future proof so yes i add the extra div for my image wrapper basically but it gives you more control in the future here's a prime example sometimes uh you'll you'll have built something right and they'll do like a design refresh and the designer will put some little accent on the images um or behind the images or whatever and you have to use pseudo elements before and after if you watch my tutorial pseudo elements before and after you have to put those pseudo elements on the image the problem is you can't put pseudo elements on an image but if you have an image wrapper a div around your image you can attach those design elements to that div and you're good to go if this scenario that i just laid out happens to you and you haven't used that extra div you are now faced with rebuilding all of your grids that have assets image assets if that needs to happen so you would have to go and add a div around that image in every grid that you've built across the entire site so for me it's just like it's not going to really hurt anything but it gives us a lot of flexibility going forward it also gives you added flexibility with things like padding and borders and things like that so just add the div take my advice add the div put the image in the div all right and you're going to see how we name all of these things in a minute which is absolutely critical for future proofing as well so that's that now on the content side we need a text we need a heading we need text and we need a button okay i'm not going to do this whole toggle thing we're not good this is not part of the tutorial doesn't really matter we're talking about grid structure here all right so now what i'm going to do is add the text i'm going to add a heading that's going to be an h2 i'm going to add more text and then i'm going to add a button all right button perfect we're just gonna do that the one thing i will do is just do button primary from automatic css okay just so we have a little bit of style there all right so choose a view we're just gonna copy this text and then we're going to add the heading the board is just the beginning and i'm also going to show you how to improve this kind of design because if you see their content is like towards the top of the asset it's not really middle aligned i really like middle alignment on this and i like a little bit more breathing room so we'll see if we can actually improve the design a little bit as well all right i will use some just to make colors and things like that easier we'll use some automatic css classes but or variables actually okay so we have all of our components what does that button need to say we'll just make it say learn more now very important here what you want to do before you do anything else is more custom classes you've got to put your custom classes this is where we're getting into best practices okay so there's a bunch of components here we have the grid wrapper this is the image wrapper right here i'm not adding classes yet i'm just naming things in the structure panel um image is fine we can leave that this is going to be our content wrapper and you can see it highlighted as i edit the name of it so content wrapper but it's it's really a feature row content wrapper right so i'm going to show you how to do all of this in just a second this is going to be the accent heading it's not really a heading but it serves the purpose of a heading this is going to be the heading that's fine that's the text that's fine and that's the button that's fine okay so here's how we do the custom classes so what i'm gonna do is grab my image i'm grabbing the image right this is gonna be a feature row double underscore image feature row image or you could say feature row asset if it maybe was going to be a video or something that's not uh you know doesn't have to be an image um but i'm just going to do image because these are all images so feature row image boom so now i'm going to hit this little up arrow and it's going to select the parent of this element which is the div that's around that image and this is going to be called a feature row and then we're going to do double underscore again this is bim bem naming convention okay so it's tying all of these things together properly so this is an image dash wrapper so it's a feature row image wrapper now on this side we have another wrapper here which is the content wrapper so i'm going to select that and we're going to do feature row double underscore content wrapper now i'm going to grab the little subheading or accent heading here and i'm going to call this feature row double underscore accent heading i'm going to grab this i'm going to say this is a feature row double underscore heading i'm going to grab this and say this is a feature row double underscore text or you could say blurb or whatever you want to do here but you've got to make sure that these custom classes are here now this has a utility class on it a button primary what we could also do here is if you really wanted to to do it we could do feature row double underscore and there's two ways to do this okay uh you could do button and then you could literally style the button or you could just put a utility class on it as well so you're like stacking the classes and that gives you a quick way to style that button but you also have it future proof where if you need to change anything you can target this feature row button to make changes to the button but you can get away with this is a little bit of cheat speed um to just put a utility class on that button and be done with it okay all right so now what you're going to notice based on our grid is that our asset is much taller than our content and you see this in the fact that this cell right here does not go all the way to the bottom so if i wanted to align this i can still align it but the easiest thing to do is to use a stretch which makes this div right here stretch all the way and use up the available space that is in the grid so i'm going to grab the parent grid i'm on the class feature row and we are going to stretch you can stretch just to be safe both of these okay so we put a stretch on now you didn't see anything move but if i hover over the cell you see that cell now spans the entire height of the div container that's really important okay the next thing that we can do what i like to do i don't like this top aligned is i like to in my feature row content wrapper the cell on that class i'm going to do a vertical alignment and then middle just like that and that's going to do it for every grid automatically because these classes are being used the next thing i'm going to do is grab my wrapper and i'm just going to change my gap because i said i like more breathing room uh than what trello has their content is really close to their asset i'm gonna do a little bit wider of a gap here and i'm gonna do five rim on the row as well okay so now what we do is we space these items out so i'm gonna grab this heading and i'm on the class need to make sure you're on the class and i'm going to do margin top i will hook into automatic css variables here but you could very easily use rems or whatever you're just going to have to make sure that everything is responsive but with automatic css variables everything is automatically responsive so i don't really have to worry about it so i'm going to do space s and then on this one i'm going to basically hit none and paste the exact same thing and then on this button which is the feature row button now not i'm not editing my utility class right and you'll see that in automatic css everything is locked by default because you don't really want to be doing that so you have this custom class and that's where you're going to add your margin top boom and i'll actually change this to m so that we have a little bit more of a gap there and then this one i can actually adjust to xs which is extra small so i have it's tighter here and then wider here sometimes i like that flow a little bit better on this text i'm also going to do var and we're going to do like shade medium so we're just going to use like a lighter color just like trello did with theirs theirs is a little bit thicker font but whatever and then choose a view we're just going to style that up real quick and again i'm always on these custom classes right so font size there doesn't really need to change but we do need to uppercase it and then oh we actually do need to change the font size so we're going to go var text s and then i am going to do font weight of like 600 and then we'll probably do letter spacing of like .025 m uh how about .05 m something like that and okay i don't think that needs to change colors at all uh but we could let's do like uh let's do a var primary right something like that adds a little bit of uh i don't know i don't know what it adds all right so let's move on now what we have to do we've done really good here um we do have to do mobile now and mobile is challenging when you're using column spans so let's first thing we're going to do is just take a look at like what do we look like at 1280 pixels and below uh to me it looks pretty good all right so we're going to go back and i also want to do this by the way i'm going to do image i don't think we ever put a width on that let's just safely put a width of 100 on that and let's go back to 1280 and take another look so i think we're good there but i i i'm gathering that we're not going to be good at any point below this so we're going to go to 992 and that's where you get into that trello view where it was like here let me inspect this where the asset got really small which i don't think i like so we're going to try to avoid that but i'll show you real quick so as they come down the asset gets really small and then the the text stays the way that it is i guess we want to mimic trello we could we could continue to do that let's see what the next breakpoint does that's definitely not going to work right so i guess just for the sake of this let's leave it the way the trello does it all right so i'm gonna come down to 768 and now we need to break the grid so we need to change our grid so now what we're effectively going to actually no let's let's not do this i'm thinking on the fly here because i i'm i'm thinking about adding more things into the tutorial for you let's make this an even grid now so instead of this being small and this being a bit bigger remember this is two parts to three parts let's do them equal now so you can change the grid structure at different break points so i i have the wrapper i'm on my class i'm at the break point i want to change it on i'm going to enable the grid at this break point and you're gonna see that it blows the thing up and the reason it blows the grid up is because it defaults once again i said i don't like that oxygen defaults to this stuff it defaults to one column i don't want one column i want two columns i want two equal columns so i'm gonna hit two and you're gonna notice that my grid is still broken because even though the grid did not inherit my column count from the previous setting it did inherit my spans and so if you don't know that this is happening it can totally freak you out it can totally like trip you up you have no idea what's going on with your grid it's not behaving the way you're telling it to behave it's because of the spans and that's why i said when you're using spans it makes it a little bit tougher on mobile unless you know exactly what's going on right behind the scenes so i'm gonna change this to two and again look at this it's filled in a 200 pixel max width on me again so i'm gonna have to zero that out it's also changed my gap once again which i don't like right um and i don't know if it actually changes it or if those are just kind of like placeholders now but just to be safe uh well what did i do i did five rim we can actually do like three rim now because we don't need as much on on mobile or spacing so i'm gonna change this to three rim if you're using automatic css you can i absolutely use my spacing hooks there but i'm gonna try to do that as little as possible okay so we have a two column grid but obviously we don't have two columns that's because we had to come down to our child span overrides and now what do we want we want each uh cell to be one fractional unit just to be one part one part to one part right so i'm gonna put a one in there and then on this cell over here i'm gonna put a one and now you see they are equal so we have effectively changed the grid structure at this break point if i go to the desktop i have the original grid structure if i go to 992 i have the new grid structure and now at one breakpoint below i have to do this again i have to enable the grid i do want the one column count i don't want my min width again my gap is going to be rim back to rim so we're going to do three rim on that and this is going to be three rim as well okay and now i have my asset and my text stacking one on top of the other so i do now have a completely responsive grid we're gonna save our work we're gonna go to the front end now we're not done by any means we have to do the other rows we have to do the auto staggering we have to do uh switching order automatically on mobile devices right so so much more to come but here is the start of what we've got going on and i'm going to enable the inspector and i am going to hit here and i i am going a little bit slower guys because i said this is a follow along tutorial i'm explaining more things about the process than i do sometimes but if we take a look at this we have a responsive grid and everything has the proper structure as far as custom classes and really good naming conventions and all of that all right so let's go ahead and move on i am going to grab this entire wrapper and i am going to duplicate it okay now these two rows obviously are much too close to each other so now what i can do is i can one of two ways right you can add it doesn't really matter in this case because you're going to have to use a last of type or first of type or something like that i'll explain exactly what i mean but we need to space these out so what i'm going to do the easiest thing to do is feature row size and spacing margin bottom i am going to hook in for this just to make it responsive so space l uh let's do xl so i have xl spacing between these on the margin bottom the problem is that my last grid is also going to have a margin bottom on it even though there may not be anything underneath it so what i want to do is automatically tell this structure the last thing the last of this type right the last row of this type should have no margin bottom it should have zero margin bottom and we can do that very easily with a little css but we don't even have to write the css we can just add it inside of oxygen so i'm holding my wrapper here my feature row i'm going to hit this state button you're not going to see it in the drop down you have to know it exists and you have to add it manually so you're going to hit add state and you're going to type the words first dash of dash type and that's sorry this is going to be last of type there is first of type and there's last of type so the first item of this type or the last item of this type i want to do something to it so you're going to hit ok with after you type in last of type and you're gonna see that it changes right here to last of type and now anything you do in here with styling affects the last of this type of element right which is gonna be this one right here or if i added another one it would be the next one okay so i'm gonna go down to size and spacing margin bottom zero and what you're going to notice is the margin is still here but it's not here and i will prove that to you by adding a button or anything really you can add any element and that button is right up against the grid even though it's not up against this grid right here right because there is still a gap between after this one there is still margin bottom on this one and if i if i duplicate this grid there will be a gap here but there will no there will be no gap after the last one because we change the last of type to zero that's how last of type works super super handy all right uh we could probably just leave these three grids here now what we want is every second grid we actually want to swap these two things okay um so what we're gonna do is change the order of the either the asset or the content wrapper and we're gonna only do that for every second one so we're not gonna do this manually we're going to do this automatically now you do have to write actually you don't have to write you don't have to go to a style sheet you are going to have to write a little css but it's like one line okay but we're going to do it inside of oxygen or we're going to try to i do it in style sheets just to let you know i do it in style sheets but i'm trying to avoid style sheets i want this to be as vanilla and kind of beginner as possible and easy to follow along with and i know css is scary for some people so we're gonna do as little of that as possible now if something doesn't end up working i may have to resort to style sheets but uh i don't know we're gonna figure it out as we go so with my parent wrapper selected my feature row we're gonna do something called inf of type so we did we just did uh if you remember last of type and first of type now we're gonna do inf of type which is another crazy one right so we're gonna hit add state and we're on the feature row and we're going to say nth of type and then you put it in parentheses you say 2 in so that's like every second of this type every second item of this type and i'm going to hit okay and all we're gonna do just to make sure that we've targeted this properly we're gonna go to borders and we're gonna do uh a two pixel solid border and oxygen always screws up here by the way like it's a mad lag whenever you're editing borders i don't know if that happens for you but whenever i'm doing anything with borders mad lag but check this out we now have a border around the second item of that type now let's test it out if i duplicate this last one there will now be four i want every second one so the fourth one and the second one should both have a border automatically without me touching it so i duplicate and look that one now has a border let's look at that on the front end just so you can see it so i refresh there's my border and there's my border so every second of that type is getting a border that is critical so that's just to test i don't actually want to do that so i'm going to go to nth of type to n and i am going to go to borders and we are gonna go to none we don't want borders on see how much lag there is between when i click that button and when the borders went away and if you type in this color box oh man good luck to you my friend okay uh hold on my alarm is going off on my phone let's turn that off okay perfect so what did i say we wanted to do we wanted to flip the order uh we are we are gonna have to write some css i i apologize um there may be a way to do this in the builder but i i don't want to go off the rails completely so we're going to go to manage style sheets i will walk you through it have no fear you're going to add a style sheet and you can call this like grids or like whatever you want um anything that you do with grids like custom grids you may want to put in here so i am going to add a comment this is called a comment i'm going to zoom in on this you guys can see better this is going to be called feature rows right so anytime you come along in the future and you're like where is that code that i added okay it's all commented right like you can see there's a little heading this does not get printed in the css all right so what we're going to do remember we're targeting our grid what is our grid called it's called feature row so we're just going to put a dot that's for class and i'm going to do feature row so we are targeting something in the feature row we don't know what we're targeting yet but that's where we're starting okay and if you were just targeting the feature row you would put your little curly brackets and then you would start going to work on your styling but we need to actually target something else so we are targeting uh the feature row in child 2 in just like we did in the builder a second ago so we're going to go and not inf child we're going to do nth of type so we're going to do nth of type 2 in and let's just see border 1 pixel solid red do we have it you guys might not be able to see that let me do five pixel so it's obvious so we have written the css correctly and this is how you do the um the the pseudo classes sorry my it's early my brain's not working um pseudo classes are a colon and then the pseudo class um so exactly like what we put in the oxygen builder we're just typing it out so feature row nth of type 2n is getting a border 5 pixel solid red that is obviously working but we need to target something inside of that feature row inside of every second feature row what are we going to target we're going to target this content wrapper so i know because all of my class names are very organized that if i put a dot and i do feature row double underscore content wrapper i can now target that content wrapper and we'll go back and we'll take a look there it is feature row content wrapper remember when we did our namings so i'll go back now let's do a border here and just see if we're targeting properly right so border 5 pixel solid red there it is we're now we're targeting that element so that's all good so now the question is what do we need to do to that element well we need to change its position in the grid so we can use the order property to change its position in the grid so the thing with order is you don't like choose a number order you're not like position one position two like that that's not really how it works i mean it is a little bit but for two elements it's not really how it works so minus one is actually first right um so cause i think the default is zero so if i put order one nothing happens and you might think like oh my gosh like i want it like in the first position why isn't it going to the first position because minus one is actually the first position okay so you're gonna put order minus one and you see right there they just flip-flopped only in the second of that type did they flip-flop which is really really cool so i'm gonna hit save we're gonna go back to the front end i'm gonna zoom out we're gonna go back to the front end and let's turn off this responsive thing here how do i okay i'm not used to firefox yet all right so we're gonna refresh all right hold on hold on hold on what do we do save i'm getting it in the builder but not on the front end let's do that okay okay something has happened something has happened because we still have borders here as well and i clearly don't have borders okay let me do let me just delete this nth of type 2 in save okay so now we have an auto staggered grid right which is great because you can go in and change the content on all this i'm not going to do that because it's a waste of everybody's time but you would just go change the content to match what is going on here you change the image swap this none of that matters right all the classes stay the same everything stays the same it's literally just you know the grunt work of migrating the content over um i'm also wondering why this is like oh gosh it's like taking away padding it's like all okay i'm gonna save and refresh we're just gonna get to a clean slate here we're back all right so now what we're gonna do we're not done so we auto stagger but watch this this is so cool so i grab my my row if i want more rows i can just duplicate and it swaps it automatically i duplicate it swaps it back i duplicate again it swaps it back and then the question is is everything responsive so now we take a look so we come down yes look at that it still looks perfect at that break point we come down and now we have the problem the big problem is now the order of things because it's image content content image this is what i said in the beginning you did not want so what we have to do is just swap the positions back on mobile devices and the break point that we have to know is 768 that is the break point where they stack at this break point we don't want to switch anything that's 992 but at 768 we want to swap again so what we're going to do is we're going to leave this window open right here and we're going to go back into our style sheets now this one is a little bit more complicated because we have to use what's called a media query so we are telling the code to only apply to certain break points okay so we're going to just do at media now there's a lot of things that you can do with that media you can do screen all yadda yadda yadda okay i'm just going to do the shorthand version which is at media and then parentheses and then we can open brackets what we put in this parentheses is the breakpoint now you have max width and you have min width max width means that that breakpoint and below i want these things to happen min width is at this breakpoint and above i want these things to happen we're going to use max width because we want at 768 and below we want to swap the images again so i'm going to say max width and then you use a colon and then you do 760 not 758 768 pixels so at max with 768 pixels and below i want whatever i put in here to happen well what do i want to have happen so i can now prioritize remember i switched the content wrapper to position one what i really want to do is prioritize assets now that the images need to be first okay so i'm gonna do feature row and i'm gonna do i can actually just do this to all of them i don't actually have to char target the nth of type 2 in i don't believe we're just going to try this shortcut here and then i'm going to do feature row image wrapper the whole div that contains that image and then i'm going to open my curly brackets okay so inside of here i want this to be order minus one and you saw i believe over here everything just fixed itself so now automatically i have image content image content image content because we just told it hey the image at this break point and below needs to be in the first position okay or really the image wrapper all right so i'm going to hit save on that and now we're going to go back to the front end and we're going to take a look at what our grid is doing here so i have a perfect grid the way i want it right here and as i break down so let's go to inspect let's go to mobile as i break down everything looks good that's where it swapped to the two columns even two even columns right here staggered columns or like uh three part two part and now it comes down and boom you can see it right there switches to equal parts and then we come down and it stacks and the stacking is the perfect order and the good thing about this is we don't need any other classes you don't need any swap classes you don't need to do all this manually and you can now reuse this structure on any page you want to use it on so any let's say the company has 10 different products and every products every product page needs its own features right you can use this feature row structure on all those pages and automatically now you have full responsiveness you have auto staggering you have auto ordering of the assets and the content everything is perfect and if you need to change anything in the future you change it on one of these structures because we used all of these custom classes and it will update everywhere across the entire website i hope that this was a really great intro tutorial for the grid builder i tried to do something a little bit more advanced so there's beginner stuff in here there's advanced stuff in here let me go back to the screen so we did beginner level stuff we did intermediate level stuff we did somewhat advanced level stuff but we also gave you a really practical thing that you can use and and do on client sites like across the board this is the type of stuff that will really elevate your game and make your life so much easier as a developer because if you do have those 10 product pages with these feature grids but you did them all manually or you did them all with utility classes and then the client's like oh i don't like how it staggers like that or i don't like how the image is above the content i'm i'm a dummy and i want the image below the content right like doesn't matter what they say or like i said in the beginning you need to add some pseudo elements to your image wrappers uh whatever the case may be you are fully future proof and protected because of the way that we structured this all right if you have any questions i want you to drop a comment below if you loved this tutorial i want you to hit the like button i want you to make sure you're subscribed to this channel i want you to make sure that you've hit the little bell notification so that anytime i post new tutorials you get notified and that's it if you do have any questions i am happy more than happy to help you so that's it for me today though i'll see you guys back again here real soon peace

Channel: Digital Ambition

Views: 2,099

Keywords:

Id: 0cHxmA_9ixA

Length: 44min 3sec (2643 seconds)

Published: Tue Dec 07 2021