Merged idea

This idea has been merged into another idea. To comment or vote on this idea, please visit WEBFLOW-I-3368 Global Swatches 2.0 & CSS Variables.

Style Variables Merged

Ability to add a color, size or font variable to make it easier to manage a color scheme, sizing elements or typography

  • Timothy Noah
  • Jan 18 2017
  • Shipped
  • Julian Fung commented
    February 08, 2020 18:20

    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}

  • Tim Daff commented
    November 07, 2018 00:38

    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

  • Sean Sands commented
    March 03, 2018 00:48

    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.

  • Luke Dorny commented
    September 18, 2017 07:01

    Using the new -/+class interaction to the body on click might work for this. 

  • Forrest O commented
    March 16, 2017 12:31

    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.

  • Luca Benazzi commented
    February 06, 2017 22:31

    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/

  • Juan Martín Lusiardo commented
    January 19, 2017 15:53

    This would be really cool to have (and really time savvy)! A great feature for those making style guides in Webflow.

  • Jaro Quastenberg commented
    January 19, 2017 11:10

    i am waiting so long for this.. !

  • Oliver Curting commented
    January 18, 2017 20:28

    I find this really important. 

  • +44