Utopia is a great resource to generate fluid scales for both spacing and typography. But how can you easily import the generated variables inside Bricks?
Let’s dive in together!
Spacing
First of all, go to the fluid space calculator and generate the scale that fits your needs:
Once done, go to the bottom of the same page and copy the generated variables to your clipboard:
Now let’s come back to the Bricks builder and open the CSS Variable Manager from Advanced Themer.
Create a spacing category and click on the import CSS variables icon – it will open a textarea field where you can paste the variables from Utopia:
Click on the Import Variables button. All the clamp variables should now be imported as Bricks variables and ready to be used:
Typography
Let’s do the same with the typography scale. Go to the fluid type scale generator and set the values that fit your needs:
Once you’re happy with your custom scale, copy the generated variables to your clipboard:
Open the Bricks builder and create a new typography category inside the CSS Variable Manager of Advanced Themer. Click on the import CSS variables icon, and paste the variables inside the textarea control:
Simply click on the Import Variables button, and all your typography variables should be imported and good to go:
