0:00:00
Creating a split hero layout is a very common requirement in modern web design. And unfortunately it’s not quite as easy as it seems at first glance, especially if the requirement asks you to keep the content in that hero section in perfect alignment with the rest of the content on the website. And so what we’re going to do is we’re going to take a look at this split hero section right here. And this is going to be a little bit of a different tutorial. I don’t normally do this on this channel,
0:00:28
but we are going to take a look at how Automatic CSS’s new content grid layout system actually makes this insanely easy over the traditional approach to doing this. Now I will do a follow-up video and teach you the traditional approach, but I do think it’s a good learning experience in maybe a different way for you to see what the automatic CSS workflow and solution is for something like this. Now I want to say that the content grid layout system is insanely powerful. It’s used for way more than just what you’re about to see here. But this is just one easy example of how the content grid layout system makes light work, light work of a relatively challenging scenario
0:01:17
for a lot of web designers, okay? All right, so what we’re gonna do here is we’re gonna say edit with Brics and I’m gonna go ahead and delete what is here and we are just gonna go ahead and start from scratch. I’m gonna expand that all the way out so we’re using our full canvas here. Okay, normally my browser is already full width.
0:01:38
That is annoying, right? It’s annoying. I do my pre-flight recording checks. Don’t always catch everything, do you? Okay, so I’m gonna add a section right here. And basically if we just remember back to that structure in our mind, we want two columns. So I’m gonna need two blocks inside of this inner wrapper.
0:01:54
So I’m gonna say block block. Now we’re gonna use a bunch of automatic CSS features here because this really demonstrates the efficiency and speed of the workflow, even though I’m sitting here talking and rambling. You’re gonna see how automatic CSS in general just makes light work of most of this stuff. In this left-hand column right here,
0:02:13
I’m gonna want a heading, I’m gonna want text, and I’m gonna want a button, perfect. And then this right side, which is gonna be our media wrapper, I’m gonna put our image, that’s gonna be our media. And I’m gonna go ahead and select the image that we just had, and we will put that in. Okay, I basically have all the ingredients that I need
0:02:30
to create this hero section. So what I’m gonna do now is I’m gonna use an auto BIM feature, an automatic CSS to give all of these things BIM classes. And I am going to organize my structure panel all at the exact same time. So I just click that little button that says BIM. And now what I wanna do is just name everything, right?
0:02:49
So we’re gonna name this Split Hero, and then that Split Hero container right here is actually the inner of this Split Hero. And then this block is our content wrapper. We have a heading, we have a lead paragraph, we have a button, or I can say a CTA, whatever I wanna call it. Over here is the media wrapper,
0:03:08
and then we have our media. And when I hit Apply Classes, not only is this gonna give all of those elements proper BIM classes, nice and organized, but it’s also going to organize my structure panel for me. So I hit apply, and now we’re organized, and we have classes all in one go. Absolutely fantastic, right? So now what I’m going to do is come into my inner, and I want to establish my grid structure
0:03:32
first. So I’m going to select display grid. Under grid template columns, I’m going to select my grid structure with the context menus. And I can just do two for right now, we’re gonna change this. And then down here for rows, I just wanna select one. And then I wanna come up here for the split hero. And I actually wanna get rid of the top and bottom padding
0:03:50
that’s there by default. So we’re gonna go ahead and zero that out. I’m gonna come into the content wrapper here and I’m gonna line everything down to the center. I’m gonna say our hero heading right here. And then I just want some Ipsum text in here. We’re gonna do some website Ipsum short. And then this is gonna say call to action.
0:04:11
And then I’m just gonna put a button action class on this. So we’ll do button action. All right, perfect. Now what I want is I want our content gap in here. So I’m gonna hit row gap right here. And I’m just gonna select content gap. That’s the contextual utility for spacing all of our content out on the website.
0:04:31
So I don’t have to select any values. I just know I want a gap between my content. So I’m gonna choose content gap. Okay, I need to make sure that this is an H1 heading. I need to make sure that this is a paragraph. And then I’m gonna give my split hero a background color. So I’m gonna come into backgrounds and I’m just gonna choose one of my new contextual utilities,
0:04:52
and so we’re going to do BGLite. Okay, perfect. Let’s just take a look at what we have on the front end. Now, notice that everything that we just did is 100 percent scalable and maintainable because it’s all assigned to BEM classes, nice and organized. We’re very, very close to where we need to be. This is where you would have to start doing a lot of the flex box magic we’ll call it to and and some breakout stuff in order to get this to behave the way you want in the Old system and the old system by the way, too was and I’m when I say old system
0:05:25
I basically mean vanilla CSS right the content grid layout system is unique to automatic CSS There is no other framework. I know of that has this system in it So what you’re about to see is not even it’s not available in any other frameworks. There’s at least two dozen features at this point that automatic CSS has that other frameworks do not have. We’re constantly like, everybody’s asking, well, what’s the difference? The differences are endless. But what I’m going to do here is now I’m going to give this a minimum height.
0:05:58
We’re going to make this a little bit bigger. Everything inside is going to stretch. I’m going to do that on the inner right here. So we’re going to get down to minimum height. You can select whatever value you want. I’m going to do 700 here. Now notice that the image did not come with the grid, right? The grid actually expanded.
0:06:16
The image did not come with it. That’s because images don’t behave that way by default. So we’re going to go ahead and wrap this in a figure tag. We’re going to set object fit to cover. And all we need to do is use the flex grow property set that to one and that is going to go wherever our section goes now okay and we need the object fit cover because we’re going to be stretching this image all over the place we don’t want it to warp so we needed that anyway okay now
0:06:41
let’s go ahead and refresh now we’re super close all we need to do is use the breakout okay now I’m going to go over to automatic CSS to the documentation real quick, and I wanna show you this concept of what is called content grid. So I’m gonna go to the docs for this, and we’re not gonna obviously read the docs, okay? We’re just gonna take a look at this graphic right here. What content grid does is it establishes different zones.
0:07:07
It’s a new paradigm for vertical rhythm content layouts, right, and so it establishes a bunch of zones that you can assign content to. We have a content zone, we have a feature zone, we have a feature max zone. These are all customizable in the dashboard, by the way. We have a full width zone. Ah, put that one in your mind right now, right? We have a full width safe zone.
0:07:29
We don’t need to talk about that right now. And then things can be custom widths all within this. And then content grids can actually be nested in other content grids. And it’s just an insanely powerful system. What you’re seeing here is just the tip of the iceberg. But I’m going to come back here and we’re going to see how this actually works. So I’m going to go to my Split Hero. I’m on the parent container up here and I’m going to use the class ContentGrid.
0:07:53
Now unfortunately, ContentGrid is complex. You can’t just assign the whole system to a variable that we could pop in on Split Hero. Except in 3.0, you will be able to magically take utilities like this that used to only be available with classes and use them with custom classes. That’s gonna be another unique feature to automatic CSS that’s coming. That’s gonna be in 3.0.
0:08:18
So this whole situation of you need an extra class to establish content grid, you won’t need that after ACSS 3.0. Okay, now, just like that, I just did content grid. It took my old section structure and got rid of it, and it replaced it with the new content grid layout system. And if you notice, I’m gonna go ahead and hit save, nothing changed.
0:08:40
This is an exact replica of what we had before, except I have new superpowers at my fingertips, okay? So what I’m gonna do is I’m going to come in here and I’m going to go to split hero inner and I’m going to go to this grid column box right here. And what I want is I want this edge of the content to stay exactly the same. I just want everything else to stretch over to the edge of the screen. And so the way that we do this is just by naming the zones. Where do we want it to start?
0:09:10
Where do we want it to end? Now, by default, everything is in the content zone. That’s why it’s called a content grid, right? Everything is in the content zone by default. But I want to say that this grid right here, this little inner container, starts at content start, the start of the content zone, but it ends at full width. It ends at the edge of the screen, okay?
0:09:33
So the way I do that is just say, hey, start at content start, and then I do a forward slash, if you’re familiar with how grid column instructions work, and then I’m just gonna say full. So go all the way to the edge of the screen, and just like that, we have a split hero. Now what I’m free to do, because this uses CSS Grid, both within this inner and within the outer,
0:09:55
it’s more or less unbreakable. And I’m able to come in here and actually play with a bunch of different ratios. I mean, look at the, look how the images is going to respond right and this is the just the nature the greatness of CSS grid in a lot of ways. So I’m gonna say that we’re gonna use like a 1-2 structure we actually let’s use a 1-3 structure right here. So if I click 1-3 it’s gonna replace the
0:10:20
variable that was already there with the new 1-3 variable. I can also play with my gap in here. I have an auto gap, thanks to automatic CSS, but I can override it at any time. I can right click here and just play with different gap structures. Notice that nothing is gonna break, nothing is gonna break. So I’m gonna go ahead and hit save, and we’re gonna refresh this on the front end,
0:10:41
and look at this structure. Look at this, that we were able to make with no breakouts, no flexbox craziness, because it is, it is a little convoluted to do this using the old vanilla, um, you know, method, right? And with content grid, it’s just insanely easy to get a number of different ratios. And look, because we told this grid to start at content start, it is in perfect alignment with my logo, with my header,
0:11:08
with any other content on the page, it’s always going to be in perfect alignment. Doesn’t matter what ratio grid I choose, doesn’t matter what gap value I choose, that is always going to remain in alignment. Now, what if we wanna flip this? What if we want the image to actually be on the left-hand side?
0:11:26
In the old model, using Flexbox to do this and breakouts, this was even more challenging, even more challenging, and can create a whole bunch of different issues, it’s a breeze. This is light work for Content Grid, okay? So watch what we’re gonna do here. We’re gonna take our media wrapper and we are gonna say, hey, we need you to come first, right? So I’m not just gonna drag it
0:11:50
because I actually want the DOM structure of the page to stay exactly as it is, but I’m gonna use order minus one to put the media wrapper, which also has the media in it, on the other side, right? Now what you’re seeing is that media is now in the one-third part of the one-three grid structure, okay? So all I need to do is flip my grid structure around. So instead of grid one-three, I need grid three-one. I need the image to live in the three parts and the content to live in the one part. So I just right-click here and I say 3, 1. I’m just going to choose the new grid structure.
0:12:29
What you’re going to notice is, now it still has the same exact instructions for what zone is this content living in, but everything looks great, it’s just on the wrong side. How do we get it for this image to align with the left edge over here and then ensure that this content right here is in perfect alignment with the edge of our content on the right side.
0:12:53
Okay. Like I said, light work for the content grid system. See how this says content start full. What if we flip this around and say full to start and look what’s already happening. It’s now on the left edge, starting on the left edge. And where am I going to go now though? What did, where, where’s the end? Well, we need to go to the end of the content zone, right? So we’re gonna go to content end, and now I’m gonna hit save,
0:13:17
and guys, we’ve just flipped that entire structure. With no insanity, no Flexbox craziness, no breakouts, no nothing, we’re just reassigning the starts and ends of where this content lives, what zone does it live in, what zone does it end on, and we’re gonna get the exact same structure
0:13:35
but mirrored to the other side. And so you could assign these things to custom classes, like you could say split hero left as a class, split hero right as a class if you wanted to. So you can have these just as like, almost like presets for your layouts. Now, if we want it, we obviously need to make this responsive, right?
0:13:54
Let’s go ahead and do that before I get out of here, because I know people are going to ask about it, right? So I’m going to come down here, and I can even change my structure at different breakpoints. That’s what’s even better, right? So that was grid three one. I wanna give this a little bit more room. So I’m gonna do something like two one.
0:14:08
I might also adjust my gap down to something more sensible like M or maybe L. That looks like a little bit more sensible. So I think that right there is fine. Now at the next breakpoint, I know for sure like I’m just gonna need to stack this here. This is getting way too skinny. So what I’m gonna do is I’m just gonna choose grid one.
0:14:27
That’s what the grid one variable is for. It’s like, Hey, just give me a one column grid. And then I just need to make sure that this one column grid is assigned to where to the content zone. And now it’s suddenly, it’s not, there’s no breakouts happening. There’s no nothing. It’s just, okay, I’m not, I’m just now going to live in the content zone, which gives me an automatic gutter as well. And so now this is fully responsive. Okay.
0:14:51
Works perfect at every break point. Fantastic. And notice that at all times when I say, Hey, end at the end of the content zone, there is a programmed gutter into this system, just like there is with a normal section. So your content is never going to be touching the edge of the screen unless you want it to like right here, we want it to touch the edge of the screen. But if we don’t want to touch the edge of the screen,
0:15:15
we always have a gutter available to us. Let me go ahead and go back to camera. This new content grid layout system is insanely powerful. It is just one of many new powerful features in automatic CSS. As I promised, I will come back and I will teach you how to do it the vanilla way without automatic CSS. I’ll probably do that next week,
0:15:39
so be on the lookout for it. Until then, I love you guys, thank you for your support, thank you for watching and tuning in, I really appreciate you and all that you do for me and for this channel, so thank you and peace.
