Build Your First Starter CSS Framework in Bricks Builder 2.2 (Step-by-Step)

Over the last couple of weeks, I've been releasing videos on how to get started using the CSS framework options in Bricks Builder 2.2 and above. These are all new features that allow you to easily create typography, spacing, colours, all those kinds of things in a simple, reusable fashion.

Today, we're going to take the skills we've covered in those first couple of videos, and we're going to create our first starter CSS framework. We're also going to take a look at expanding it beyond what you can do with those native functions inside Bricks 2.2. Now, if you haven't seen those first videos, I will link the playlist down below and also in the corner right

now so you can check those out. I would recommend watching those first of all, just to get a better understanding because I'm not going to go into the same level of detail with each of the features.

We're going to take it as red, you understand those things, and we're going to start building things out to have our starter CSS framework. Now, for ease, I've already created a simple page template that has things like my headers, my typography, my links, colour buttons, things like that already inserted. We can use these as a starting point to easily be able to see exactly

what's going on when we make changes. So you can download this if you want to. A link will be down below. Just import this into your copy of Bricks and you can hit the ground running. So let's get

below. Just import this into your copy of Bricks and you can hit the ground running. So let's get stuck in. Let's come over into the style section. And inside here, we've got to do the first thing,

stuck in. Let's come over into the style section. And inside here, we've got to do the first thing, which is create our theme style and associate that with our website. Very easy to do. All we're going do is come down, click inside here. You can see we can now name this. We'll call this MyCSS Framework, and we'll click the little Create icon, and now we've created that theme style.

You'll also notice we come into the conditions. It's already set this to be available for the entire website. Modify that if you need to. Entire website should generally be perfectly fine for

entire website. Modify that if you need to. Entire website should generally be perfectly fine for most use cases. Okay, so that's the starting point. Now we've got our options on the left-hand side for classes, variables, colours, and so on. So now we can move on to starting things off with our colour palette. If we click and open this up, you'll see there's this default colour palette that contains

colour palette. If we click and open this up, you'll see there's this default colour palette that contains a bunch of colours. This is kind of like what you'd expected to see in Bricks previously, your basic colour palette. You don't need to use this, and if you want to, you can easily delete this from here. So let's get rid of it. Start with a clean slate. All we need to do is click on the

rename or delete, choose the option to delete this, and confirm it. And there we go. We now have no colour palette. So obviously, you can import ones inside here if you want to. So if you've created

colour palette. So obviously, you can import ones inside here if you want to. So if you've created something, you can export this, and then you can import it directly inside you.

We're going to start completely clean. So we're going to change it from colour palette, and we're going to change this to My CSS Framework colours, just to kind of keep that consistency for the My CSS Framework, so we know what we're dealing with. Click on Create, and we now have a blank colour palette ready to start working. So the first thing we need to do is give it

some variable names and choose some colours. Now, I like to keep things relatively simple for most projects. You don't really want to go down the route of having tons and tons of colours. It just

gets a bit unwieldy. And most use cases, two, maybe three colours is probably more than enough.

And then have things like your neutral shades, your black, your white, and so on, your kind of basic values. So for this example, we're going to do a primary and a secondary colour. So all we're going

values. So for this example, we're going to do a primary and a secondary colour. So all we're going to do is type in the variable name. So we're going to do primary. We're going to keep everything lowercase. And then we can choose our colour. So we can choose our colour from the colour picker.

lowercase. And then we can choose our colour. So we can choose our colour from the colour picker.

We can choose between the various different modes. You can also put the value you want directly inside here, or you can just type in one of the CSS colours, red, blue, green, yellow. You get the idea. And then we can create it from there. However, if you are not very good at creating

idea. And then we can create it from there. However, if you are not very good at creating colour palettes, or you haven't been assigned one by a client that you may be working on, or a colour palette you have, you can use external tools to actually create something that's quite eye-catching.

A really good example of this is Coolus. You can come in here, and I've covered this in his own video several times, but this allows you to create nice colour palettes that complement each other using in various different types, things like analogous, split complementary, complementary, and so on.

So if you have no starting point and you're a little bit colour useless, this might be a good starting point for you. So let's use this as a kind of starting point. I'm going to kind of want to work with this kind of teal colour and this sort of salmon-y pinkish colour. So what we're going to do is we're going to copy that colour, so grab that from here, copy it, head back over into Bricks,

