Use bricks classes on other places/elements outside bricks

Hey there.

I’m new to the bricks community but I love it so far. I’m experimenting with bricks’ classes a little bit but I see no way to use them on other elements like a button in a form created in gutenberg for example. Let me give you a concrete example:

Class 1: “.button”
Class 2: “.button–filled”

The first class does the layout for all my buttons and the second class just sets the additional markup like in this case the background color. If I create these classes with bricks and apply them to the bricks button, everything works fine. If I use the same classes for my button in gutenberg nothing happens because the selectors are “dependent” on the “.brxe-button” class. Is there a special reason for it? Anyway if I add manually the “.brxe-button” class to my button in gutenberg it still doesn’t apply. Is there any other script running?

image

Ok I just found out that I can disable the class chaining which is awesome!

But there’s still the problem, if I use a bricks class on another component that the style of this class isn’t loaded unless there’s another bricks element on the same page with this class.

Yes! Indeed, it won’t work if the global class is not in use on any other element on the same page. In this situation, you will need to add custom CSS, as Bricks global class styling only loads when you apply the global class to the element using the global class field. Otherwise, it won’t work.

That’s unfortunate to be honest… They should make a switcher in the settings which retrieves the classes all over the site so that they can be used…

Just in case someone is trying to achieve this:

Just put a div into your global footer and put all the classes you want to use globally (e.g. in Gutenberg or custom code snippets) on it.

Then hide that div via “display: none; !important”.

Problem solved