SOLVED: Custom CSS variable with xxxx not accepted

Bugs
1

In Bricks Custom CSS, any variable that contains xxxx is not accepted, although fewer x’s are accepted.

Use case: I’m setting up a series of default text size variables like this:

:root,
* {
  --text-unit: 1rem;
  --text-scale-ratio: 1.2;
  --text-xs: calc(var(--text-sm) / var(--text-scale-ratio));
  --text-sm: calc(var(--text-md) / var(--text-scale-ratio));
  --text-md: var(--text-unit);
  --text-lg: calc(var(--text-md) * var(--text-scale-ratio));
  --text-xl: calc(var(--text-lg) * var(--text-scale-ratio));
  --text-xxl: calc(var(--text-xl) * var(--text-scale-ratio));
  --text-xxxl: calc(var(--text-xxl) * var(--text-scale-ratio));
  --text-xxxxl: calc(var(--text-xxxl) * var(--text-scale-ratio));
}

If I paste the whole code block into Bricks custom CSS area, the block disappears on save. I’ve narrowed it down to the --text-xxxxl variable, and experimentation showed that any variable with xxxx is not accepted.

(By the way, I’d also be interested to know if there’s a more native-to-Bricks way of setting up a series of default font sizes (and/or other size variables), similar to the global color palette.)

1 Like
2

Not native to bricks, but you could use AutomaticCSS for that.

1 Like
3

Thanks! Good to know about, but pricey for needs. I’ll hold out for this idea to hopefully get implemented

4

Interesting bug/quirk.

Easy way around it… use --text-xl, --text-2xl, --text-3xl, --text-4xl, etc

“if there’s a more native-to-Bricks way of setting up a series of default font sizes (and/or other size variables)” - i use CoreFramework for this, even the free version gives you the UI for setting up all the global variables for text sides, spacing, colors and can output as CSS if you don’t want to leave the plugin installed.

2 Likes
5

good idea, thanks

awesome, I’ll look into that, thank you!

6

Hi @paulrudy,

Welcome to the forum :slight_smile:

Yup you’re right, I was able to reproduce this as well. I have added this to our internal bugs tracker :beetle:

1 Like
7

Try Bricksforge, it’s great for CSS variables. You can save variable templates.

After saving your template it will automatically give you tabs for text, colours etc. for quicker access.

2 Likes
8

Wow, that looks fantastic. Offers CSS variables, but with a bunch of other functionality that would permit me not to have to add other plugins. The animation and form extension stuff in particular. Thank you

1 Like
9

No problem. I’d say it’s the best bricks plugin out at the moment.

10

AutomaticCSS gives you so much more. I think in V3.0 coming soon it will be much more integrated into Bricks. You could also take a look at https://advancedthemer.com as well.

11

Well, I just bought a lifetime code for Bricksforge, so I think I’ll stick with that for now. Out of curiosity, can you explain what more AutomaticCSS offers?

13

Started a new topic for the plugins/frameworks discussion

14

You can take a look at the feature list here https://automaticcss.com/

15

Hi guys,
We’ve fixed this issue in Bricks 1.9.3, now available as a one-click update in your WordPress Dashboard.

Changelog: Changelog – Bricks

Please let us know if you are still experiencing issues.

Best regards,
timmse

1 Like