and we're going to simply paste that inside here. And you see that now picks the colour up and we'll click on add colour. There's our first colour. We'll come back to the shades and things in a moment. So we'll just minimize that. Now let's put our secondary colour in. So again, like we did

a moment. So we'll just minimize that. Now let's put our secondary colour in. So again, like we did before, we'll give it a name. So that's our variable name. Head back over to coolers, select our second colour, copy that back into Bricks, pop that colour inside there. Again, add our colour, minimize this.

So we've now got a primary and secondary colours. Now you could carry on working like this, but if you didn't have that method, you didn't want to use coolers. You've got just like a single colour and expand upon that, there's options inside Bricks itself to be able to work in a similar fashion.

Just not necessarily quite as nice as you've got inside a tool like Cooler's. To access that, you simply come over to the Create Harmonies option, click on there, and you can see we can choose from various different harmony types. So analogous, monochromatic, complementary, split complementary, and so on. So it's a nice way of doing it if you want to stay inside Bricks.

and if you want to use this, you can say generate colours.

It'll automatically generate those colours for you.

Lots of ways in which you can actually do this.

So now I'm going to keep this really simple and straightforward.

I'm going to just use these two basic colours.

I'm going to create a couple more variables.

So we're going to do something like white, set our colour, add a colour.

Minimize that.

Then we're going to do black.

Again, we're going to just do black inside here.

There we go.

There's our colour added in.

So now you could use those if you wanted to, to create just sort of varying different neutral shades.

So for example, if we come into white, edit this, and say we want to create darker shades.

We can't really create lighter shades.

Or you may want to create transparent shades.

So in this example, let's create some darker shades.

We've got some kind of gradients of white through gray colours.

We'll set this to be using four different shades, and we'll keep it really super simple.

So now we've got a couple of shades in between.

If you wanted to, you could also then take something like your primary, expand this out, and say you wanted to create some lighter or darker shades of this as well.

So if you wanted to keep that primary colour and just use shaded values, you could do that here.

So let's do it.

Let's say we want to create some light shades.

And again, like we've seen before, we'll do three, come to the dark shades, and we'll do the same there and do three.

I don't want to end up with lots and lots of colours.

So we'll say we're happy with this colour palette.

And we've now got a very basic set of colours that we can use.

All we need to do is click on save and our colours are now available to us.

Let's quickly check that out and see what we have inside the editor.

So we come into the editor itself.

You can see now we can choose from our colour palette.

And if we expand this, there's our colour palette with our shades and everything being shown inside here.

Okay, so now that we've got some basic colours inside here, we now need to go and start to map these to various different parts of our theme style.

So let's come into our theme style setting.

and inside there we're going to come down into our colour section.

And here you can see we've got primary, secondary, light, dark, and so on.

Now we're not going to use all of these.

If you want to, you can create more colours and map them accordingly.

But we've got a primary, so we're going to click on our colour palette and we're going to choose our primary colour.

There we go.

Here's our primary.

Choose our secondary, choose our colour palette, pull out our secondary.

Our light colour in this example is going to be our white, so we'll choose white.

Our dark colour is going to be our black.

So there we go.

So you want to do a muted colour. We could do that here as well. So it's a muted colour, for example, and we want to use something like a lighter shade of our primary. We could select that from there as well. And what you see is this is pulling in those variables. So now we've got a flexible system. So if we change those colours, everywhere this variable is being used, we'll update accordingly. And we'll see that now. Let's hit save. Let's expand this out and let's go and take a look at our canvas preview.

Now you can see our buttons have picked up our primary and secondary colours because we've mapped those to the relevant primary, secondary, and so on shades.

And our buttons are picking up those colours.

If you wanted to override that and specify exactly what you wanted your buttons to be colored like, well, you could do that by simply coming into the elements section, scrolling through until you find your buttons and expand those out.

And then you can see there's our primary.

By default, that's picking up what we set as our primary, secondary, tertiary colours, and so on.

and if we want to override those, we simply do like we've done before, which is come to the colour background. Click on that and let's say we want to go for this dark colour. Click and you can see that

