CSS Grid in Bricks Builder (part 1)

hi this is dimitri from sigma1 and in this tutorial i'll be showing you how to use css grid in bricks builder now before we begin i see on the facebook forums that a lot of people are having trouble figuring out the best practices of grid or a brix builder so what i'll do to start with is go through the setup that i use as a foundation for all of my websites so to start with i just added a container i already have the same header that i used in the last tutorial so i'll add a container under it and let's name it general container layout will give it a width of a hundred percent let me get this out of the way give it a width of a hundred percent and for now we'll just give it a height of 65 vh additionally we need to add some padding because if you don't add padding you'll get something like this where your elements just squish right up to the edge of it so typically i use some sort of responsive min max function or clamp but for simplicity we'll just do nine rem on the top two rim on the right nine rim on the bottom and another two rim on the left and all that does is just give us a little bit of padding to work with but now all of that's just in the new class general container then what i like to do we'll create another container as a child for this i typically name it inner container i already have a class for it i just give it whatever max width i want and depending on the style website whether it's modern contemporary trendy whatever but in this case we'll just do 1280. okay and that's the basics of how i get started now let's just do a dark background for now and i'm going to center everything just so that we can see exactly what we're working with let's add a heading uh let's give it a text light class all the text light class really is is you go text go to typography and you click white so now let's uh again i want to center everything so we have the heading and realistically we don't even need to put the heading in a container i'm just showing you guys kind of the methodology that i use to move forward now right now brx has announced that they're going to be integrating css grid in a future version however if it's like oxygen builders while it is fantastic and great to work with it doesn't give you the granular controls that you need when building advanced layouts so i have my own css framework i've been developing for many years and today i'm starting to show it with you show it to you guys so that uh everyone can begin to utilize the very granular tailwind css based layout for you so the old way to do it let me just add some margin to the bottom typically of course we have a class for this but right now that's fine so what people typically do right now if you go to container layout we'll add three inner containers we could go add column gap of light to rem and there you go let's add a grid in our wrapper class and always use classes it's always best practice it makes everything much much easier to replicate in in the future so right now we'll just give it a background color so you can see like this go grid in our wrapper again in our wrapper again now with flexbox or the grid or the bricks flexbox it's nice and you could do things like flex grow flex shrink or whatever but then when you want to start adjusting your sizes it just kind of isn't as intuitive as most people wish it would be so if you want to make it like a 30 33 by 66 you would do like this with we would do 67 percent we'd have to get rid of this one we're left with a 3366 but now if we want to add another one it just it's all messed up so let's make our grid containers we'll name this section simple grid layout we'll go to container and before i go too far i've already pasted everything in here and if you go to my blog i'll attach it to the youtube video it has all of this for you to copy paste the only catch is i require email address and that helps us track conversions and allows us to pump out more quality content that people are interested in so we go here we're going to attach the grid class to it great and then we'll give it let's do three columns and we're going to do a gap of eight there we go now doesn't look like anything happened let's add a container we'll name it grid in our wrapper same one that we used last time and it just works now let's take a step back i created that container earlier in the tutorial and we named it inner container i like to take everything and put it inside of that inner container that we did where we have a css max width of 128 pixels and this the reason i do it is it keeps everything in line and keeps your website visually aligned on the edges so i'll just rename this inner container and then we'll name the inside one grid wrapper the inside one is the one with all the grid classes assigned to it okay now let's just add some heading text item heading all right adding i'm heading and we'll just add padding to the grid in a wrapper layout padding we'll do like four rim for each of them okay and if we look on the front end again just a very simple grid layout now let's say we want to make this a cool layout well before i get there we'll make it mobile responsive so let's actually change it so you can see it better we'll do grid calls 4 we'll get rid of the three and we'll duplicate it one more time now we're going to add one class and this whole thing will be completely responsive right now on the front end if you look at it it's all smashed you see they never the columns never break so do lg grid calls too you see right when we get to we're at 9.92 right now the moment it gets to 991 it breaks all of that with just one class now we'll take it a step further and we'll do md grid calls one okay so here we go again four columns automatically stacked to two columns and then it's 768 769 768 it's there 767 it goes to one column how cool is that we have grid grid gap grid calls four lg grid calls two and md grid calls one and now you have a fully responsive layout for whatever it is your service cars your image cards that i made in the last tutorial whatever you need you could do it with five classes now let's just duplicate this section and i'll show you other cool things you could do now one of the worst things when doing content is getting the right size content aligned so all your boxes are the same size with this you don't need to do it anymore so your customer gives you really long text for one of their services in short text for the others you don't have to make that an issue anymore you go you have the class stretch and now everything again is the same size see it just takes care of all the responsiveness on its own now another cool thing you can do we'll give you the first one call spam two okay you know what let's do call span three and we'll make this one call spam three as well okay now you've got a very cool interesting layout with minimal effort again it's fully responsive the catch is when you start doing column spans it breaks it just a little bit but it's very easy to fix you can tell it's broken because they're not perfectly aligned with one another so all we do because we're breaking to two columns on the large and one column on the medium we have this spanning three columns we'll make it span two so that this there's the right now this is three columns wide but on large devices at 991 pixels it's breaking to two columns so what we'll do lg call span two and we'll do the same thing here lg call spend two we'll save it right there we've got a very cool interesting layout now when we want to make it fully broken down on medium devices we just assign it to class md call span one and here we do the same thing md call span one now again it just breaks perfectly there's zero extra effort you have to do i've done everything out of the box again it's based off of tailwind css framework i've just retrofitted it to work with bricks now let's make another simple grid layout let's make this advanced birthday and i'm just totally making stuff up here now i want this one to go down a second row rows band two we'll give this one another call span too there we go now you've got a really cool interesting layout with minimal effort let's make this one instead of call span 3 we'll give it a call span 2. and we'll make this rose span two and there you go now as i mentioned it's very easy to use css grid builder and bricks all you have to do go to the blog that we posted it's attached to the video description put your email in your first name and sign up for our newsletter and you can download our entire code from there once you're done you drop it in the brick settings custom code or if you're really good at plugin development you make your own plugin and drop it in there i'll have a cheat sheet and everything and you're good to go thank you

Channel: Sigma 1

Views: 323

Keywords:

Id: FhEe3hesioM

Length: 16min 42sec (1002 seconds)

Published: Sun Nov 21 2021