style-js

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