0:00:00
What’s up everybody welcome back to the channel. This is an exciting day. This is the very first official training that I have done for bricks builder. If you are from the bricks community Definitely want to give you guys a big shout out and a warm welcome. I want to tell you just a little bit about myself in this channel So you know what’s going on here and then we will get right into the training. I am a digital agency owner I’ve been doing this stuff for over 20 years I teach how to run and grow a profitable digital agency in my private inner circle Which is a paid group with over 800 members most of the projects that we do on the agency side of things are in the 10 to 80 Thousand dollar range. We are exclusively on WordPress. We exclusively We’re using oxygen. We’re now using oxygen and bricks and I’m also the creator of automatic CSS Which you may have heard of it’s a utility framework We released it late last year. It quickly became the number one utility framework for oxygen I do have full confidence that it is going to be the number one utility framework for bricks as well Okay, so I think that’s enough about me. Let’s go ahead and talk about the training We’re going to discuss the difference between sections and containers and divs Inside a bricks because I think that this is a big point of confusion for a lot of people When do I use a section when do I use a container when do I use a div what is the difference between the three What should I be doing with containers that maybe I shouldn’t be doing with divs or vice versa I think there’s a lot of questions and this video is going to bring tremendous clarity to this topic. So let’s go ahead and dive right in So I’m going to pull up our training website If this is one of the first tutorials that you have watched from me Uh, you you are going to learn very quickly that I don’t just scratch the surface of things I want to provide as much context and as much value as possible in every single video and However long it happens to be is however long it happens to be all right And if you need to fast forward you can fast forward I put chapter markers Whatever you need to do do it, but the value is in here. Okay, so I have mapped out a section And what I’ve done I’ve hidden two other sections one with a container one with a div And or the way we’re going to talk about this I guess and you’re going to see a red box And you’re going to see a very very light red box the dark red box is the thing that we are talking about In this particular area of the training. Okay, that this is not how I always do things But I think when we’re talking about sections versus containers versus divs because they all kind of work together It’s just helpful to highlight which thing I’m talking about and any given time So the first thing you’re going to see on the screen is a section And a section in bricks is added like this so uh if I am just you know on any given section right or maybe the page is blank I hit the little plus sign up here and you can type in section right here You can also pin these up top which I highly recommend I don’t know if you can move them around. I don’t think you can move them around But you can definitely pin them and it makes the things that you use most right there at your fingertips So the section is right here and you’re going to see that a section can be added however When I add a section it’s going to look different than when you add a section and we’re going to talk about why that is I’m going to delete this one. We’ll talk about that in just a second Okay, so this is kind of what it’s going to look like when you add a section minus the borders You’re going to notice that the content that you put in this section Touches the edges like the top of the section is touching touching the bottom It is not though touching the left and the right So I’ve got some notes here that we’re going to go through together just to make sure that we hit all of the key points So a section is used to separate topics on a page So I’m going to flip over to here’s my agency website right So this is the hero section so the hero section is a specific topic of content It has our main headline our main lead. It’s got calls to action kind of says what’s going on here So this is one section when you’re looking at web pages You want to start thinking in terms of sections and dives and containers because all of these websites follow What is called the box model everything fits into boxes now these boxes can’t actually be seen right but if you know how a website is constructed You start to see websites in boxes and that’s what you want as a designer or a developer But to the user they don’t really understand where the boxes are where the boundaries of these boxes are But we do and so the first fundamental box is a section and I think this is a good thing to note sections Containers and dives they’re all boxes. They’re just different types of boxes for different purposes But effectively they’re all boxes right one of them is called a container But effectively they’re all containers all right And we’re going to make sure that you understand the differences between the three things But let’s just go through this page as an example So here’s one section as I scroll down you’re going to see right here. Here’s our latest project This is another section of content. This is topically different from what I’m talking about in the hero section So it deserves its own section we come down here here is another section with it’s just a standout quote But it is a new section of content. It is a new topic on the page We start to scroll down and you’re going to see here’s how we do it which kind of covers our services Now it’s really two sectors of services. We have the web design that we’re highlighting and then we have the digital marketing and advertising that we’re highlighting Now you might think oh this is one section here and then this is another section here But really this is all one section because it’s talking about the services that we provide Our services is the topic We might talk about multiple services in this layout fashion that kind of goes left right this little grid column fashion But all of this stuff is related. It’s one topic. It’s the topic of our services. Thus it all fits into one section We scroll down a little bit more and we have social proof. This is a new section. This is contextually different from this content up here We scroll down to the bottom and we see why choose us and got a little blurb from me This is another section topically different from what is above it and what is below it We come down and we see a final call to action section This is another section. It is Topically different and then we get to the footer which is a special kind of section called a footer And then we have a header which is a special kind of section called a header and the thing here that’s really important to understand We can get into the actual HTML of this Let me get out of mobile mode here and let me pull this up and you can actually see right I’m going to inspect this section right here and you are going to see one of the fundamental aspects of a section is that it actually has a tag called a section Whereas a container is going to have a tag called a div and a div is going to have a tag called a div And that’s where everybody gets a little confused. They’re like what is it?
0:07:31
Container is a div and a div is a div. I don’t know what I don’t know what the difference is But there are key differences, right? That’s why they have different names in the builder. That’s why they’re different elements And that’s what we’re here to talk about today But the sections as you see Separate different topics on the page and that’s how you should think about them And what happens when you have very clean HTML like this is it’s just section section section section section section It’s very nice very nice and organized, okay? But then you see up here where we have a header that’s a section But it’s a section with a special semantic tag called a header tag And then there’s a footer which has a special semantic tag called a footer tag And these help denote when bots are crawling the websites when screen readers are You know users are using screen readers This helps decipher it provides the landmarks for where certain things are on the page section Elements and bricks are actually dual elements a section and a container See if you were writing HTML you would create a section in the HTML and that would be it It would be a section you could start putting things in it But in reality you need a container inside of a section and we’re going to talk about why and bricks Knows this so bricks actually puts the container in the section for you when you first add the section You can see that with the light border right here. This is actually a container inside the section You can even see it in the structure panel over here. You’ll see section You’ll see a container nested within the section full with sections are full with using a semantic section tag by default We already talked about this and this is important that the section element stretches the full width of the page You’re going to notice on certain websites. I don’t know if I have any Pulled up right now. Let’s go to like svg at lana.com Okay, so this is one of our client sites right here. You see this background photo stretches to the edge of the page Even though the content in this section does not stretch to the edge of the page And you’re going to see this multiple times. Okay, depending on you know what page we’re on So I’m going to go to Brazilian Jiu Jitsu here. You see it again up here in the hero section as we scroll down We’ve got a full width content right here. We’ve got content touching the edge over here We’ve got oh look we’ve got this parallax section with a full width background image once again Okay, so there’s a lot of examples where you need content to go to the edge of a page If you just add a div or a container that’s kind of floating in the middle of the page where your page most of your page content is You’re not going to be able there’s no structure there to add full width colors or full width images that stretch edge to edge That is the responsibility of the section. So sections aren’t just important for separating out your content They serve as full page width containers that can house things like background colors background images Real images that behave like background images. There’s a lot of different possibilities But the having the section in the first place is very very important Number four Section should have default top and bottom padding which can change and left right padding that remains consistent This is critical one thing I want you to notice is we scroll down this page I want you to look at the left side of the content here all the way from the header Down through the entire page and you’re going to notice that the content even though I have multiple sections and multiple different types of layouts going on The content is in perfect Left Alignment throughout the page. It’s actually in perfect right alignment as well where the content ends over here like these images Will end exactly where the end of the navigation ends and that’s because websites in general have a page width that is different From the browser width so the browser may be very wide, but the website content is contained in a narrow column That column is defined by your containers, okay?
0:11:46
That rest inside of your sections which we’re going to get to in just a second We’ll take a look at those containers But here’s the workflow when you’re adding a section notice that in this section for example My content is not touching the top or the bottom in this section My content is not touching the top or the bottom in this section I do have a map touching the top and the bottom, but my content in general is not touching the top and the bottom Very rarely will you need your content to touch the top and the bottom of a section Therefore you need to protect your content from touching the top and the bottom of a section by default And we do that with top and bottom section padding now in bricks the reason I did this is because When you add a section it’s different from when I add a section when you add a section There’s going to be no top and bottom padding unless you go into your theme you go into your theme styles And it’s in here somewhere. I don’t maybe hear your element section and then padding But I don’t use any of these controls and the reason I don’t is because I’m using automatic CSS So when I add a section I type section I add it you’re going to notice that my section already automatically has padding Not only does it have padding on the top and the bottom it’s responsive padding Which means it shrinks that padding gets smaller on mobile devices versus how it looks on desktop And I can also control that responsive padding very easily from the ACSS dashboard I get to choose exactly You know how this padding behaves across the website I also have classes where I can make that padding larger or smaller like that on the fly Which is extremely helpful sometimes you want a normal section Sometimes you want a smaller section sometimes you want a tiny section Sometimes you want no padding in the section Sometimes you want a very large section like for a hero for example So we can easily Change that responsive padding based on the size that we want We can also change how it behaves from desktop to mobile How aggressive are we with the way that it shrinks up or expands based on the device But that’s why you’re going to see it’s different when I add a section from here So what this would really look like I’m going to go ahead and delete this I basically put a class called pad section none on here which gets rid of the top and bottom spacing But if I were to remove that class this is what a section would look like by default And this is very important when you add your sections You don’t want to always have to come change the padding on the section You should know I pretty much need padding for almost every section that I add If I don’t need it, I’ll take it away But I almost always need it so it should kind of just be there by default And you can see that it is right But you can see that the container inside the section has no padding by default And that’s important because there’s a lot of times where you don’t want padding inside of these containers Remember the only reason you can see the boundary of this container And that it appears My container is touching my content is because it has a border on it Right?
0:14:52
This is what it would normally look like Where your content just appears to be neatly floating inside of your section Right? I put a class on here to show you a boundary of where that container exists So that you can see it But normally that wouldn’t be there And it would just look like your content is neatly floating And you’ll see right here if I take this off You’re going to see that my content perfectly aligns with my header And it doesn’t matter how many sections I put on this page That content is always going to be in perfect alignment And it’s going to be in perfect alignment on every device And the reason that is is because the rule that I just talked about You should have top and bottom padding that can change But you should have left and right padding that always remains consistent Because if your left and right padding changes section to section When you go look at your site on mobile devices Some sections are going to look squished Some are going to be all the way to the edge It’s going to be all over the place There’s no consistency That’s no bueno Right?
0:15:55
We don’t want that to be happening So we need consistent left and right padding Okay, so let’s go back to desktop Let’s keep going down the list All right? Parents of containers are divs So a section is a parent of a container or a div And this is a very critical thing You can add a section You can take the container and get rid of it And there’s your section still there You can add a div And if you add a div instead of a container Notice that this goes all the way across A container could do that as well And we’re going to talk about containers in just a second Don’t worry, I know you’re like thirsty You’re like give me the container speech Right?
0:16:34
But just look at this for a second It can be a container or it can be a div It doesn’t matter Number six, avoid using margin on sections Here’s what you don’t want to do You don’t want to add a section Now see, this section is touching this section They’re touching each other You want them touching each other Because if you apply something like a Background color So I’m going to do base ultra light You get a nice little base ultra light background there You want that touching this section Because if this section has something Like BG base ultra dark Okay, we’re not going to do that But you can see that they’re touching Let me go to the front end Obviously this is going to look horrible But we’re not worried about aesthetics right now We’re worried about lessons So these two sections are touching each other Yeah If you take and you put a margin on the top of here So I’m going to go just quickly to the I-D-L-A-L-L-L-A-L-A-L-Margin top We’ll just do like something like 80 pixels I now have a gap between my sections And that gap is unfilable So you don’t want to use margin To space out your sections If you need more room in a section Use more top or bottom padding Do not use margin Because you’re going to have unfilable gaps in your layout We want to avoid that at all costs Okay, so I’m going to take that off of there Number seven Avoid changing the width of your sections I just explained a minute ago That a section is supposed to be full with content So if you change the width of it Just like I showed you using a margin there You have an unfilable gap between your sections If you change the width of a section You have an unfilable gap on either the left The right or both You don’t want unfilable gaps in your design So if there’s certain layouts where you might feel like You need to change the width of a section You don’t You need to put a container Or manipulate the container that is in that section To get the layout you want to achieve You shouldn’t be having unfilable gaps On the left, on the right, on the top Or the bottom of a section Alright, next thing is Number eight Avoid using random left or right padding values We already talked about that Number nine Generally avoid using grid Or flex box layout controls On the section itself Now the reason you’re doing this And there is kind of a little bit of a rule here Like this can be set to flex column Like that’s the natural stacking order of content on the web So that’s not a big deal But if you start changing this to like horizontal One, if you only have one container in the section Nothing is going to happen It’s totally irrelevant to do that It’s only going to cause problems Because if you decide you need another container in this section You go ahead and add that container It’s going to add it next to your other container And it’s now pushing the page width out of alignment Okay, that’s no bueno We’re doing things improperly here This is not appropriate for how to use sections Alright, we want to delete this If you need side-by-side content We’re going to do that at the container level Or we’re going to do that at div level We’re not going to do that at the section level Because what that also prevents is you From ever being able to put a heading Above those side-by-side content Right, let me just show you that right now We’re going to add a container So here’s my container It put it to the side What if I want this heading to be up here Okay, I pull it out I can’t get it up there It’s on the side of my content And it can only ever be on the side of my content Because my entire section Is set to lay things out in rows Instead of columns And that’s not how things work on the internet Things work in columns on the internet It’s not to say that things can’t be side-by-side But you shouldn’t force all things to be side-by-side You want to contain side-by-side content In its own container Which could be a div It could be a container But it’s not going to be a section Okay, so that is the list on section So what we’re going to do is bring containers Into the mix now So I’m going to grab this container right here I’m going to show it And there we are Okay, so now you see the dark red box Is around this inner container here And my light red box is around the outside And that’s signifying that the light red is our section boundary And the dark red is the actual container That is in this section And remember You get the container by default When you add a section to a page You get the container by default It’s all right There’s one already there for you So let’s talk about the container now You use containers to lay out page width or full width content I already talked about how containers Establish a page width Full width content is to it works just like this Okay, if you need this container to give you full width What you’re going to want to do is you’re going to want to go to style You’re going to want to go to layout And under here with 100% And immediately you’re going to get almost to the edge The reason you don’t get all the way to the edge Is because that left and right padding we talked about That left and right padding is very important For protecting your content From ever touching the edge of the screen Now there may be some cases like with images Where you actually want the content to touch the edge of the screen And remember this isn’t colors This isn’t background images My background color in this section can still easily touch The edge of the screen See my background color goes to the edge even though my content does it Because I’m able to put that background color Or a background image on the section Which is the parent wrapper which goes edge to edge Even if the container doesn’t go edge to edge Its parent wrapper does But there may be some cases where you’re like I really need that container to go to the edge of the screen And if you do the solution is to remove your left and right padding Now you could do that at the ID level here You could go to the ID You could go to layout You could go to padding right and left and set this to zero And you will get it to go all the way to the edge If you’re using automatic CSS That’s unnecessary You can simply do pad nun Get rid of all the padding in your section There’s a few different ways that you can handle getting rid of padding Notice I didn’t remove my container and say I’m just going to put everything in my section That’s not a good idea Your content still needs to be contained We just need that inner container to go all the way to the edge We’re not getting rid of the inner container To make a full width section We’re leaving our section, leaving our container We’re just manipulating the width of the container We’re taking away any padding that we need to take away That’s how you’re going to achieve that By the way, at the end of this I am going to build out a little landing page Not a landing page, I’m just going to build a section So that you can see like one of this from our example sites Just so you can see how we use a section How we use container, how we use divs Alright, so make sure you’re sticking around for that There’s a lot of goals in these trainings Okay, so let’s keep going down our list Containers are paged with using div tags by default So if we go and look, did I save?
0:23:47
Let me go ahead and save I’m going to save And I’m going to preview on the front end And I am going to inspect our container And you’re going to see right here that it is a div Nothing special about it, it has no special tag But it does have special behavior In bricks, like we showed, a container is paged with by default Right, you can make it full width But it is paged with by default So if you stick a container into a section It’s going to be the paged with It’s not going to go full width It’s going to be the paged width And that’s important to note Okay, a normal div does not do that So a container does that, a normal div does not do that I can use containers, multiple containers in a section Alright, so for example, I could add another container To this section And it puts it right below And notice they’re the exact same width by default Because containers are what?
0:24:41
They’re paged with by default Okay, good We should be starting to click now, right? Alright, so sections can have multiple containers Just talked about that Number four, they should typically remain paged with or be full width So those are your two options Here’s what I would not recommend Don’t start going willy nilly with your width Don’t be like, oh, this one needs to be 1366 I put 13,600 1360 Okay, there’s 1360 right there It’s six pixels short of the other one For no reason, right?
0:25:13
That’s not going to look good When your content doesn’t align left to right That’s not look good So don’t do it unless you know exactly why you’re doing it Alright, so let’s delete that right there Should not typically be used outside of a section So you wouldn’t want to just, here’s our page, right? You wouldn’t want to just be like, oh, you know what? I think I’m going to add, I don’t even know if I can do it by default We’ll do container And let’s just drag this out of here Put it like right there It’s not in a section, clearly, right? So what is it basically producing? It’s producing a gap An unfillable gap on the left and right We already talked about unfillable gaps Avoid them, it all costs You don’t need unfillable gaps on your website And then you’re like, Kevin, but I can just make it 100% width You can just make it 100% width Let’s do that There’s 100% width container that’s not in a section But what have you accomplished?
0:26:07
You don’t have a semantic section tag And you have a container that’s now trying to behave like a section Why did you do that? Just use a section in the first place You get the semantic tag You don’t have to play around with it So why? Why? Just follow the rule Don’t put a container outside of a section There’s really not much reason to Okay, next I’m trying to move quick Because we always get the complainers It has too much value for me City has a little too long It talks a little too Containers are typically the parent of divs or other content So I’m not putting sections inside of containers Right?
0:26:47
It is not the parent of a section A section is the parent I am putting divs inside of containers I’m not putting other containers inside of containers I already kind of talked about that I am putting divs inside of containers Okay We’ll get to see that when I start doing a little real-world example And then we have number seven Has native multi-column flexbox layout options and bricks But this use isn’t recommended So there is another special feature In bricks of containers And it is the ability to when I’m adding one And let’s see What’s the easiest way to do this for you guys I’m just going to add a new section Okay, I’m going to grab this container And I’m going to click this little button right here There’s also when you’re adding a container There’s this little icon right here That kind of opens this window And both of these icons Generally show you predetermined layouts And it’s important to know that these layouts use flexbox So if you’re using a 50-50 layout You’re going to see this side-by-side Calamized content And you might think, hey, that’s very important for me to have We can see right here on an example Where we’re going to need something like that The problem is that these layouts all use flexbox Let me go backwards Okay, we’re back at our blank container here And I’m not against flexbox I use flexbox all the time What I don’t use flexbox for Is structural layouts for the most part I use flexbox for content layouts And there is a distinction there There is a great debate on flexbox versus CSS grid In my opinion, grid is phenomenal for structural layout Flex is phenomenal for moving content around And laying out positioning content But the structural layout Which columns are a structural layout Grid dominates that space It’s much better for that than flexbox Flexbox also has some unintentional consequences To how it is used That may get a little tricky for you And I’m going to give you an example Where we insert something like this Where we have a small left column And a large right column And these things are controlled by percentage widths These values can get a little out of whack Look at this So if I have values that don’t add up to 100 Well, I have an unfilatable gap On the right hand side of my page And that’s a big problem That never happens with grid Right So flexbox and then your flexbox child containers Can actually change widths on you As your content gets longer in some cases If you haven’t set a proper flex basis There’s a lot of weird things That can go awry with flexbox None of these things happen with grid And grid is very simple very straightforward The problem is Grid’s not part of bricks yet It’s coming However Cheat code If you’re using automatic CSS Full support for grid You can build responsive grid in seconds Like that And I’ll show you that when we get to Making this little section right here Okay, so I’m going to delete this nonsense What I would recommend is stay away from these things Okay, I know that’s going to be blast for me For a lot of people They’re like How could you say that?
0:30:15
This is one of the most important parts of bricks Not when you have grid It’s not It’s not important at all I can build a $30,000 website And never touch this panel right here When I have grid at my fingertips I don’t need this panel at all Okay, but it is there So I just want to show it I, you know, might as well point it out Because it’s there And you should know about it Mostly you should know You should really need to use it Typically best Oh, I don’t even know I didn’t even finish writing my notes Okay You get what you pay for Have you paid anything for this tutorial?
0:30:52
No, it’s for Now you can see Dives And I want you to notice Dives are outlined in red And then this container Is still outlined in light red And the section is still outlined in light red So you can see where the boundaries Of all of these three containers are But you have your dives right here Dives are the Swiss army knife Okay Of web design And this is why When I first got to bricks I was like Where’s the diff Right Like I can’t build a website Without a diff, what do you try to do to me?
0:31:25
So the first Feature request that I put in Was for a diff And then I went into the inner circle And I was like, hey Bricks don’t have a diff We need a div in bricks We’re going to use bricks We have a diff guys We have a div And the div is And extremely important Swiss army knife Of what you’re going to be doing When you’re building websites They can be full width They’re sorry They’re full width by default They can be any width though These Remember I said the container It’s like, don’t just be Willy-nilly making widths For the container With a div You can willy-nilly make your widths For your divs So if you need some Willy-nilly div widths Then There you go There’s your Swiss army knife All right So Full width by default Use it the div tag So we’ll show you this right here Let me go ahead and say Let’s go the front end All right, we’re going to refresh Did I save?
0:32:15
No, I didn’t save All right, let’s refresh Come down Let’s inspect You can see right here Proof positive There is a div tag But there’s a hidden little feature Of our divs That we’re going to talk about just a second It doesn’t have to be A div tag In a lot of cases It should not be A div tag And this is why the div Is so fundamentally important But let’s keep going with our list Like I said, number three Can be any width Depending on use case Number four Can be Tr- here we go Here’s the magic Can be transformed Into other semantic elements Such as articles A tags links ULs on ordered lists LIs list items OLs ordered lists The Like tons of possibilities So, number five Before we rock and roll on this sample build here It could be the parent of other divs or content All right, so we got that out of the way I want to show you this right here HTML tag on a div Look, I can change it to a section I wouldn’t want to do that I can change it to a link I might want to do that I could change it to an article Definitely want to be able to do that If you watch some of my other videos Especially on accessibility I talk about how most people don’t realize That when you build a card For like a service Even if it’s not a blog post Like you can have a card for a blog post You can have a card for a team member You can have a card for Service areas For locations Cards are very important Features cards are very important Now feature wouldn’t really fall into this category But Team member might A location might Service might Those are actually articles Semantically in HTML And they need an article tag And so if I just choose article on this div And we save and we go to the front end I want you to see what happens here It doesn’t put an article in my div Into an article You can see that right here And this is very important for accessibility It’s very important for semantic accuracy In your HTML The ability to change The HTML tag on these divs Is absolutely critical Okay?
0:34:33
You can change it to an aside And now that begs the question What do all these things mean You can change it to a nav If you’re going to create a navigation And write your own custom HTML tag All right, so we’re going to move on We need to do something real world Because you need to see this in action now Now these all these left-right column layouts Would all be in the same section Because they’re effectively features Right? It’s going down the list of features But each one of these Is its own container It’s not its own section But it’s its own container Now you look over here Whoa, we got a little bit more complication right here Two buttons that need to go side by side If you didn’t know buttons by default Don’t go side by side They go on top of each other So we need to make them go side by side So we’re probably going to need a div right here And then when we do this side by side content We’re going to need a div right here To house this left content We’re going to need a div right here To house this right hand content Let’s go ahead and start building it So you can see how exactly how it comes together We’re going to use just a little tag bit Automatic CSS So you can see a little bit of that happening And just because it’s so much faster and easier And because we need grid and grid is not part of bricks So I’m going to start by adding a section And notice this is great about bricks That is the first thing it asks you to do You hover over the plus sign It’s like hey, you probably want to insert a section here So I’m going to insert a section And this is what I get right here Now let’s take a look at this We’ve got an image on the left content on the right So the first thing I’m going to do is I don’t want to do anything with my section Because notice there’s no And I can actually delete this, delete this, delete this Okay, so we’re down to two I don’t like getting very tabby You don’t want to get tabby You start clicking on the left So we just need our section to be blank Effectively All the magic is happening in the container So this container needs to be a two column grid So I’m going to grab my container I’m going to come up to classes Automatic CSS does everything with classes and or variables So there are classes for creating grids So I want a two column grid It’s grid 2 So I do grid double dash 2 And I get a two column grid Now you can’t see a two column grid there Because we haven’t put any cells in our grid Cells in a grid are just dips They’re just more containers They’re just more boxes So I want to put a box two boxes in here And you’re going to see when I add these two boxes They’re going to be side by side So I’m going to add a div Click on it right there And you can see that that div only takes up half Of this container Why does it only take up half?
0:37:11
Because it’s a two column container It’s waiting on the other grid to arrive Which we’re going to duplicate And now we’re going to see two Dips side by side There is our multi column layout Now I’m going to grab my container And I’m going to put a gap on this grid Because I don’t want my content to be touching I want this little gutter to be here So I’m going to do XL Now in automatic CSS I can do small I can do medium I can do large I can do XL I can do XL I can do XL I have a lot of options And all of my gaps are perfectly responsive And all of my gaps match all of my other spacing Automatic CSS has a mathematical spacing system Which means that it’s all driven by mathematical ratios And it all has automatic fallbacks for browsers that don’t support clamp So when I put padding medium on a box And I put gap medium in between the boxes The gap medium is going to perfectly match the padding medium That’s phenomenally helpful For consistency purposes So I’m going to do a gap of XL And you’re going to see a gap appear Automatically right between those dives And then the great thing about grid Is if I just kept duplicating guys Let me not do that That’s the wrong shortcut So I’m doing shift command D Look at how it just keeps filling out the grid I can just keep having columns all the way down the page Now sometimes I want that In this case I don’t want that I just want to I want one next to the other one Now you’re asking yourself Kevin What about mobile devices These things are not going to fit on every This left right thing that you’ve got going on Okay well you get to decide which break point You want this grid to now stack the content on top of itself And I’m going to choose the L break point So we have letters that correspond This is the small break point Which is that vertical phone Or is on a phone is the M break point This tablet vertical tablets the L And this is the XL And so if I wanted to break To one column at the L break point I simply write instead of grid 2 I write grid L1 So I want a grid at the L break point of one column So I do grid L1 And when you type grid by the way It’s going to recommend all of what’s available to you So you can see in the list Here’s L1, L2, L3, L4, L5 So I’m just going to choose grid L1 Bam And now you can’t see it Because we’re not at the L break point But if we go to the L break point Let’s go to SML Look at that, we have a stacking grid Like that Okay? So very very important Now if I decide my gap looking a little large I can change that from XL to L Now I have an L gap instead of an XL gap No problem Okay, we’re going to go ahead and save here And we’re going to take a look at what we need So I’m going to save this image right here We’re going to go into downloads We’re going to go to monarch Little make a little folder here Oh, it’s called net worth Okay, so we’re going to save that Oh gosh, it’s saving WebP images Guys, I can’t even really I can’t work with this right now My training environment does not So I’m going to have to screenshot these This is awful Thank God there is a white background Nobody’s going to know How could they I’m not even going to do all these Screw this You’ve seen one left right Image, so insert image And I’m going to select my image And I’m going to go ahead And go to my desktop Oh gosh, we’ve got to look through all these I’ve got so many screenshots Alright, this one’s good enough We’re going to throw this one in here Alright, we are going to Save insert Perfect, okay That’s looking a little large And it’s just because the reason is Their page width I can go into ACSS And I can change the page width I can change it in bricks We’re not getting that detailed right now I’m just showing you how Sections, containers, and bibs work So let’s say on task Alright, so I’ve got this right here I am now going to put in my Heading, I need look, an icon, a Heading, text, and a div Now in your brain you might have been like You need an icon, a Heading, text, and then two buttons And an icon, a Heading, text, and a div Because I need to contain these two items right here Now I’ve already used two divs Right, I used a div for our left column I used a div for our right column Now I’m going to add an icon Bam, just like that I’m going to add a Heading I’m going to change this to Heading number two So this is going to be an age two And then I’m going to change this To basic text right here And I’m just going to quickly fill in this Okay, maybe I will change our Website width in just a second Just so we can see how this dials in So then I’m going to go to div Now that I have a container for my buttons I can add my buttons So there’s a button, and I think I can just duplicate this Boom, there’s another button See how they stack on top of each other by default So I need them in their own container A div So that I can change the layout of the div And here is a perfect use case for a Flexbox So notice I’m not doing structural layout Of like this entire section I’m just doing hey, I need to quickly get these buttons Side by side So I can either change this to horizontal row Right here, and then put a column gap between these two things Or I could use automatic CSS classes for this I’ll avoid using ACSS for this I’ll just use bricks so you can see bricks in action Now the question is what are you going to put as a value For your gap, are you going to just throw a random thing in here?
0:43:07
If you haven’t watched any of my videos We don’t use pixels around here Pixels are a no-go for accessibility They’re not a good thing to be using They don’t even really make sense Very much in the digital world With all the different kinds of devices And retina screens and all that Or other Pixels don’t make a lot of sense They’re a good reference unit They’re not a good unit for actually using in development So what we’re going to do Is we’re going to use maybe VW as our gap We could use CH as our gap Or we could use RIM That would probably be the easiest thing RIM translates very easily into pixels But it’s still a relative unit So it’s really good for accessibility So I could do like 3 RIM Which is about 30 pixels on my website But that’s not enough of a gap right there So I’m going to do 6 RIM Alright, and oh it actually hasn’t even been done So I’m going to do 6 RIM And oh it actually hasn’t even put it in yet I was wondering why 3 looks so small So when I click out of here Here’s what I get for 3 RIM But again, is my goal to just make up random numbers Or am I trying to be consistent If I’m trying to be consistent This is where a framework like automatic CSS comes in I can use a spacing variable So let’s say I want small spacing So I can do var, that’s for variable, space s And now I get my small spacing And the reason I’m using a variable like this Is because I can use space s for a gap I can like here on this grid I can use space s for gap on buttons I can use space s for padding On custom components And my space s on my padding On my gap, on my margin Wherever I choose to use that variable Is going to be exactly the same And then when I use space m It’s going to end space l These are going to be mathematically spaced out According to a ratio So this is how you build a website When everything is mathematically perfect It’s like wow, that looks super consistent That looks really clean Okay, so now I put all of these things Into this little container here I can now, I just want to space them all out evenly Right? So I’m going to use a class called owln I didn’t want this to be just an acss tutorial But I mean, it’s just the easiest way to do things So I’m going to do owln And you’re going to notice that everything spaces out Perfectly evenly And that medium spacing matches any other medium spacing That I might use elsewhere Which again, makes everything super consistent Okay, so now we have this floating div up here We obviously need this to be centered You see that this content is centered next to Let me go ahead and put our content in Or I already did But it needs to be larger So I’m just going to go text L And again, I don’t have to make any decisions Right? My L size text is mathematically larger According to the ratio that I set from my M size text My normal size text And this is based on my settings What I currently have it set to for large size text And this is also responsive automatically It’s controlled by a clamp function Now I want to put in sign up and learn more on my buttons So I’m doing sign up Right here, sign up Don’t want that capitalize And then on this one, I’m going to learn more And then I want to style these things as buttons So we have button primary If I could type So button primary gives me my primary button And then I have button primary And then I stack another class called button outline And it makes an outline button right there And now you can see just like these Now these have border radius We can talk about how to do that in a second But I now have my normal button And my outline button next to each other just like that Okay, the next thing I want to do Is I want to get this content down here So that it’s aligned to the left of the image So there’s a couple different ways to do that There is a class now this you use flexbox And here’s a good thing You can combine flexbox with grid Things are very powerful when you combine flexbox with grid There is a class called align And then you can combine flexbox with grid There is a class called align items And if I align items to the center You’re going to notice that it bang It puts them right in alignment with each other In the center and all is good in the world So I’m going to go ahead and hit save And then we’re going to go And oh it would help if I actually previewed my site There you go. So we have our layout We have our heading, our text, our buttons next to each other Now does it look exactly like this?
0:47:41
No, because I haven’t dialed everything in yet I can actually dial it in It’s not really the point of our tutorial here We’re showing sections versus containers versus divs But I will go ahead and make our page width content A little bit smaller So I’m going to go over here And first of all we’re going to see what width we’re working with here So I’m going to go up here And let’s find that container We are working with 1140 That’s significantly smaller than what I had my site set to So I can go to theme styles I can go to container And I can go to 1140 Okay, so now it is 1140 Now I would want to also go into automatic CSS So I’m going to go into the back end here I’m going to go out I’m going to go to ACSS And I’m going to go to viewport And I’m going to change my website width Right here to 1140 as well I want them to match So that they’re in sync So now that that is happening all is good And if we save And we refresh Oh boy, we’re starting to look almost exactly the same I mean we have different fonts Right? I took a screenshot of this So it’s not going to be exact But you see I’m almost mimicking the exact layout What about our buttons?
0:48:59
I want those to be rounded Hey, that’s no problem. ACSS I go to my button radius We can do like 40 in or something and same like that And then I’m going to refresh And I have rounded Pills shaped buttons Just like that, just like magic I want them to be smaller and have less padding Okay, no problem there So I’m going to go into my padding for my buttons I have my top and bottom padding I can go to.5M on that I can go to 1M left and right Hit save all of my buttons Automatically update across my entire website Easy peasy I don’t have a minimum width on that If I don’t want my buttons to have a minimum width I simply go in here And I look for my button width setting I just clear that out Okay, minimum is 0. I’ll hit save Then I’ll go back to my front end And look, buttons are the way Now I don’t personally like that But it’s the way they have it here And you can see instantly Look at that, it’s almost an exact match I’m just like Willy Nilly trying to change a couple settings here and there So that’s kind of the power of automatic CSS And you see here We had a section, we had a container Now what if I want the container for the next one Right? So now I can duplicate this container So I’m going to basically come over here And I will hit duplicate And it puts another one right below Now I grab my section And I’m like I want all these things spaced out Hey, no problem I will excel and they’re all spaced out now All my containers in this section And I’m going to be evenly spaced out And now what I can do is I can just come over here I have my two divs effectively And I can swap them Okay, look at how fast that was I hit save, now I can just refill out the content We go look at this on the front end And now we have alternating Section-based content But it’s not a different section It’s just different containers Now you feel like those things are too far apart Okay, we don’t need owl excel on there We don’t need excel spacing Maybe we just want owl-el spacing So now we have a little bit of spacing between We could do if, we could do s, we could do access Whatever you want to do Now the problem is here I know what you’re probably thinking is like Hey, when this stacks on mobile You’re going to have image and then content Then you’re going to have content again And then image And that’s not good, right? We can see that if we go to the front end And we just look at this There’s your image, there’s your content Want, want, there’s your content There’s your image, right?
0:51:29
So we need to effectively At our owl breakpoint, which is where we stack our columns We need to make sure our image comes first Well, an automatic CSS is as simple as this You grab that div That’s housing that content And you put order first And then you can see l right here Order first l And that’s going to make that div come first In this grid at the owl breakpoint And so now we’re going to refresh And we’re going to see right here Image, content, image, content Fixed just like that And you can do that all the way down with all of your sections Of course there’s ways you can do custom CSS to make that stuff happen automatically I’ve done tutorials on that before So let me go ahead and back to screen here That is just a quick Ha ha Quick, it’s not, it wasn’t quick What’s it? I know I’m going to get the comments This could have been done in 10 minutes But it’s a lot of extra value out of it That’s what’s important But we talked about sections When to use those, what they do Containers, when to use those, what they do Dives, when to use those, what we do We did a little example, little page build out here And you got to see a little bit of automatic CSS as well So I feel like this is a really good intro For the bricks community, just get you guys some valuable content There’s going to be way more stuff coming on the way In terms of tutorials for bricks Of course there’s also my inner circle And there’s automatic CSS There’s three of those things that you should have in your mind Just be thinking about and make sure this This is the most important thing If you want to see more of this stuff, hit subscribe Hit the thumbs up And then I want you to if you’re from the bricks community specifically I want you to drop a comment And I want you to say I’m from bricks Or I’m for bricks, or I’m from the bricks community Or something related to bricks Just so I know how many of you are coming over From the bricks community And for people, obviously, that are here from the bricks community The more bricks tutorials, I’m going to be rolling out Plain and simple So that’s it for me today, love you guys Thanks so much for your support And I’ll obviously be back very very soon Peace
