Make CSS variables defined in Bricksforge globally available (without classes)

Hi, I just purchased Bricksforge, and I’m a bit surprised that CSS variables defined within Bricksforge in the Global Classes are unavailable globally (even though yes, it’s called Global Classes, not Global Classes and Variables).

I’d like to define my Bricks color palette using CSS variables, but since Bricksforge variables aren’t available globally, I have to define those variables in Bricks custom code settings. But this means that I don’t have the advantage of the Bricksforge UI to adjust colors—or typography, etc—and it also means that the code is divided in two places—variables in Bricks custom code, and classes in Bricksforge.

Is there any reason that Bricksforge doesn’t make CSS variables globally available? If not, I’d like to request that feature.

Hey Paul! Welcome! :blush:

Regarding your question: hmm… variables should be available globally after adding them to the code area in the Global Classes area. The generated CSS file will be enqueued everywhere (except of backend). Or do you need those variables in the backend too?

If you talk about frontend: can you confirm that this is no caching problem? :blush:

Will take a deeper look on this when I’m back in the studio tomorrow :+1:

Have a nice one!

Hi Daniele, thank you for your reply!

I’m developing a site locally, and I’m not aware of any plugins or settings that are preventing cacheing. Can you explain more about how I can make sure this isn’t a cache issue? CSS classes from Bricksforge are available in Bricks. It’s just variables definted in Bricksforge that are not available in Bricks.

By backend, I think you mean the Wordpress backend, and by frontend, I think you mean Bricks itself? If so, yes I only need to use the variables in the frontend—in Bricks, for instance, to apply var(--primary-color) defined in Bricksforge to define a color in Bricks’ color palette.

Hey Paul!

Just tried it. I can use the variables without problems in the builder – see the screenshot attached:

When using it with colors, did you click on the “RAW” button? Otherwise, Bricks will not use the variable correctly and no value will be set. Could you re-check that?

1 Like

Hmmm, weird. I did that, and it didn’t seem to work before, but now it does. I did refresh the Bricks browser tab, perhaps that helped.

Great! I’m glad this works!

A couple of further thoughts and questions. I’d like to set one or two Global Class sets that have only variables (no classes), but currently Bricksforge refuses to save these sets until at least one class is included. Is this behavior necessary?

Second and related, it looks like html elements can also be defined in the Global Class sets, but these alone aren’t enough to permit saving the set without a class also defined.

I realize the title of the feature is Global Class sets, but it seems like it would be useful not just to be required to include a class in a set. Curious about your thoughts on this

@Daniele just wanted to follow up on those questions above when you get a chance

Hey! :slight_smile: Hmm…yes. Currently, at least one global class is needed to save the set. It make sense, because it was designed to be a “Global Classes Creator”, as you mentioned. But I think, I have no problems to just check the code editor for input to allow the saving process. This way no classes will be created, but you still can store your variables there.

I consider this for a release I deploy this week :slight_smile:

1 Like

Thank you, I appreciate you considering that option!

1 Like

Included in 2.0.0! :slight_smile:

1 Like

Thank you!