Alright, so I need some opinions on something I’m working on.  It’s a JS/CSS/LESS framework that is designed to handle all the colors in a website or web app.

Here’s the repo for the project if you don’t want to bother reading the rest of the post:

https://github.com/vtsells/Spray

And here is a VERY rough demo. Remember, it’s still in alpha:
(enter a selector like h3, choose a spray class, and hit the add button)

This is some of the JS that’s driving the demo.  addDiv fires when the corresponding button is clicked to demo the spray.watchFor() function:

function addDiv() {
    const div = document.createElement("div");
    const p = document.createElement("p");
    p.textContent="Some text";
    div.appendChild(p);
    div.classList.add("some-class");
    div.style.padding = "10px";
    document.querySelector("p").appendChild(div);
}
(() => {

    const spray = new Spray();
    spray.addToSelector("p", "pri");
    spray.watchFor(document.querySelector("p"), [{ ".some-class": "sec" },{ "p": "ter hover" }])
    sprayWidget(spray);
})();

And here are what the classes will look like. All of these colors are based off one LESS color variable:

Why?

In an effort to bolster my portfolio, I decided to pick up a project I started a year or two ago.  When I was first learning the Bootstrap 3 framework, there was something that always nagged me.  I didn’t like that Bootstrap decided what colors I had to use for pretty much everything in my app unless I wanted to override a bunch of things.  While I did find this site that helps tremendously with building a custom-themed Boostrap implementation, it still didn’t give me the control I wanted.

What happens if I sell an app to a customer who wants the color scheme of the app to match their company colors?  Does it make sense to create a new Bootstrap theme entirely?  What if I sold a copy of the app to 10 different people and they all wanted different color schemes?  Is that 10 different themes that I now have to manage and backup?

My Solution:

Enter LESS variables and color functions.  I use LESS for pretty much all of my CSS these days.  Using variables to hold a starting color and then the built-in LESS color functions to manipulate them, it’s super easy to build a simple (or complex) color pallet based off a single color.

This is what I did.  I built some mixins that create a whole bunch of classes that I can use to manage the colors of my apps.  Then, I built a JS script that will add and remove classes to selected elements either on-the-fly or when the document is finished loading.  I think this all counts as a framework, right?

.contrast-text-color(@color) {
  color: contrast(@color, @quaternary, lighten(@primary, 50%), 50%);
}
.color-style-inner(@color) {
  background: @color;
  &.text {
    background: unset;
    color: @color;
  }
  &.hover:hover {
    background: lighten(@color, 15%);
    .contrast-text-color(lighten(@color, 15%));
  }
}
.color-style(@color) {
  .color-style-inner(@color);
  .contrast-text-color(@color);
  &.bordered {
    border: 5px solid darken(@color, 15%);
  }
  &.trans-light {
    .color-style-inner(fade(@color, 90%));
  }
  &.trans {
    .color-style-inner(fade(@color, 60%));
  }
  &.trans-heavy {
    .color-style-inner(fade(@color, 30%));
  }
}

The other advantage of this is that all colors can be completely decoupled from any positioning or typography frameworks that you may be using.

It’s Alpha…

So this is my first foray into the world of developing a JS plugin/framework.  I don’t even know if you can really call it that.  However, it’s an alpha project that I would love to get some feedback on.  Would this be something useful to you?  What features would you like to see?  Is it even a good idea to manage colors this way?  I’m working on a true demo site that will demonstrate things much better in regards to component styling and live color pallet changes but that takes time and I wanted to get this idea out there.