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.
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!
Create Fluid and Static Variables on the fly
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!
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.
Core Framework Integration
If you are running the Bricks Addon released by the Core Framework team, you'll now see all the variables set in Core inside the Variable Pickr nicely sorted by groups and types.
ACSS Integration
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!
Fluid Typography
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.
Fluid Spacing
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.
Fluid Border-Radius
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!
Fluid Width
Develop your very own responsive width variables! You have complete control to adjust and fine-tune any value with the use of our built-in repeater.
Box-shadow Variables
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.
Border 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.