background. Click on that and let's say we want to go for this dark colour. Click and you can see that now picks up and it also updates inside our preview of our theme style. For this example though, let's get rid of that. But you set this up as you see fit. Multiple ways of achieving the same end result.

Okay, so now that we've created our colours and we've applied those into various different parts of our theme style, let's move on now to typography. So first things first, I want to do two different typography scales here. But again, you can create more should you want to. First things you're going to do is change this from typography. I'm going to call this headings and click

on create. So now this is our preview of what it's going to look like

on create. So now this is our preview of what it's going to look like and all our options are done on the left hand side. So we're going to change this from prefix of text and we're just going to put in H. Then we're going to change this scale type from t-shirt and we're going to set this to be custom. And what we're going to do is we're going to put the custom scale.

This is going to go 6, 5, 4, 3, 2, 1. So you can see now there's our H1 at the bottom, our largest and we've got our smallest the h6 at the top you can set your baseline step if you want to this is set to three which is used in the h3 that's perfectly fine now we're dealing with

headings here so we probably want to make these a little bigger than the 16 and the 20 that's set for the minimum and the maximum for your your mobile and your desktop so let's set these to something like 24 and 36 for example so now you can see we've got a nice scale between our mobile smaller and our desktop larger setup. And again, if you want to change any of the scales that are

being used inside here, you absolutely can do. So if you want to have a bigger gap between your mobile version and your desktop version, increase inside here and you can see you get larger gaps in between right the way up to these kind of major seven. And if you want to go above that, you can create something custom. Let's put that back though to something a bit more manageable.

This perfect force is probably looking pretty good. And we have the basics in place. Let's

confirm them, and there's our six headings created.

So now if we come and take a look at our variables, we've got our headings, tells us there's a scale, so we're using the internal functions inside Bricks, tells us we've got six, and there's our H6 through to H1.

And even though it was using the pixel values, you can see it's upgraded now to clamp and calc.

So we've got fluid typography, so we don't see those horrible jumps between the different breakpoints.

We have a nice smooth transition between the smaller and the larger as we grow or shrink on our preview.

Now speaking of our previews, You can open up the canvas preview if you want to inside here.

And you can easily see how this is going to look like.

So pretty cool.

We can do all that.

So let's go back now into our typography.

And let's create a new scale.

And this is going to be for our normal body text.

So like we've done before, let's come over into create a new scale.

Change this from typography.

Change it to text.

Click on create.

And there we go.

We've got the basic setup.

Now I like working with the scale type of t-shirts.

2XS or extra small, small, medium, large, and so on. It's kind of easy to relate to those particular values. Baseline step, your medium is basically what it's going to take the 16 and the 20 from.

values. Baseline step, your medium is basically what it's going to take the 16 and the 20 from.

Generally, that's probably what I would recommend doing. But if you're moving over from another framework that maybe uses the small or the large or something different, a different naming convention, you can control that baseline from here. It's very easy. I'm going to leave it set to medium. That's what I'm comfortable and used to. Again, you can change your minimum and your

to medium. That's what I'm comfortable and used to. Again, you can change your minimum and your maximum from here as well. So I would recommend taking a look at the font or typography you're going to be using. Some fonts are just generally a little smaller. For example, I tend to use Barlow a lot in my designs, and that's quite a small font in comparison to things like Arial, Tahoe, and

those kinds of things. So you may want to change this size to something like 18, and then maybe something like 22 for the desktop. As you can see, that makes a difference here. I'm not going to set any fonts up for this particular framework. So let's just put those back to the arbitrary values.

But again, as always, you set up what works for you in your particular framework.

And again, like you said before, all we need to do now is click on generate variables and we have confirmation and there's seven variables added. So now we've got everything we need. If you want to add more, you can easily add more. So let's say we want to go up to something like 4XL. We'll just

click the plus a couple of times. That will automatically add those extra variables in, hit generate variables, click OK, and it says nine have been added.

Now, it's not nine on top of the seven.

It will basically replace the original seven with the nine that we have in place now.

So don't worry about ending up with tons of variables that are kind of overlapping.

It won't happen.

Then if you want to create utility classes, you can do that inside here.

I don't tend to use utility classes very often, but if you want to, you can create them and you can set them up for your typography, your spacing, and so on.

I've already covered that in detail in the dedicated videos.

Check those out with the playlist down below.

So we'll say we're happy with everything here.

We'll hit save to confirm, make sure we're happy with it.

And then we're going to come out of this, and we're going to go back into our theme style.

And now we're going to map things out here.

Because at the moment, we don't have any connection between the typography we set up inside our CSS classes and variables and what we have inside our theme style.

So let's rectify that.

This time, let's come into typography.

Let's jump this up until we get to the body section.

And inside here, let's click.

And as you can see, it set an arbitrary value of 15 pixels for the font size.

So that will always be 15 pixels, not what we want in a fluid design.

So let's click on the variables option.

Let's open up our text.

Inside there, let's set our baseline, which is medium.

And now you can see that immediately updates to show us what we've set up here for our font sizes.

So we're going to do the same thing now for our headings.

You can see underneath, we've got our heading 1, 2, 3, 4, and so on.

So let's just map those.

So open this up, choose our font size.

Minimize this and go to our headings and choose H1.

And you can see immediately our H1 updates on screen.

So we do the same thing now for our H2.

Set our font size, choose our variable for H2.

And now that updates accordingly.

Now I'm going to do the rest of these.

I'm not going to show you because it's exactly the same.

I'll bore you just doing the same thing.

Okay, so there's all our scales set up now.

So we've got our heading 1 through 6.

We've got our body type all set up with the fluid typography.

We'll come back and deal with spacing a little later.

Let's get the basics in place, and then we'll take a look at how we create some custom definitions for variables and classes and so on.

Now, if you're getting value from this video and you'd like to be notified when more content like this is added, why not go down there and hit that subscribe button?

While you're down there, why not give it a thumbs up too to tell YouTube you're enjoying this content?

However, if you're not enjoying it, hit the thumbs down button twice, as that seems to work pretty well too.

Anyway, let's get back on with creating our CSS framework.

And now let's move on to our spacing options.

Before we do, let's hit that Save to confirm and come into spacing.

So inside here, we've got our spacing setup.

So exactly the same as we've seen with the typography.

If we choose a name, spacing is perfectly fine for this example.

Hit Create, and we've got basically exactly the same down the left-hand side here.

And as you can see, we've got our visual representation.

You want to override any of these values and put manual values in yourself.

You can do by clicking this little toggle, insert the values you want inside here.

We're going to leave the minimum and maximum setup as they are here.

I might increase this a little bit.

Sometimes I want to have a bigger gap, but it's entirely up to you.

In this case, let's just leave it where it is.

And again, like we've seen before, we can say let's generate those variables, confirm.

And there's our seven variables created.

Want to add more in? Not a problem at all.

We'll add a couple more inside here.

So we've got to 4XL, generate those variables, confirm.

And there's nine now.

Now, utility classes can be useful here when it comes to spacing.

we will take a quick look at how you create those utility classes, and then it's up to you if you want to use them.

But let's say we wanted to create a utility class just to handle something like your padding.

Well, what we can do is we can click on the plus, and we give this a name.

So we'll just call this padding.

We put a dash, and we'll put the little wildcard in, which is the star.

And then we say what CSS property we want to associate.

So we'll just say in this example padding.

This will affect all four sides at the same time.

So if you only want this to affect top, bottom, left, right, whatever you want, you'd have to put inside there, for example, padding-left, padding-right, and so on.

So it's a little bit time consuming, but with a CSS framework like this, once you've got it set up and customized the way you want, you can easily either create a blueprint website with it all in place or export the relevant files and then import those into a new project as you are ready to do so.

So, okay, so what does this padding- sort of wildcard do?

What it does is the little wildcard looks at the spacing we've got above from 2XS to 4XL, and it will basically do padding-2XS, 2XL, so on and so forth.

You'll see now once we kind of create this, let's say generate those utility classes, and we've got nine classes created, nine being exactly what we have here with our normal variables.

So now we've got these new classes.

So let's jump over into our classes.

Inside there, you can see there's our spacing, a scale again.

There's our padding 2XS, XS, small, medium, large, and so on.

So these are now referencing the variables we've just created for our spacing.

So that's what we're kind of doing there.

Let me just demonstrate how this works so you can kind of understand what I'm talking about a bit better.

Again, let's save this.

Let's come back out of here.

