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
    8 Feb, 2020 06:20pm

    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
    7 Nov, 2018 12:38am

    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
    3 Mar, 2018 12:48am

    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
    18 Sep, 2017 07:01am

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

  • Forrest O commented
    16 Mar, 2017 12:31pm

    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 commented
    6 Feb, 2017 10:31pm

    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
    19 Jan, 2017 03:53pm

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

  • Jaro Quastenberg commented
    19 Jan, 2017 11:10am

    i am waiting so long for this.. !

  • Oliver Curting commented
    18 Jan, 2017 08:28pm

    I find this really important. 

  • +44