search

taylorbf / Musicians-Toolkit

Interfaces, tuning, and timing for web audio projects
11 stars 2 forks source link

Consider CSS as a styling mechanism #29

Open taylorbf opened 7 years ago

taylorbf commented 7 years ago

Now that this is all SVG/HTML, we have the option of using a CSS file to control interface colors. This could give more flexibility for user customization of the interfaces.

The CSS file might look something like


.mt-dial .bg, 
.mt-slider .bg  
etc...
{
  fill: #eeeeee;
}

.mt-dial .screw,
.mt-dial .handle,
.mt-slider .knob,
.mt-slider .fill,
etc...
{
  fill: #dd1188;
}

An upside is that users could override the CSS for any part of the interface -- i.e. even if we have the slider's knob and fill set to the same color, the user could set them to be 2 different colors.

A downside of this is that users would need to link to both a JS and a CSS file when using the library. But that's not terrible...

jesseallison commented 7 years ago

I like this idea as it is a more web-centric way of styling. Colors make a lot of sense, but this may allow other css intervention as well.

If we're concerned about linking two different files instead of just requiring one, it would be possible to include the styling in one of the js files. A bit less standards based, but functional all the same.

mscottnelson commented 7 years ago

Given that you are moving to SVG rather than canvas, it really makes sense to use CSS.