CSSObjs Example 1 Simple Simon

simple man!

HTML

<script src="https://github.com/gitsome/cssObjs/raw/master/cssObjs/cssobjs/cssobjs.js"></script>
<script src="https://github.com/gitsome/cssObjs/raw/master/cssObjs/cssobjs/extensions/cssobjs.colors.js"></script>
<script src="https://github.com/gitsome/cssObjs/raw/master/cssObjs/cssobjs/extensions/cssobjs.css3.js"></script>
<script src="https://github.com/gitsome/cssObjs/raw/master/cssObjs/cssobjs/extensions/cssobjs.expressions.js"></script>
<h1>This is my title</h1>
<h2>Subtitle</h2>
<p>This is the text for this subtitle</p>

JavaScript

//create a bucket to attach the global style objects to... will be loaded later
var myCSS = myCSS || {};

//test

//wrap it... so I can use variables like 'filename'
(function(undefined, PaulIrish) {

    //Create the admin styles array
    myCSS.globalStyles = [];

    //Mark the filename
    var filename = 'sample.css.js -> ';

    /*==================== Global Values ==================*/
    myCSS.globalStyles.push({
        cssVariables: {
            colorPrimary: '#42729E',
            colorDark: '$luminosity($colorPrimary,20)',
            colorLight: '$luminosity($colorPrimary,75)',
            textSecondary: '$luminosity($colorPrimary,50)'
        }
    });

    /*====================  Global Styling  ==================*/
    myCSS.globalStyles.push({
        cssDescription: filename + 'global styles',
        'body': {
            padding: '20px',
            background: '#EEEEEE'
        },
        'h1': {
            color: '$colorPrimary'
        },
        'h2': {
            color: '$textSecondary'
        },
        'p': {
            color: '$colorLight',
            margin: '0 0 10px 0',
            padding: '20px',
            border_radius: '5px',
            background: '$colorDark'
        }
    });

})();

$(document).ready(function() {
    var c = myCSS || {};
    var cssObj = $.cssObjs('sampleStyle', c.globalStyles);
    cssObj.injectStyles();
});