The EASIEST Way to Get Started With Components in Bricks

Bricks now has component functionality.

The problem is a lot of people don’t know why components are important and don’t know how they work.

So to give you an example, I wanna help you get started with components.

We are going to look at probably the most basic and obvious and important component on any website, which is a button component.

So as you can see here, I have a bunch of buttons.

And I want you to imagine that these buttons are spread out all over the website because buttons are one of those things where there’s going to be dozens and dozens, if not hundreds of instances of them throughout a website, right?

So what I’m gonna do is I’m gonna leave this alone for right now.

I’m gonna create a new section below.

I’m gonna copy that button and paste it here.

But for these buttons, I’m going to turn them in to components.

So I’m gonna right click and I am going to say, create component.

And we are going to just call it a button.

We don’t even need it, have a category or description right now.

Just turn it into a component.

And then what we have to do is we have to map this text right here, this label to a field, okay?

Or what Bricks calls a property.

And so in order to do that, we’re just gonna create a property.

It’s text.

So we’re gonna choose text.

So we’re gonna choose text.

We’re gonna call it button label because that’s what it is.

It’s the label for the button.

And then I’m gonna give it default text, which says, is a component.

So we have not a component and we have is a component.

And I’m gonna go ahead and create.

Now I’ve created that property, but I need to connect it to the button.

Okay.

I’ve essentially created this property that lives over here.

And I have my button that lives over here.

I got to connect or at least tell Bricks where this button label lives in terms of this component right here.

So what I’m gonna do to do this is I’m gonna edit the component where you would normally type in text, right?

You can remove this and it’s kind of like a dynamic data situation where instead of clicking the lightning bolt and bringing in dynamic data, I’m going to click this plus sign and just bring in the property data.

Okay.

So button label, you can see the button now says is a component.

Now what I’m free to do, I’m just gonna go ahead and save my work.

Now what I’m free to do is use this component wherever I want.

So just like these buttons were used all throughout the website, I’m gonna use these buttons all throughout the website.

Let me switch this to wrap and flex.

Okay.

I just want the same number of buttons.

So now we have two different situations.

Website A up here where we used all these buttons, but they’re not components.

And then website B where we componentized our button before we used it all.

So now let’s see what the difference is up here.

What I’m going to do, cause what I’m tasked with my client came back to me or the designer came back to me and said, you know what?

Actually we decided all buttons now need a icon.

And in fact, we’re going to have some buttons have certain icons and other buttons are going to have other icons, but they all need to support having an icon.

And maybe some of them need to support not having an icon.

Okay.

Well, let’s just take a look at what does it take to add an icon in website A, this first section up here.

I’m going to click on the button.

Bricks, thankfully allows you to easily add an icon to a button.

So I’m just going to come down here.

I’m going to go to SVG and I’m going to select a right bracket.

Okay.

And I’m going to go ahead and insert here and it inserts it.

Now I have to do a little styling cause it’s black.

So I’m going to come down here to root.

I’m actually going to target the SVG.

I’m going to say color is current color.

Okay.

Uh, that should be lowercase right there.

So color is current color.

I’m just going to copy that to my clipboard cause I’m going to need it again.

Okay.

Look what has happened up here.

I have now added an icon to a single button.

The problem is, as you can see, none of the other buttons on the website know that they’re supposed to have this icon also.

Okay.

Let me go down to website number B where we created a component.

I’m going to edit the component, not even worried about properties or anything like that.

I’m just going to edit the component itself because these are things that will globally apply to every other instance of the button.

So I’m going to come down here and I’m going to, I’m going to select the same exact icon.

Okay.

So we’re going to do this right angle right here.

And then I’m going to do the exact same SVG current color.

And you can see a huge difference right out of the gate is that every button I’ve used throughout this website now has an arrow.

Okay.

Now that is something that is HTML driven.

I have put an SVG element inside.

Technically you could maybe do this with CSS.

Okay.

It would not be the best way to do it.

Um, it would, this is the best way to do it.

Now you have components.

This is the best way to handle something like this.

So now the differences, cause that’s kind of the same as like a global button element.

But remember, we don’t want all of our buttons to say is a component, is a component, is a component, is a component, which would happen with just the old kind of global elements kind of thing.

Um, or the template, which is the wrong term for what this thing actually is.

The button label area of these elements now, which is that property I created is what allows me to have instance level control over the label of each button.

So I can say button one, notice none of them else.

None of the others change, right?

I can grab this one and I can say button two and I can grab this one and say button three.

So the label is completely independent from the style and from the HTML architecture.

Because the other thing I can do, uh, is again, I can come in here and again, you could do this with CSS, but this is just a demonstration, okay, of how the component is taking over to actually do this.

But I can edit the component.

I can come down to, uh, the content area and I can say position left.

And now all the icons shift over to the left.

Can you do that with the CSS order property?

Yes.

But there are a lot of things when you get into, um, other kinds of components.

Okay.

Here’s another one.

You can’t really do a CSS unless you’re trying to overwrite all of your stuff that you’ve already done.

I use the primary button style on this button, but what if I want all of these buttons on my website to be outlined?

Well, I can override the CSS for my primary button style and make them all outlined, or I can just come in here and I can tick the box for outline.

And now they’re all outlines and it saves me a tremendous amount of time and work, right?

And I’m not having to override my primary button style.

I’m just saying, no, actually those were all supposed to be outlined variants.

Instead of the normal primary variant.

Hey, components fixes that for me where with CSS, that would get really, really, really messy.

I would have to go and add a button outline class to all my existing buttons or whatever.

With the component I’m saved.

Now, the final thing to think about, but the thing we can’t yet do that Bricks needs to add ASAP is component variants.

So remember we said, Hey, sometimes a button needs to have an icon.

Sometimes it needs to have an icon on the left or an icon on the right.

Sometimes it needs to have a different icon.

Sometimes it needs to be outline variant versus not outline variant.

This can all live in the same exact component using something called component variants.

So when you add a button, it would actually be much like this drop down that you get right here where you’re choosing a style.

You’re choosing a size.

You’re choosing whether it’s outline or not outline.

You would have a bunch of different variant options to choose from.

And you could say, Oh, I want the Facebook icon button, or I want the Instagram icon button, or I want the check mark icon button.

And they’re just nice little property kind of drop downs that you can choose right here on an instance level basis.

So on each instance, and I’ll just go back and show you like right here where it says properties, where I can change the label of this one instance.

I would also be able to choose a variant style of that instance.

And this is not just CSS.

This means you have conditional logic with things like does the icon exist or not exist.

And that’s not, is it hidden with CSS or visible with CSS?

It’s literally is the HTML element there or is it gone?

It is, is a text link there or is it gone, right?

Controlling the HTML is the superpower of components, which goes well above and beyond CSS.

Buttons are, I think when you, when you deploy a button on, on your website, that should always be a component.

You should always make a button, a component, and then use the component instances for buttons across a website.

So yes, we will get into cards.

We will get into hero sections.

We will get into headers and footers and how to componentize those.

This is the simplest and easiest thing to start with when it comes to components.

Start with buttons.

They’re not super intricate.

They’re not super detailed in terms of HTML structure or anything like that.

It’s a single atom element in atomic design, understanding the difference between atoms and molecules.

Okay.

And on up the chain, start here, get comfortable here, and then you can start to branch out.

I hope this helps.