Let's select this image.

Let's come over to our classes.

And inside there, let's open up our spacing.

And you can see as we do that, we scroll over, you can see the spacing being applied to it.

And those spacing classes are referencing the variables.

So if we change the scale inside our variables and update it, then anything that references that using these kind of CSS utility classes will automatically change accordingly.

This is one of the benefits of using something like a CSS framework to easily have one source of truth you can update in one central location and have all those changes cascade through your entire design.

Such a good way of working.

So now we've got some basics in place.

Let's again go back into our theme style because we want to configure a few things here as well.

So let's come into our theme styles, open up our elements, and inside our elements is basically all the different elements we can control inside Bricks.

So your sections, containers, blocks, divs, all those kinds of things, your buttons, carousels, all those kind of cool things.

So whatever you set up inside your framework that you want to apply globally, you want to set those up inside your elements.

So for example, let's come into our container.

So let's say we want to apply some margins or padding and things inside.

So every time we add a new container in, we also have that padding in place.

So let's come down to our padding.

Let's link the opposite sides, click our variables, and this is where we start to benefit from the variables we've created.

So there's our spacing.

Let's open this up, and let's say top and bottom, we want to have medium spacing.

Then let's say on the left and right, we want to have just a little bit of spacing on there, so maybe extra small, so then we don't automatically butt up against the edge of our screen.

So now whenever we add in a new section with a container inside it, it will automatically pick up the margins or padding or whatever values we've configured inside here.

It's really, really useful.

And again, you can do exactly the same thing here for things like your section.

So if we open this up, you can see inside here we've got width, minimum width, column gaps, row gaps, and so on, including margin, paddings, et cetera, et cetera.

Now let's take a look at expanding upon this and how you could do this.

And if you're not comfortable understanding how a lot of this works, how you could easily utilize something like Claude or ChatGPT, and you could use a free account or you could use online tools to handle this.

So let's say, for example, you want to create a multi-column layout using CSS Grid.

So you can see if we take a look at this image section, we've got a container, and inside there we've got an image wrapper with four images.

And currently they're just stacked on top of each other, no spaces or anything set there.

So let's address that.

Let's choose our image wrapper, come out to our content, and set this to be grid.

And you see now we switch into grid mode, but nothing has really changed.

So let's say we want to grab a gap value.

So we're going to use our spacing inside here.

So we'll go to medium.

And now we've set up some spacing.

But obviously, we've got no way of applying any kind of variables to the grid template columns to set how many we want inside here.

So let's use something like chat GPT for this particular example.

But you could use Claude, AI, anything like that whatsoever.

It doesn't really matter.

Even online tools will do the same thing.

So we're going to ask it exactly what we want.

So we just want to create a simple grid layout using variables, nothing more.

So what we need to do now is simply copy that information, head back into Bricks, back into your styles, and this time open up the framework options.

Inside there, we're going to paste that in, clean up any extra spaces that are not needed, pass that CSS, then go a bit weird, so we go into variables and we'll just paste that back in.

And you say, do you want to give it a prefix?

In this example, I don't want to.

Category, let's expand this out.

And you can see we've got headings, text, and so on.

Let's create a new one.

We'll call this CSS Grid.

And make sure that when you click the plus, you also check this little box, which I would prefer to see enabled by default because a number of times I accidentally forget to check that and I just add in the names and don't add in the values.

I won't even go there.

But let's just say add to variable manager.

Six variables have been created.

hit save, come back into our variables and inside there you can see there's our CSS grid, there's our columns 1 through 8 and now we can start to utilize those. So let's just save this, come back into our design choose our image wrapper and this time grid template columns, click our variables, minimize our spacing, there's our CSS grid, expand that and say we want 4 columns and we now have 4 columns

in place using CSS grid. Want to change that to something else? Not a problem change it to something like three, for example, and you now have three columns.

It's very, very simple.

And again, any way you want to use these, you can simply create them as you see fit and as you need them.

Same thing kind of goes then if you want to create things like rounded corners and so on.

You can easily do the same thing.

Go into something like ChatGPT, tell it what you want, get those definitions, and apply it.

Let me show you.

I've already done the sort of creation side of things.

Let me just show you again how we can easily do this.

So come back in, go into our framework, paste in our values, pass the CSS, go into variables.

