AUTOMATIC.CSS Auto GRID Utility Classes (Automatically Responsive Grids)

0:00:00
What’s up everybody welcome back to the channel today we’re taking another look inside of Automatic.css. I’m going to show you what we call auto grids and correct me if I’m wrong but I think automatic.css is the only utility class framework for oxygen that features auto grids. Now in the tutorial I’m going to show you how to create a grid with utility classes the standard way which you can do inside of automatic so you have complete control over all of the break points column spans all of that and then I’m going to show you the auto grids because this is really the juxtaposition between creating a manual grid and creating auto grids is going to show you just how awesome auto grids are and how efficient they are and how they speed up your workflow when they are appropriate which is another thing we’re going to cover when to use an auto grid when to use a traditional grid. Alright so let’s go ahead and dive in we don’t need to have any more banter I’ve got my sandbox my training site pulled up here completely blank slate the first thing I’m going to do is add a section I’m going to add a color to that section we’re going to do BG and all of these classes that I’m using are automatic.css utility classes so I’m going to do BG base ultra light and then and that’s going to be a that’s a base color a light version of the base color that you get to choose you program that into the system.

0:01:24
Alright and then we’re going to add a dip this is how you start by building a manual grid you just add a dip to contain your grid. So traditional grid building with utility classes looks like this by one of three column grid in automatic css it’s grid double dash three that gives my wrapper the three column grid structure so that when I add a dip inside of here you can see it only goes one third of the way across now I’m going to style this real quick and then we’re going to duplicate it so that you can actually see the cells really well. So I’m going to style it with BG primary and I’m going to throw a heading in there I’m going to make that an h2 I’m going to select my cell my div wrapper there not the entire grid wrapper just that cell wrapper and I’m going to pad it we’re going to do pad xcel that’s going to give me excel padding which is automatically responsive when I throw that class on there I’m going to do text white which is going to give me white text in there and I’m just going to say grid cell and then I’m going to make sure that everything is centered so I’m going to do center if I can type double dash all that’s going to center it vertically and horizontally and then I’m ready to go I’m ready to rock and roll so I’m going to go ahead and actually let’s put a radius on there as well so we’ll do rounded and we’ll do M okay so we get a nice little rounding effect there.

