Help! how to use css variables for size/padding/margin etc

[qiang814k]

i can see some cwicly users(even louis’s video , I remember) are using css variables for size etc…

i working on it for harlf day,
but do not know how to use it by cwicly,
is any brief/guideline on this ?

anyone can help on it? thanks in advance sincerely.

[Marjan]

Hi @qiang814k,

usually, the workflow would be like this:

1. In your global stylesheet (or create one with Cwicly) create a css variable, usually under root selector:

:root {
  --variable-name: variable-value;
}

For sizes and spacing remember to add units to variable-value.

2. In Cwicly’s input field for e.g. padding, margin, width etc. use that variable like so:

var(--variable-name)

and from the units’ dropdown choose the last option of two dashes, although Cwicly does it automatically.

And that’s all!

A good resource to learn about it is W3Schools CSS Variables.

Cheers

[Jonas]

I create my variables for spacing and font sizes here: https://utopia.fyi/

Then I create a global style sheet in Cwicly called “variables”. There I paste the created variables for spacing and font size. Also I will declare other variables I want to use like --canvas-padding or --header-height.

Now you can use the variables but you need to type them out:

[Jonas]

For padding and margin (only for top and bottom) I also create a utility class sheet. This way I can just give a section the class .p-top-2xl for example and don’t have to type the variable out.

.p-top-2xl {
   padding-top: var(--space-2xl);
}

To make the classes available in the Classes selector you can register the used classes as External Classes here:

To import all your classes just press this button and paste the whole style sheet.

A while back I got some great help in this thread:

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-spac…

[JulianM]

Hey guys, your feedback is greatly appreciated, I was about to ask about this when I found this post and the subsequent answers.

Great community,
Thank you so much

[qiang814k]

thanks for your help, @Jonas @Marjan , take a try, seems working very well.