This is kind of annoying.

You've got to do this, but there we go.

It is where it is.

Again, what we're going to do is we're going to create a new category here.

So we're going to call this corner radius, hit the plus, check the box, add to variable manager.

There we go.

All created.

Hit save.

And now we've got those.

So we can easily come in now to one of our images, for example, go into our styles.

And inside there, we can come into our border.

open these up, connect the corners, choose our variables, close our CSS grid, go to corner radius and now we can easily add in corner radius inside here. So now you can see there's our corner radius being added in. It really is simple and straightforward. And then for example, we've got our button shirt, we've got our spaces there. Well, let's go and address that. We'll come to our button

section, come to our primary button wrapper, come to our content, come to our column gap, open our variables up, choose our spacing. Set it to medium, for example, and now we've got medium spacing.

Do the same thing here as well. There we go. So we're easily adding in spacing in. Same thing goes if we want to come in here. We can come to our container, open our row gap up, add some spacing in there. So you can see how easy it is now by applying that CSS framework. We created something

in there. So you can see how easy it is now by applying that CSS framework. We created something very, very simple. So that's really super useful. Then if you want to create things like your line spacing. So at the moment, everything kind of butts up a little bit weird. So what we're going to do is

spacing. So at the moment, everything kind of butts up a little bit weird. So what we're going to do is we're going to come into our styles, come into our variables, and we can create some more variables. Let's just close this preview down, create a new variable, line height small s, put a value of 1 inside there, save it. Line height m 1.2. So there's our line heights. Again, we can organize

1.2. So there's our line heights. Again, we can organize these, so we can select these, and we can easily come in and categorize them.

Select a category. We don't have one here, so we need to create one.

So let's create a new category. Line heights, for example.

And hit create. Go to uncategorized. There's our uncategorized ones.

Select them. Categorize them. Choose our

line heights on the list. Update.

There we go. There's our line heights inserted in there. So we'll hit save on here.

Come into our theme style.

Open up our typography settings. And inside there, we're going to say all headings, for example, you could set up what you wanted a line height here. So if you wanted a kind of global catch-all, hit your variables. There's our line heights.

You say medium. So they all now share exactly the same line height. Obviously, if you want to change that, you absolutely can do. But you can see how you can easily create your own variable scales.

You can use something like ChatGPT, Claude, anything like that to help you anywhere that you're not comfortable, and you can build and expand upon what I've covered in this particular video.

So far you could go with this. We've literally just scratched the surface, but it's very, very simple and straightforward. You repeat the same procedure, build out your overall CSS framework, and then once you're happy with it, you can either create that blueprint, or you can simply come in and export. So for example, if we come into our classes, you see there's the option here to import

and export. So for example, if we come into our classes, you see there's the option here to import and export. Simply choose to export it. Same thing then for your variables. Just choose to export your

and export. Simply choose to export it. Same thing then for your variables. Just choose to export your variables. You're basically done. Finally, you probably want to come into your theme style and

variables. You're basically done. Finally, you probably want to come into your theme style and inside here, you can export your theme style as well. So you can see there's your import and export theme styles. So you can do that as well. So three simple files you could then import into any new

theme styles. So you can do that as well. So three simple files you could then import into any new project and you are pretty much done. So hopefully this has demonstrated now how easy it is to be able to go through, create your own CSS framework, utilize the built-in tools inside Bricks 2.2 for things like your spacing, typography, colours, and so on. And if you want to go further and you're

comfortable, you can easily come into something like ChatGPT, Claude, use the free options, create, and keep it simple. Start off with just like one simple thing. Ask it to do your border radius. Ask it to do your columns. If you want to do column spans and row spans for your CSS grid,

radius. Ask it to do your columns. If you want to do column spans and row spans for your CSS grid, ask it to do that one piece at a time. Don't get bogged down by trying to get it to create the entire thing in one go and not understand what's going on. Ask it to comment on everything that's doing when it outputs the value so you understand what's going on with any of the content that's

being output by these AI tools. So many different ways in which you could handle this process.

And hopefully this video is demonstrated. It's not as complicated as you may first think it is.

As always, all applicable links for everything I've covered in this video are in the description down below. My name is Paul C. This is WPTuts. And until next time, take care.