style-js

Comprehensive color manipulation classes.

== Style.js ==

An easy to use JavaScript library providing CSS preprocessing and a myriad of color manipulation functions.

== CSS Preprocessing ==

Style.js allows developers to utilize the full power of JavaScript to generate CSS.

Example:

var color = '#06c';

new Style({ p: { background_color: color.toHSLA(), color: selectForeground(color).toHSLA() }.extend( CSS.borderRadius(Math.floor(Math.random() * 11) + 0) ) });

''Alternative syntax'':

var color = '#06c';

({ p: { background_color: color.toHSLA(), color: selectForeground(color).toHSLA() }.extend( CSS.borderRadius(Math.floor(Math.random() * 11) + 0) ) }.toStyle());

Result:

p {
    background-color: hsla(210, 100%, 40%, 1);
    color: hsla(30, 100%, 85%, 1);
    -webkit-border-radius: 8px;
    -moz-border-radius: 8px;
    border-radius: 8px
}

Any valid JavaScript code should work. It's easy to mix in your own functionality:

// Returns a random color with a high red value, as a hex color code
function getRandomRedColor() {
    // Generate random RGB color
    var out = RGB.random();
// Minimum red value of 180
while (out.red < 180) {
    out = RGB.random();
}

// Convert to HSL color space
out = new HSL(out);

// Adjust the lightness of the color, note: this might reduce the red value
out.lightness = 45;

// Return as hexidecimal
return out.toHex();

}

new Style({ '.randomRed': { background_color: getRandomRedColor(), color: '#fff' } });

Result:

.randomRed {
    background-color: #bd4028;
    color: #fff
}

=== Nested Styles ===

Example:

new Style({
    html: {
        body: {
            header: {
                div: {
                    ul: {
                        li: {
                            p: {
                                color: new RGBA(new Hex('#666')),
                            'a, strong': {
                                font_weight: 'bold'
                            }
                        }
                    }
                }
            }
        },

        footer: {
            'background-color': new HSL(new Hex('#ccc'))
        }
    }
}

});

Result:

html body header div ul li p {
    color: rgba(102, 102, 102, 1)
}

html body header div ul li p a, html body header div ul li p strong { font-weight: bold }

html body footer { background-color: hsl(0, 0%, 80%) }

=== "Mixins" ===

Example:

function myStyle(width, color) {
    width = !width || !Type.isNumber(width) ? 700 : Math.floor(width);
if (!Color.isValid(color)) {
    color = Hex.random();
}

return {
    // Numeric values automatically converted to "px" or the unit set by setDefaultUnit()
    width: width,
    margin: '0 auto',
    text_align: 'left',
    background_color: color.toRGB()
};

}

var pageWidth = 800;

new Style({ body: { text_align: 'center',

    header: {}.extend(
        myStyle(pageWidth, '#06c')
    ),

    div: {}.extend(
        myStyle(pageWidth / 2, '#ccc')
    ),

    footer: {}.extend(
        myStyle(pageWidth / 3, '#f30')
    )
}

});

Result:

body {
    text-align: center
}

body header { width: 800px; margin: 0 auto; text-align: left; background-color: rgb(0, 102, 204) }

body div { width: 400px; margin: 0 auto; text-align: left; background-color: rgb(204, 204, 204) }

body footer { width: 266px; margin: 0 auto; text-align: left; background-color: rgb(255, 51, 0) }

=== Inheritance ===

Example:

// In the beginning, there was nothing
var singularity = {};

var A = { body: { font: "12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif", color: '#000'.toRGB() } };

var B = { header: { h1: { font_size: 24, color: darken(Hex.random(), 0.3) } } };

new Style( singularity.extend(A, B) );

Result:

body {
    font: 12px/14px 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: rgb(0, 0, 0)
}

header h1 { font-size: 24px; color: #206502 }

== Color Functionality ==

Color spaces are interchangeable:

var color = Hex.random();

console.log('INPUT: ' + color.toString());

color = new RGB(color);

console.log(color.toString());

color = new XYZ(color);

// Color spaces NOT supported in CSS have no .toString() method console.log(color);

color = new HSL(color);

console.log(color.toString());

color = new CIELab(color);

console.log(color);

color = new RGBA(color);

console.log(color.toString());

color = new CMYK(color);

console.log(color);

color = new HSLA(color);

console.log(color.toString());

/*

  • NOTE: Due to the precision of the JavaScript number type
  • the output might not be exactly equal to the input
  • e.g. #ff3300 => #fe3300 */ console.log('OUTPUT: ' + color.toHex().toString());

Result:

INPUT: #6cb84b
rgb(108, 184, 75)
XYZ {X: 24.59483120679862, Y: 37.97712451767409, Z: 12.690646072857769}
hsl(102, 43%, 51%)
CIELab {L: 68.00495079484631, a: -43.46726006781837, b: 47.13923110320886}
rgba(108, 184, 75, 1)
CMYK {cyan: 0.4130662167488027, magenta: 0, yellow: 0.5923735991444304, key: 0.2784016469309353}
hsla(102, 43%, 51%, 1)
OUTPUT: #6cb84b

=== complement() ===

Example:

var color = new Hex('#f30');

console.log(color.toString() + ' => ' + complement(color).toString());

Result:

#ff3300 => #00cbff

=== analogous() ===

Example:

var color = new Hex('#f30');

console.log(color.toString() + ' => ' + analogous(color));

Result:

#ff3300 => #ff004c,#ffb200

=== split() ===

Example:

var color = new Hex('#f30');

console.log(color.toString() + ' => ' + split(color));

Result:

#ff3300 => #004cff,#00ffb2

=== square() ===

Example:

var color = new Hex('#f30');

console.log(color.toString() + ' => ' + square(color));

Result:

#ff3300 => #4cff00,#00cbff,#b200ff

=== triad() ===

Example:

var color = new Hex('#f30');

console.log(color.toString() + ' => ' + triad(color));

Result:

#ff3300 => #3200ff,#00ff32

=== tetradic() ===

Example:

var color = new Hex('#f30');

console.log(color.toString() + ' => ' + tetradic(color));

Result:

#ff3300 => #cbff00,#00cbff,#3200ff