Responsive CSS Variables?

Feature Requests / Improvements
1

So my concern is that I’ve built a site using variables, most of them for spacing, gutter, paddings in buttons …

So now I need to go element by element changing the variable for another one (eg --gutter-global-mobile) or manually code the value of the variable in the style.css of theme with a media query.

Do you think is a good idea to have this within the builder or is just me that I wonder easier ways to do?

T

1 Like
2

Hi,

I don’t know if it can help you but I had the same reasoning and here’s the solution I found :

In my child theme, style.css file, in my media queries I redefined my variables like so :

@media (max-width: 1400px) {
    :root #brx-content {
        --padding-inline-large: var(--padding-inline-normal);
        --padding-inline-extra-large: var(--padding-inline-normal);
        --padding-inline-huge: var(--padding-inline-extra-large);
        --gap-extra-large: var(--gap-large);
        --gap-huge: var(--gap-large);
    }
}

kind of “merging” variables into one another. Another possibility is to redefine your variables like so :

@media (max-width: 1400px) {
    :root #brx-content {
        --padding-inline-large: 30px;
        --padding-inline-extra-large: 50px;
    }
}

Maybe you already though of that, but I think it’s an easy way to manage variables.
Happy coding !

2 Likes
3

Thanks,
you’re totally right. My concern is that my challenge was to build a full website without using the style.css and just bricks so I found this thing like incompatible because at the end you need to go to the code (that is not a problem! just a detail that makes me thing about the UX of this feature)

Best way still is to use coded variables in the style css , but then in the editor you need to manually write the variable! unless you use empty values like:

image
image1532×444 22 KB

Happy coding!!

1 Like
4

I think this is a much needed feature. For me one of the key advantages of using CSS variables is that you can change their values with media queries. So you just need to declare the variable once to any element property you want and then modify its value “remotely” and centrally.

So if you have to declare different variables on each element one by one depending on the media query it means makes much less sense to use variables. It mean more work and adding complexity. I’m barely using them on Bricks because of this reason.

2 Likes
5

I also agree on this topic, It would be an awesome feature. I submitted it to the ide board, hopefully it would be there soon.