Consistent spacing with variables

During the last few days I tried to figure out a workflow/system I can use with Cwicly to make my sites consistent and also improve the building process. With inspiration from Finsweet (Client-First Style System for Webflow by Finsweet) I came up with the following Idea and am wondering what you think about it and whether this is a good idea.

I defined values for all the spacing from xxs to 3xl like this:

:root {
--var-space-xxs: 0.25rem;
--var-space-xs: 0.5rem;
--var-space-s: 1rem;
--var-space-r: 1.5rem;

Then I go to the global classes and define values for padding and margin for all four sides.
For padding top I use this:

.p-start-xxs {
padding-top: var(--var-space-xxs);
.p-start-xs {
padding-top: var(--var-space-xs);

So when I want my container to have some padding I give it the global class of “.p-all-xs” (“all” would be for all sides). If it should have a large bottom margin I would also give it this class “.m-end-2xl”.

What I like about this approach is that I can define responsive values for all spacing steps. For example the spacing 3xl is on desktop 4rem and on mobiles 2.5rem. Meaning the spacing is everywhere and on all devices the same.

The obvious problem is the amount of global classes.

Maybe it would be an option to have a section in Cwicly where we can define various custom variables (eg for spacing) and select them here:

Then there wouldn’t be the need to define countless global classes. Because typing them out all the time is not an option.

What do you think about this?
I’m not sure if I thought this all the wy through. Maybe I’m just lost in the endless quest of workflow optimization :smiley:

In the spacing section of the inspector there could be a button “Variable”. When clicked the input fields change to a select field where the desired variable can be selected.


1 Like

I use a similar approach, but instead of using global classes, I use virtual classes. I also define my variables and classes in the stylesheet, and then import them as virtual classes so they show up in the virtual class dropdown. This is because I like to separate utility classes (which I don’t edit) from global classes (which I might edit or adjust later), and from a quick look, I know that the green one is a global class, but the pink one (or any other color you define) is a utility class.

However, I have the same problem that if there are many classes in the dropdown, you either have to scroll to find the correct class or type in field and then select the class. Sometimes that feels slow, and I hope that in the future, there will be an option to define global variables in the settings and then use them across the website for any spacing, like padding, margin, gap, etc., with a single click.

1 Like

Thanks for sharing how you work with it!

May I ask how you import virtual classes?

Btw I really like the Idea to define the classes in the stylesheet. But since there are a lot of options I thought I try to tell ChatGPT what needs to be done. And it worked beautifully, just took about 5 minutes and I had the padding and margin classes for all sizes and sides – incredible!

Go to Global classes&Global stylesheets, then under External classes tab, create folder, for example, “Utility classes”, and then click on the second icon to import, see image below:

You can paste classes, separated by comma, or just paste full utility classes css file content and it will pick classes on its own from css file

After doing so, all imported classes will be available under Virtual classes dropdown.


ChatGPT is exactly what I did to create all my utility classes. I showed example in promt and said to carry on with margin, padding, gaps, etc

1 Like

That’s great, thanks a lot! Will do it just like that.

Your thought process is in the right direction. However, I would further cut down on your explicitly defined variables (0.25rem, etc.) and instead streamline it with clamp functions so it will work on all breakpoints without having to define for each individual breakpoint/media query.

I believe tailwind, bootstrap and others use a similar approach of fluid spacing so you might want to peek at their code and tweak it to suit your needs.

1 Like

This was for an Oxygen site, but here’s how I use Utopia and Tailwind to create my own framework:

Both configs are linked in the CSS comments as well :slight_smile:


Thats awesome! Thanks to both of you @penatech and @sunny!

Up until now I built without any framework or system so have to figure out the best and most efficient way to move forward. Your remarks were very helpful!

Also the size of your linked framework is incredible!

1 Like

Great help! And got it, played around a bit with it. The disadvantage I see with that class approach, is, that changes by classes added to a block are not shown within the editor. Or do I miss some setting or line of code, so that the editor does show these effects?

1 Like

Yeah, once you play around with the Utopia and Tailwind configs a bit, you’ll see that it’s very customizable - and better yet - you don’t have to rely on any third-party plugins for your framework.

As for the editor, if you just paste it in a new Global Stylesheet in Cwicly you should see all the styling reflected in the editor.

Don’t forget to paste the CSS into your External Classes too, so you can access all class names when adding virtual classes to a block (you might just have to clean up a couple of the classes it imports).

1 Like

Adding the css as global stylesheet too did the trick, many thanks. I think for a better handling when selecting the virtuell classes, it is helpful to create different folders for different types of external classes, e.g. fonts for typography classes, margin for margin classes etc. . As for now it is not possible to preselect a folder and search/ scroll only within a specific folder, this could be done via searching for e.g. “fonts h2” if one have named the folder for typo setting fonts, and it works. This way avoids the need to deal with endless scrolling

Personally I just have it all in one “framework” folder. Now that I’ve used it a few times, I usually know what words to start searching for as opposed to scrolling through the entire list of classes.