Many community members asked me how to import a utility-class framework inside Bricks and leverage the Bricks functionalities (class suggestion inside the global class dropdown).
It’s actually quite basic to do thanks to the Class Importer feature of Advanced Themer.
In this article, I’ll show how to import the Chota framework – which is a free, opensource & lightweight CSS utility class framework that has been decently popular over the recent years. But once you understand the basics, you can basically use the same steps for any other framework.
Download the Chota files
First of all, let’s navigate to the Chota website and download the .zip file that contains all the css variables and utility classes that we want to import:
Import the CSS variables in Bricks
Unzip the .zip file and open the chota.min.css that is located in chota-main > dist:
Locate where the css variables are declared:
Import the color variables using the Color Manager of AT:
Click on the Import Colors button:
IMPORTANT: the script will automatically lowercase the variable name, but for some reason, Chota uses uppercase for color-lightGrey and color-darkGrey. Make sure to rename the variables accordingly.
Let’s now import the other variables in side the Variable Manager of AT. Paste the variables in the Import CSS variables textarea
… and click on Import Variables:
Remove the CSS variables and enqueue the CSS file
Now that all our CSS variables are correctly declared inside Bricks, we can safely remove the corresponding variables from our CSS file and save it:
Now let’s open the Theme settings of Advanced Themer and go to CSS Classes > Class Importer. Click on Add a new CSS file and fill all the required fields:
Make sure to save the settings and open the builder:
you should now see all your utility classes available inside the builder, ready to be used as normal global classes!