Add CSS variables (custom properties)

[iamvdo]

Hey,
Instead of using classes, it will be better to use CSS variables, like so:

:root{
     var-bg-aqua:  #7FDBFF;
     var-bg-blue:  #0074D9;
}

Maybe it will be cool to add for progressive enhancement ?

[gustavohenke]

How to deal with browsers that don't implement it yet?

[ilanbiala]

there's always the sass/less files if someone wants to use variables.

[ianstormtaylor]

+1 kinda. i was hoping this repo was literally just a .css file with the color variables exposed in the :root like so:

:root {
  var-aqua: #7FDBFF;
  var-blue: #0074D9;
  ...
}

and that's it. then we could just use them wherever we want in css without having to add classes to things. and if you wanted browser support you could use rework or myth

and you could expose the same thing in sass/less variables if you wanted too. not having the pre-definied classes is a bonus imo.

let me know if you don't want this change, i'll make a separate repo with just simple color definitions

[ilanbiala]

You can always make a separate branch that can be developed independently and merged later when CSS variables has more support, right now I think no browser supports it without enabling a flag/lab/experiment.

[mrmrs]

Thanks for flagging this @iamvdo, I've added a separate source folder that allows for css variable usage and compilation with myth via a gulp task.

@ianstormtaylor - appreciate the sentiment but the predefined classes are a big part of why I put this together. I find I'm able to prototype much more quickly when I only have to do work in html. Tacking classes on things doesn't seem that hard to me. Plus, single purpose classes have the added benefit of rendering very quickly, thus improving performance in both css download time and page rendering time.

So, seems like a win win to me for the problems I am trying to solve. It's obviously a crazy small code base so if they truly are a bane to people - I think they are pretty easy to either not use, or just delete.

[sandrosc]

Since CSS variables have gained a lot of support in the meantime, please consider adding them to colors.css.
Example:

* {
    --navy: #001F3F;
    --blue: #0074D9;
    --aqua: #7FDBFF;
    --teal: #39CCCC;
    --olive: #3D9970;
    --green: #2ECC40;
    --lime: #01FF70;
    --yellow: #FFDC00;
    --orange: #FF851B;
    --red: #FF4136;
    --fuchsia: #F012BE;
    --purple: #B10DC9;
    --maroon: #85144B;
    --white: #FFFFFF;
    --silver: #DDDDDD;
    --gray: #AAAAAA;
    --black: #111111;
}

[KyleMit]

CSS Custom Properties / Variables are all but supported, excepting IE11. My guess is that many of the use cases for this repo are just putting code pens together so the colors aren't screaming at you, and not really sending to production (or if you are, putting in the appropriate pre-processors into your build steps).

Not sure how the changes would exist alongside the class definitions, but this was definitely my intended use when looking at the project

CanIUse - CSS Variables