0:02:42
Alright cool now I’m just going to duplicate this. When you see that I have three columns across and I have two rows because I have six items I’m going to grab the entire wrapper and I’m going to put a gap on there and the gap is going to be M. Now that is that’s it your grid is done except for here’s where you know the manual kind of grid thing really comes into play mobile responsiveness. These manual grids when you use these manual utility classes and this is true for any utility class system oxymate oxyminja automatic that CSS they’re not automatically mobile responsive so if you look at them at the break points this one is okay that’s the Excel break point but at the large break point they really start to squish and so the way that you deal with that is there are mobile grid utility classes so I come in and say grid and remember this is the L break point okay so it grid L at the L break point I want two columns that’s grid L2 so I put that on there and now we have two columns at this break point we still have three columns on the desktop and at the Excel break point but at the large break point we have two columns and then at the medium break point I really need one column so I’m going to do grid double dash whoops I can type grid double dash M1 that’s going to give me one column at that medium break point which also extends down to the S break point so now I have a fully responsive grid but that took number one it took one two three different classes the gap classes and count you’re going to need that on any grid that you create so but to create the proper structure that’s responsive you need three classes and you also had to make decisions right you had to look at the different break points and say all right how many do I want it to be here how many do I want it to be here and you had to make those decisions and you had to apply the appropriate classes now it’s even more complicated when you do a staggered grid so let me show you that real quick and I’m just going to grab this section and put some owl spacing on there so owl Excel automatically spaces everything out with extra large spacing and then I’m going to add a new diff all right so there’s my new wrapper I want this to be a staggered grid it’s going to be a three two grid so three like if you the first column so to speak is going to take up three columns and then wow this is hard to explain sometimes and then the second one is going to take up two so it’s going to be a three two you’ll see it in a second all right so what’s three plus two five so I’m going to do grid five so we have a five column grid to work with I’m going to duplicate this cell so we don’t have to create it again I’m just going to drag it into my new grid and I’m going to duplicate it so it’s three two so I’m going to grab this first cell and I want it to span three columns so the way that we do that is we do call span double dash three now it spans three now I grab this one I wanted to span two so I do call span double dash two this is a three two grid now I’m going to grab the entire wrapper and I’m going to put a gap on there so you can see the space between boom okay now let’s look at it mobile responsiveness let’s see how it responds it’s actually not bad like at nine on two it’s still decent depending on what you you know had here that definitely could be squished in some cases so let’s say that at the L break point I actually want these to just stack I want one column and they just stack on top of each other so we already know how to do that it’s going to be grid double dash L one now they stack the problem is you have a broken grid because we have we’re telling the grid structure to be one column but we’re still telling this item to span three columns and we’re telling this item to span two columns and you can see there’s a gap here which means that we have a broken grid so the way that you fix that again there’s mobile utility classes for spans and if you’re like whoa what is this guy saying my head is spinning exactly that’s why you’re going to love auto grids which we’re going to cover in just a second so hang tight so I need to grab this first cell right here and I need to do call span double dash and at the L break point I need to span one because there’s only one available right now it looks broken the other way because this one’s trying to hog extra space that’s not available so I’m going to grab this one remember this one was spanning two I need to do call span double dash L one and make it span one at the large break point again and now we have a functional grid that’s fixed all the way down so you see what I had to do there right I had to span cells across columns I had to make assessments of different break points I had to then undo the spans at different break points I can see where people can get lost now is that easier than using oxygen’s grid builder in a lot of cases it is it’s also faster especially once you’ve practiced and you know exactly what you’re doing but there’s an easier way so in automatic dot CSS we have what we call auto grids all right now I’m going to completely abandon that section we’re going to create a new section so I’m going to leave that up so I’m going to create a new section down here so I’m going to put an owl spacing auto because I’m going to put a lot of grids in here we’re going to do them really fast because they’re auto grids so they’re easy all right I’m going to put owl double dash will do excel again and I’m going to put a div and I’m going to grab one of these cells and I’m just going to drag that down into all right the oxygen lets me there you go okay did it didn’t pop in let’s try again grab and drag it into my div okay now we’re set all right so we want to make all the grids possible wow this is yeah thank you thank you okay are we good I think we’re good all right oxygen is acting up you know when they say they’re trying to fix the you know the laggingness inside of the builder I’m hoping that gets done very soon okay so I’ve got the wrapper selected we’re going to start with the most basic grid auto to to column grid all right so we’re going to do grid auto to and then I’m going to duplicate myself right now we only have one cell so I’m going to duplicate it and now you see that we have our two columns I’m going to do a gap of them just like all of the others and we’re just going to rock and roll then we’ll take a look at mobile responsiveness I’m going to duplicate this grid that’s going to be three I’m going to duplicate this grid that’s going to be four column I’m going to duplicate it that’s going to be a five column I’m going to duplicate it that’s going to be a six column I’m going to duplicate it now we’ll stop there I’m going to do I’m going to after these six I’m going to show you staggered auto grids which I think you’re going to love okay so we need to take the auto to off of here and do auto three grid auto three all right and then we just need to add another cell so there’s three cells now we need to take this one off grid auto to becomes grid auto four and I’m going to duplicate it twice to make sure that we have four four cells in there this one we’re going to do five so I can just actually start duplicating so two three four five and then I’m going to grab the wrapper and we’re going to change this from auto to to auto five there’s my five column grid now we need a six column so I have two let’s go three four five and six and then I’m just going to grab the wrapper and say nah that’s not supposed to be two it’s supposed to be six so great auto six perfect one two three four five and six you see them all across perfect now that’s it there’s there’s there’s no decision making there’s no let me check all the break points let me add more classes for mobile break points it’s the situation is done the situation is handled we told automatic that CSS what we wanted to have happened at the desktop and it decides based on the size of the items and all this other stuff what’s going to happen on mobile so if I go look at actually let’s go to the front end so I’m going to save this and we’re going to go to the front end so there’s our standard grids up there here’s our auto grids and I’m just going to start breaking this down and we’re going to see what happens okay so we’ve already seen some breakage going on we went from three here across to a two column grid there so now two and they’re stacking the others on top this still at two columns this is broken down from four to three this is broken down from five to four this one’s broken down from six to four and we’ll just keep going and you see that it just keeps handling itself all the way down this one and this one still have small items why is that because if you have a six column grid you’re putting small items in the grid to start with right now if you had a bigger screen like your viewport max was set bigger those items would be allowed to be bigger and maybe it would even fit three of them across but by and large like if you’re using a six column or five column grid you’re going to have small items anyway so it’s not like you’re putting stuff in here that’s going to squish you know anytime soon whereas up here it’s you know stands to reason that if it’s a two column grid or three column grid those items are fairly large all right so you can see here that it does handle this all automatically if we do staggered grids it does the same thing so I’m going to grab well this is put a new div so we’re going to add a div okay so we’ll do grade one two and then I do need a cell I need to steal a cell so I’m going to duplicate that I’m just going to drag it down in here right there oh I missed let’s try it again it’s a fun game that we get to play inside of oxygen okay there we go and then I’m going to duplicate it and then I’m going to put a gap on there okay same gap that we had on all of our others so that is a one two grid I can also do a one three grid so I’m going to come down here and we’re going to change that to grid double dash one three there we go as you can see it’s slightly different this one is much smaller the initial grid so that’s one two and one three now we can go into the two so I’m going to go to one grid to one and then I’m going to duplicate that we need a grid to three now so I’m going to delete that class grid to three perfect I’m going to duplicate that we go into our threes now so we have grid three one and I’m going to duplicate that we have a grid three two and that’s going to be the last one double dash three two it’s getting laggy on my keyboard too all right so I’m going to go ahead and hit save let me stretch this back across all right so those are also auto grids so I’m going to go back to the front end we can see that we’ve got our staggered grids going on and again I haven’t had to make any decisions at break points I haven’t had to use any mobile utility classes as we scale this down you’re going to see that it just adapts them it turns them into standard grids and then it stacks them where appropriate okay so everything looks fantastic now let’s talk about use case when should you use these auto grids versus when are you going to use these manual grids if you’re throwing in items where you don’t really care how it breaks down to mobile right there’s no specification you don’t have a mobile figma file that you’re having to make sure that at every single break point it’s exactly this many of columns and the items are exactly this size then you use an auto grid because it’s so fast and it’s so efficient and there’s less room for error if you need granular control over your grids you want to get nitpicky with it you want to have full control over every break point the spans all of that stuff then you want to use the manual grid like I did in the very beginning so I’m not saying that auto grids like completely replace any other type of grid I’m just saying that in certain use cases they’re a lot faster they’re a lot more efficient they’re a lot easier to add you just pop the class on you put in your items you move on with your life now if for some reason the auto grids not behaving the way that you wanted to simple just take the auto grid class off convert it to a manual grid using the utility classes like we did in the beginning and you have full control over the grid but in a lot of cases it’s just not necessary you can just throw an auto grid on it’s going to get the job done you can move on with your life it’s a nice feature to have it’s not you know in any way shape or form saying you should use automatic grids in automatic sss because they’re a grid killer they’re the replacement the be all in all for grids that’s not what the pitch is the pitch is there are certain use cases where you just don’t need to worry that much about how the grid breaks down at the mobile as long as it does you slap an auto grid on there and move on with your life so let me know in the comments hit like hit thumbs up drop a comment let me know what you guys think about auto grids like I said all the full manual control is inside of automatic sss but you have the bonus of having the auto grids at your disposal as well hope you guys find it awesome again the plug-in is still in development we’re shooting for October for release of automatic sss right now we’re working on just fallbacks and cleaning everything up we’re not adding new things so it you know we’re hoping we’re optimistic for October if not October most certainly november it’s right around the corner and there’s already a ton of people using automatic that sss if you want to use it you want to get your hands on it it’s inside of my inner circle there’s a link below all right guys I’m out peace