0:00:00
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. 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, 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 some jujitsu type tricks, right? Like some grid jujitsu. We’re going to do a staggered grid and we’re going to 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 going to screen share. I pulled up trello.com because a lot of sites use this technique online, but, 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 going to 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’s 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 come down and you see what has to happen. Now trello’s, 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. And the text really hasn’t changed much, but then they finally stack and when it stacks, what you’re going to notice is the asset always comes before the content. You’ve 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 go back to camera here.
0:02:43
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. So 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. 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 the power of column spans. So you’re going to learn a lot in this tutorial, but you’re not going to learn a lot if you just watch this 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 when you’re 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 out 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 in, 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 grid set up. And by the way, this is not one single grid. The what we’re going to do is we are going to build separate grids for these. Right. 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. So you could say feature row and that that can just be our custom class. So we’ll just go with that 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 page. Not the full width of the screen obviously, but the full site with the viewport max of the website. We want that to be 100%. So you set that to 100%.
0:06:31
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 men with is one of those defaults that can absolutely break your grid, depending on what you were trying to do. So almost always I come and set this men with to zero pixels. I don’t I will control my grid. Thank you. I don’t need this minimum width. Now if you are auto-fitting the columns, which means that you’re basically going to this is where you would determine the men with. So you say, all right, I’m going to put items in the 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. 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 dives. 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. We’re 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’s me as a problem. Number 120 pixel units are, you know, not accessible. I don’t use pixel units. So at the minimum, I would want that to be in rim. 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 rim. And I’m going to do a gap of three 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 devices. 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 with 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.
0:09:35
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 the stretch thing lately. 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. 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 columns 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 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 going to 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. All right. 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 it’s span. So it’s only showing me the divs that I’ve added into the grid containers. I’m going to delete that because I only need two. Right? There’s only two containers here. All right. So I’m going to I’m grabbing my wrapper, my whole grid wrapper. And I’m going to override the first one with a column span of two.
0:12:35
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 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 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 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 going to, this is not part of the tutorial. It 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 going to 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 going to 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.
0:15:53
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. 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 going to do is grab my image. I’m grabbing the image. Right. This is going to be a feature row double underscore image feature row image or you can say feature row asset. Maybe it was going to be a video or something that’s not, you know, doesn’t have to be an image. 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.
0:17:40
And this is going to be called a feature row. And then we’re going to do double underscore again. This is them B E M name and 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 am 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 do it, we can do feature row double underscore. And there’s two ways to do this. Okay. You 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 a 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 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 this 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 a more breathing room than what Trello has their content is really close to their asset. I’m going to do a little bit wider of a gap here.
0:20:36
And I’m going to do five rim on the row as well. Okay. So now what we do is we space these items out. So I’m going to 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. 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 excess, 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. There’s 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 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 0.025m. How about 0.05m something like that. And okay, I don’t think that needs to change colors at all. But we could let’s do like a let’s do a var primary, right. Something like that adds a little bit of. I don’t know. I don’t know what it is. All right. So let’s move on. Now what we have to do. We’ve done really good here. 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. 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’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 is the way that it is.
0:23:39
I guess we want to mimic Trello. We could we could continue to do that. Let’s see what the next break point does. That’s definitely not going to work. Right. So I guess just for the sake of this, let’s leave it the way that Trello does it. All right. So I’m going to 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 let’s let’s not do this. I’m thinking on the fly here because 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 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 going to 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 going to hit two. And you’re going to 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. 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 going to change this to two. And again, look at this. It’s filled in a 200 pixel max width on me again. So I’m going to have to zero that out. It’s also changed my gap once again, which I don’t like. Right. 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. 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 spacing. So I’m going to change this to three rim. If you’re using automatic CSS, I absolutely use my spacing hooks there. But I’m going to try to do that as little as possible. OK, 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. So sell to be one fractional unit just to be one part one part to one part. Right. So I’m going to put a one in there. And then on this sell over here, I’m going to 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.
0:26:28
So I go to 992. I have the new grid structure. And now at one break point 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 men with again. But 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. OK. 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 going to save our work. We’re going to 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 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 am going a little bit slower guys because I said this is a follow along tutorial. I’m explaining more things about the process. Then 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. So let’s go ahead and move on. I am going to grab this entire wrapper and I’m going to duplicate it. OK. 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. Let’s do Excel. So I’ve Excel 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. 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. You’re going to 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 going to be this one right here or if I added another one it would be the next one. OK, so I’m going to go down the 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 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.
0:30:06
And if I duplicate this grid there will be a gap here but there will no big what 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. We can probably just leave these three grids here. Now what we want is every second grid we actually want to swap these two things. OK, so what we’re going to do is change the order of the either the asset or the content wrapper and we’re going to only do that for every second one. So we’re not going to 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. OK, but we’re going to do it inside of oxygen and 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 going to do as little of that as possible. Now something doesn’t end up working. I may have to resort to style sheets but I don’t know we’re going to figure it out as we go. So with my parent’s wrapper selected my feature row we’re going to do something called in of type. So we did we just did if you remember last of type and first of type now we’re going to do in of type which is another crazy one right. So we’re going to add state. And we’re on the feature row and we’re going to say in of type and then you put it in parentheses you say to in. So that’s like every second of this type every second item of this type and I’m going to hit OK and all we’re going to do just to make sure that we’ve targeted this properly we’re going to go to borders and we’re going to do 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 in 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 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 a test I don’t actually want to do that so I’m going to go to in of type to in. And I am going to go to borders and we are going to 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.
0:33:09
Okay hold on my alarm is going off on my phone let’s turn that off. Okay perfect so what did I say we want to do we wanted to flip the order we are we are going to have to write some CSS I apologize. There may be a way to do this in the builder but I don’t want to go off the rails completely so we’re going 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. Anything that you do with grids like custom grids you may want to put in here so I’m 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 call this 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 the feature row in child to in just like we did in the builder a second ago so we’re going to go in not in child we’re going to do in the type so we’re going to do in of type to in and let’s just see border one pixel. So we have a single solid red do we have it you guys might never see that we do five pixel so it’s obvious so we have written the CSS correctly and this is how you do the the pseudo classes sorry my it’s early my brains not working. So this is our a colon and then the pseudo class so exactly like what we put in the oxygen builder we’re just typing it out so feature row in the type to in is getting a border five 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’m going to do that. 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 five 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. It’s 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 to 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 so I think the default is zero so if I put order one nothing happens and you might see that it’s not going to work. So the thing 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 going to put order minus one and you see right there they just flip flop only in the second of that type did they flip flop which is really really cool so I’m going to hit safe we’re going to go back to the front and I’m going to zoom out we’re going to 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 going to 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 in the type two in save okay so now we have an option to do that. 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 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. I’m also wondering why this is like oh gosh it’s like taking away padding it’s like all okay I’m going to save and refresh we’re just going to get to a clean slate here we’re back all right so now what we’re going to do we’re not done so we auto staggered but watch this is so cool so I grabbed 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 999 that’s 992 but it’s 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 yeah I got it 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 break point now you have max with and you have men with max with means that that break point and below I want these things to happen men with is at this break point and above I want these things to happen we’re going to use max with because we want at 768 and below we want to swap the images again so I’m going to say max with and then 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 member I switched the content wrapper to position one what I really want to do is prioritize assets now the images need to be first okay so I’m going to do feature row and I’m going to do I can actually just do this to all of them I don’t actually have to chart target the in 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 of 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’s swapped to the two columns even two even columns right here staggered columns or like a three part two part and now it comes down and boom you can see it right there switch is the 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 ten 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 be updated 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 there’s beginner stuff in here there’s advanced stuff in here let me go back to to 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 ten product pages with these feature grids but you did them all manually or you did them all with utility classes and then the clients like 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 beginning you need to add some pseudo elements to your image wrappers 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 hit the little bell notification so that any time 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.
