0:00:00
All right, welcome back everybody. We are taking a look at yet another one of the classes inside of the automatic.css system. We’re gonna be looking at breakout classes. And this is one of those classes that it really follows the philosophy of a utility class. It just does something for you that’s really, really helpful and useful. And unless you are like intermediate to advanced at CSS, you would probably have to do a lot of, you know, poking around and researching on how to do this yourself. And we just take you a bunch of time. Whereas with automatic.css, you can throw a class on something and it makes your day better and you just move on with your life.
0:00:37
All right, so it’s kind of like one of those magical little classes and we’re gonna take a look at it right now. So I’m gonna open up my sandbox. And the first thing I’m gonna do is add a section. And I’m gonna add a div inside that section. And this is gonna be a auto grid, but it’s gonna be kind of a staggered grid. So we’re gonna do a grid 3, 2 on this. And then I’m gonna put two divs inside of it. Right now I’m just making a heading because the way that these classes work, you’re gonna see how they kind of, you know, it flows with like a specific kind of design decision. All right, so I’m gonna make a gap on this. We’ll just do extra large.
0:01:18
I’m gonna throw a heading in here. And then I’m gonna throw some text in here as well. Actually, the text we’re gonna throw over here. I’m gonna put a stretch class on this grid. And then I’m gonna say breakout classes. And then I’m gonna tell you right now by writing this little blurb over here, exactly what these do. So breakout classes allow you to break elements outside the constraints of a sections inner content. And especially in oxygen, right? But really in any kind of like, in any website framework. And let’s take a look at what that means. When you see these blue lines right here, right?
0:01:58
This is where the sections inner content ends. And if you go to settings and global styles and you go to your width and break points, this page width right here is basically this with some padding inside it, some default padding. So content, as you see when I added this grid with the two elements here, it’s not, it never went wider. It doesn’t take them the entire screen, right? It stops and it stops at these blue lines plus the little default padding. And a lot of times you’ll get into a situation where, oops, didn’t wanna remove the padding from that. Let’s also add some owl to this real quick so we can see some spacing when I add this image.
0:02:42
But a lot of times you’re gonna want to add another element like an image and let’s go ahead and choose our image. And I’ll show you a couple of other really cool fun classes while we’re doing this. But you might wanna add an image that breaks outside of this container because this, right now what we have, is a very boxy look. There’s not a lot of dimension to it. And so if you want more dimension, it would be great if this image kind of extended outside of the bounds of this text. But we can’t do that because there’s a constraint on this inner content. Now what we could do is we could go to like that section and you could go to where is it sizing and then under section container width, you can change this section to full width.
0:03:28
The problem is now your text went with everything, right? Now the image is kind of like breaking out, but so is the text. Now what you would have to do is come to this div and you would have to try to get the size of that div, the max width back to what the default was. But if you don’t know the default off top of your head, like let’s say this, watch this, because this is gonna be wrong. Let’s say you did know it off top of your head, it’s 1280, right? So you put in 1280, well now you’re faced with like, okay, but it’s all the way to the left. So now I do my margin autos and now it’s in the center where it was, but guess what, you don’t have the default padding that you had, right?
0:04:13
Because your effective page width is actually not 1280, it’s 1280, minus the left and right default padding. So now this is not gonna line up with anything else that’s in your other sections. Like, oh here, let me take this out real quick and I will add, come on, oxygen, oxygen’s like default removing my padding because I’m clicking around. All right, so now I’m gonna prove this to you. I’m gonna grab this exact, well, okay, I can’t copy it because I don’t have hydrogen pack. I’m gonna drag it down here, look at that. You now have a misalignment, right? Because this section actually has some default padding in it and if all of your things are based on sections which they typically are, should be, then you’re gonna have this problem anytime you try to start breaking stuff out of the container.
0:04:58
All of that nightmare is completely unnecessary. So now I’m gonna show you the easy way to do it. So I’m gonna do BG, we’re gonna do base ultra light. I’m gonna put a little background color on this section. I’m gonna add my image back, the way that I had it and I’m gonna go with the little mountains there and then I’m also gonna go back and add my owl because that got taken off. All right, cool, so now I’ve got my spacing. Now before I break this out and show you the magic of breakout classes, let’s just play with this image a little bit using a couple other classes from the automatic.css system. Namely, we have some max height classes so I can go like max height 40 on this.
0:05:41
Now that looks awful, right? And especially it’s not gonna play well when we use our breakout classes. So what I’m also gonna do is do a width of full on this and there it is and now it’s full but you see that it just stretched my image. That’s a problem, right? Because you know, stretched images don’t look good. So I’m just gonna use my object fit cover class. Whoops, helps if I select it. And now I have like it’s cropping into the image but the aspect ratio has been preserved. And then I’m gonna do a separate video on object fit classes where I can control what parts of the image I see using classes but for now this looks just fine.
0:06:20
And we are ready to see the magic of breakout. All right, so what I’m gonna do is type in breakout, double dash and I’m gonna see what my options are. And I’m primarily gonna stick with medium up to full. And so if we just wanted to break out a little bit, I’m gonna choose that breakout medium class and you see that it just broke out. Now I’m going to duplicate that. And if I remove the breakout from this one, remember this is what it was, right? Because this is without a breakout class, this is with a breakout class. Now I’m gonna show you the next level up. So we do breakout double dash large. All right, I’m gonna duplicate and I’m gonna remove it so you can kind of see the effect in real time.
0:07:02
So when from that to that, now I’m gonna check out the extra large. All right, so we’re getting closer to the edge of the screen. And then I’m going to come down, we’ll take out the breakout XL, breakout full. Full is gonna touch the edges of the screen, okay? Now you saw how difficult it was. And look, I’m proving to see you, it’s still showing me that there is the boundaries of the section that content is not supposed to be able to get outside of. For the way these classes are structured, it creates a force where it forces them outside of those typical constraints, simply by adding one class to the element.
0:07:44
Now you might be thinking Kevin, like that’s fantastic, but this has gotta be an absolute nightmare on mobile devices. Well, it’s actually not the case. It’s all automatically responsive. Just like everything else in the system is automatically responsive. So there is our other ones, which since they were breaking outside the bounds of the container on mobile, they just respect to the bounds of the container. The full class still continues to disrespect the bounds of the container because you said you wanted it full, right?
0:08:12
You want full, you get full, okay? So full means it’s touching the edge, which typically when you’re trying to go edge to edge with an image on desktop, you also want the same effect on mobile. So we gave you that control. The full just completely disrespects the constraints of whatever it’s in and it goes to browser with full. And you see the aspect ratio is still preserved on all of these, we are all good. So that is breakout classes. So simple, but so useful. And that, like I said, it perfectly aligns with a philosophy of what utility classes are supposed to be.
0:08:46
Utility, right? Like I showed you the hard way to try to make this effect. Happen, then I showed you in two seconds, you had a breakout class and you get exactly what you wanted, all right? And it’s all perfectly responsive. Like I said, you add the class, you move on with your life, you don’t have to worry about break points or anything else. So let me know what you think about breakout classes in the comments. Make sure you hit like, hit subscribe. There’s a lot more of these coming. There’s a lot more to theautomatic.css framework that you haven’t seen yet.
0:09:16
And I’m excited to show you. So if you’re subscribed, you’ll see it. If you’re not subscribed, you probably won’t. But that’s it for today. All right, peace.
