Détail du package

== 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