Skip to content

Instantly share code, notes, and snippets.

@arschmitz
Last active August 29, 2015 14:21
Show Gist options
  • Select an option

  • Save arschmitz/df4270477f2094d9f38b to your computer and use it in GitHub Desktop.

Select an option

Save arschmitz/df4270477f2094d9f38b to your computer and use it in GitHub Desktop.
// This is just boiuler plate dont worry about it
// This just supports loading in any enviroment
(function ( root, factory ) {
if ( typeof define === "function" && define.amd ) {
define( [], factory );
} else if ( typeof exports === "object" ) {
module.exports = factory();
} else {
root.chassis = factory();
}
}( this, function () {
// This is where we actually define stuff
var chassis = {
"borderRadius": ".2em",
"someOther": "5"
};
return chassis;
} ) );
( function ( root, factory ) {
if ( typeof define === 'function' && define.amd ) {
define( [ "chassis" ], factory );
} else if (typeof exports === 'object') {
module.exports = factory( require('chassis') );
} else {
root.chassis = factory( root.chassis );
}
}(this, function ( chassis ) {
var colors = {
"chassis-gray-dark": {
"value": "#383838",
"name": "Chassis Gray - Dark"
},
"chassis-gray": {
"value": "#c1c1c1",
"name": "Chassis Gray"
},
"chassis-gray-light": {
"value": "#f2f2f2",
"name": "Chassis Gray - Light"
},
"chassis-blue-dark": {
"value": "#388695",
"name": "Chassis Blue - Dark"
},
"chassis-blue": {
"value": "#4fc0c8",
"name": "Chassis Blue"
},
"chassis-yellow": {
"value": "#fadf51",
"name": "Chassis Yellow"
}
}
chassis.colors = {
"background": colors[ "chassis-gray-dark" ],
"font": colors[ "chassis-gray-dark" ],
"link": colors[ "chassis-blue-dark" ],
"button": colors[ "chassis-blue" ],
"button-text": colors[ "chassis-gray-light" ],
"blockquote-border": colors[ "#eee" ]
}
return chassis;
} ) );
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="chassis.js"></script>
<script src="colors.js"></script>
<script>
$(function(){
$( "body" ).css( "background", chassis.colors.background );
$.each( chassis, function( moduleName, moduleValue ) {
$( "body" ).append( "<h1>" + moduleName + "</h1>" );
$.each( value, function( name, value ) {
var html
switch( name ) {
case "color":
html = "<div style='background: '" + value.value + "'></div>";
break;
case "radius":
html = "<div style='border-radisu:'" + value.value + "'></div>";
}
$( "body" ).append( "<h3>" + value.name + "<h3>" + html );
} );
} );
} );
</script>
</head>
<body>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment