CSS Variables
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.
Create Custom Fluid Scales within the Variable Manager
Creating static and clamp values in the Variable Manager is already convenient, but what if I told you that you could generate an entire scale with just a click? That's exactly what this feature does! You can create custom fluid scales for any category - spacing, typography, sizes, or more. Adjust the number of variables to suit your needs, rename any variable, and customize the multiplier for each step. This scale generator is one of the most powerful tools on the market, yet it is super easy to use!
Extract Variables as Global Variables
Extract all CSS variables from your Custom CSS code and generate core Global CSS Variables with a single click! This feature is especially handy when using an external framework, allowing you to integrate builder functions like the Variable Picker for a more streamlined workflow.
Variable Manager
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!
Import your own CSS Variable Framework
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.
Variable Picker
This one is amazing! Now you don't have to memorize all your variables! Instead, simply open a convenient modal displaying your CSS variables, select the most suitable one, and let the plugin set the field automatically or copy the selection to your clipboard.
Variable Preview on hover
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!
Autocomplete your CSS Variables
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.
Preview your CSS Variables from the suggestion dropdown
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.