Create and Manage your CSS Variables easily
Bricks responsive settings are mainly based on CSS media-queries. That means that you essentially need to style each element several times based on the device width. What if you could add a unique style to your element, and it would adjust automatically on all devices? That's exactly the purpose of the Fluid variables introduced in Advanced Themer.
Manage your Global & Theme CSS variables easily within the builder. Create static or clamp values on the fly that are reflected inside the builder without the need of refreshing your browser. Create multiple categories, reorder any option, rename, duplicate, delete, etc... Everything is included to keep your CSS variables under control!
With Advanced Themer, you're free to explore beyond fixed variable categories. Go ahead and create your own variables, for any existing CSS property – be it with static or fluid values. Have fun as Advanced Themer comes up with a custom clamp function tailored for all your fluid variables!
You can now easily create custom categories without relying on AT's preset ones. With this new feature, you have the freedom to customize your categories and link them with any variables you're already working with, regardless of their origin, be it from code blocks, child themes, or any other sources. Simply upload a JSON file that includes your organized structure, and voila! All your variables will appear in the Variable Picker for easy access.
We've added a neat little feature called Variable Preview on Hover. This cool trick allows you to easily preview the effects of variables on your fields just by hovering over them - all while the main panel is visible! No more clicks needed to see the changes. It will save you a ton of time!
If you prefer typing instead of selecting options, this alternative to the Variable Picker is perfect for you. Simply begin typing inside any styling field, and a helpful suggestion window will appear with all the matching variables for your convenience.
Effortlessly view your CSS variables within the iframe window by simply hovering over, or navigating through the suggested values in the dropdown menu using the UP and DOWN arrow keys.
If you have ACSS installed, you'll love how simple it is to select and display any CSS variable used by the framework in your fields. No need to worry about trying to remember all the details or resorting to a cheatsheet. Just open up the Variable Picker, click on the new ACSS tab, and effortlessly select the ideal variable for your field. It's incredible how straightforward it is!
Design unique typography scales by selecting a minimum font-size for mobile and a maximum font-size for larger devices. The plugin will create the clamp function for you. Insert the variable into your font-size setting. Voila, all done! No need to care about breakpoints anymore.
Just like with typography, you have the freedom to develop your own unique spacing approach! Our built-in repeater allows you to easily add or subtract any value according to your personal design guide. Although it comes with a default 8-point grid system, you're more than welcome to customize it to suit your needs.
Isn't it frustrating when a beautiful border-radius on desktop gets totally messed up on smaller devices? Worry no more, as fluid border-radius variables have come to your rescue!
Do you often find yourself typing out the same box-shadow values every time you want to style an element? Remembering all those values can be a tedious and frustrating process. However, there's an easy way to improve your workflow and save you ample time with these CSS Variables.
Are you tired of repeatedly typing your border values whenever you need to style an element? It can be a frustrating and time-consuming task to remember all the values. Fortunately, there is a handy solution to improve your workflow.