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:
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:
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.
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.
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!
Sure!
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:
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.
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!
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?
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).
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.
