Webflow has color swatches you can make which changes all associated colors with that swatch in the designer. It's definitely helpful but if webflow were to take one more step and implement it into actual CSS style variables on code export, that'd be awesome.
With some code tinkering, they could do something like color swatches in the webflow designer be declared at the top of the CSS styles sheet like:
For something as powerful as Webflow, this is seriously important to have. It helps establish a global design system. I'd love to see this and more. The more variables we can have the better.
Not sure if it's related to this, but for true responsiveness, I'd like to be able to control font size based on element width, as in Flowtype.js: http://simplefocus.com/flowtype/
Webflow has color swatches you can make which changes all associated colors with that swatch in the designer. It's definitely helpful but if webflow were to take one more step and implement it into actual CSS style variables on code export, that'd be awesome.
With some code tinkering, they could do something like color swatches in the webflow designer be declared at the top of the CSS styles sheet like:
:root{ --NameOfTheColorSwatchTheUserCreated: CustomColorUserChose}
.div1 {color: var(--NameOfTheColorSwatchTheUserCreated)}
.div2 {background-color: var(--NameOfTheColorSwatchTheUserCreated)}
Right now, the code is exported as:
.div1 {color: #000}
.div2 {color: #000}
Attachments Open full size
Great idea – Constantly wishing I had variables available for things like box-shadow, typography.
Related:
Global Variables: https://wishlist.webflow.com/ideas/WEBFLOW-I-1379
Symbol Variables: https://wishlist.webflow.com/ideas/WEBFLOW-I-1558
Attachments Open full size
For something as powerful as Webflow, this is seriously important to have. It helps establish a global design system. I'd love to see this and more. The more variables we can have the better.
Attachments Open full size
Using the new -/+class interaction to the body on click might work for this.
Attachments Open full size
I'd like this, and to take it further: UI to warn about any places that I'm not using the spacings that I set up.
Attachments Open full size
Not sure if it's related to this, but for true responsiveness, I'd like to be able to control font size based on element width, as in Flowtype.js: http://simplefocus.com/flowtype/
Attachments Open full size
This would be really cool to have (and really time savvy)! A great feature for those making style guides in Webflow.
Attachments Open full size
i am waiting so long for this.. !
Attachments Open full size
I find this really important.
Attachments Open full size