DiceJS CSS + JavaScript

What Is DiceJS?

DiceJS ( Dynamically Injected CSS Engine ) is a jQuery extension that allows you to store your CSS in JavaScript objects to dynamically manipulate and inject as you please.

A Simple Example

//create an array to hold css objects and an id for this group
var myCSS = [];
var myCSSid = 'my-css';

//push in a set of styles in JSON format
myCSS.push({
  'body': padding:'20px'
});

//inject the array of styles
$.dicejs(myCSSid,myCSS).injectStyles();	
										

Who's Using DiceJS?

Are you using DiceJS? Let us know : Email Us

Having your CSS stored in JavaScript objects allows you do some pretty cool stuff.

  1. Allows you to utilize functions and variables within your CSS
  2. Allows you to dynamically change your functions and variales and then re-inject your styles
  3. Gives you the ability to use nesting to reduce redundant code
  4. Creates the opportunity to scan these objects for redundancy / optimization

Advanced Example

//create an array to hold css objects and an id for this group
var myCSS = [];
var myCSSid = 'my-css';

//push a description, variables, functions, and styles
myCSS.push({
  
  //Associate some text with this block of styles
  'cssDescription' : 'This is my first advanced CSS example',
  
  //Add some variables you can use in your styles
  'cssVariables' : {
    pColor : '#990033',
    docWidth : '980px',
    bigPadding : '20px'
  },
  
  //Add a function you can use in your styles
  'cssFunctions' : {
    round : function (params) {
      return 
      ' -moz-border-raidus:' + params + ';' +
      ' border-radius:' + params + ';';
    }
  },
  
  //Add styles while using your variables and functions
  'body': {padding:'20px', width:'$docWidth'},
  'p': {padding:'10px', background:'$pColor', round:'10px'},
  'p.big' : {padding:'$bigPadding', round:'$bigPadding'}
  
});

//inject the array of styles
$.dicejs(myCSSid,myCSS).injectStyles();	
										

DEMO DiceJS

Instructions, Download a Package, JS Fiddle

  • Download the complete demo package here : Download Demo

  • See the demo live here : DiceJS Demo

  • View the JS Fiddle of this demo : JS Fiddle

  • Overview of the Demo

    First download jQuery & DiceJS and include them in the head of your document.

    <head>

    <!-- JQUERY -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <!-- DICEJS -->
    <script type="text/javascript" src="dicejs/dicejs.js"></script>
    <!-- DICEJS PLUGINS (OPTIONAL) -->
    <script type="text/javascript" src="dicejs/plugins/dicejs.colors.js"></script>
    <script type="text/javascript" src="dicejs/plugins/dicejs.css3.js"></script>
    <script type="text/javascript" src="dicejs/plugins/dicejs.production.js"></script>

    </head>

    Next, create your CSS in JavaScript

    <head>

    <!-- JQUERY -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <!-- DICEJS -->
    <script type="text/javascript" src="dicejs/dicejs.js"></script>
    <!-- DICEJS PLUGINS (OPTIONAL) -->
    <script type="text/javascript" src="dicejs/plugins/dicejs.colors.js"></script>
    <script type="text/javascript" src="dicejs/plugins/dicejs.css3.js"></script>
    <script type="text/javascript" src="dicejs/plugins/dicejs.production.js"></script>

    <!-- *before the end of the head* -->
    <!-- OPTION 1 : Include an external file with the CSS -->
    <script type="text/javascript" src="styles/mycss.js"></script>

    <!-- OPTION 2 : Include the CSS right here in the head -->
    <script>
    var myCSS = [];

    //push in the variables
    myCSS.push({
    cssDescription : 'My Variables',
    cssVariables : {
    docWidth:'940px',
    pColor: '#990033', //primary color
    pDark : '$lightness($pColor,15)', //primary dark 15% lightness
    pLight : '$lightness($pColor,55)' //primary light 75% lightness
    }
    });

    //push in some styles
    myCSS.push({
    cssDescription : 'My Styles',
    '.container' : {width:'$docWidth'}
    a : {text_decoration:'none', font_weight:'bold',
    subs : {
    ':visited': {color: '$pColor'},
    ':active' : {color: '$pColor'},
    ':link' : {color: '$pColor'},
    ':hover' : {color: '$pLight'}
    }
    }
    });
    </script>
    </head>

    Finally, inject the styles!

    <head>

    <!-- JQUERY -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <!-- DICEJS -->
    <script type="text/javascript" src="dicejs/dicejs.js"></script>
    <!-- DICEJS PLUGINS (OPTIONAL) -->
    <script type="text/javascript" src="dicejs/plugins/dicejs.colors.js"></script>
    <script type="text/javascript" src="dicejs/plugins/dicejs.css3.js"></script>
    <script type="text/javascript" src="dicejs/plugins/dicejs.production.js"></script>

    <!-- *before the end of the head* -->
    <!-- OPTION 1 : Include an external file with the CSS -->
    <script type="text/javascript" src="styles/mycss.js"></script>

    <!-- OPTION 2 : Include the CSS right here in the head -->
    <script>
    var myCSS = [];

    //push in the variables
    myCSS.push({
    cssDescription : 'My Variables',
    cssVariables : {
    docWidth:'940px',
    pColor: '#990033', //primary color
    pDark : '$lightness($pColor,15)', //primary dark 15% lightness
    pLight : '$lightness($pColor,55)' //primary light 75% lightness
    }
    });

    //push in some styles
    myCSS.push({
    cssDescription : 'My Styles',
    '.container' : {width:'$docWidth'}
    a : {text_decoration:'none', font_weight:'bold',
    subs : {
    ':visited': {color: '$pColor'},
    ':active' : {color: '$pColor'},
    ':link' : {color: '$pColor'},
    ':hover' : {color: '$pLight'}
    }
    }
    });

    //inject the styles
    $.dicejs('my-css', myCSS).injectStyles();
    </script>

    </head>

PLUGINS FOR DiceJS

DiceJS Plugins

DiceJS exposes an API that allows plugins to add functions and functional variables which provide tremendous progrommatic power. You may also utilize the diagnostics API which allows you to gain access to all styles, variables, and functions that have been loaded. This is great for analysis or dynamic modification. We have begun a few of our own that we consistently use. Use these, add to them, or create your own!

  • DiceJS CSS3

    The CSS3 (dicejs.css3.js) plugin adds common cross-browser CSS3 functions

    To use the CSS3 plugin, include the dicejs.css3.js file in the head of your document and use the new CSS3 functions you have access to ( ONLINE DEMO )

    var myCSS = [];

    //push in the variables
    myCSS.push({
    cssDescription : 'My Variables',
    cssVariables: {
    pColor : '#0000FF',
    sColor : '#FF0000',
    radius : '20px',
    radiusBig : '50px'
    }
    });

    //push in some styles
    myCSS.push({
    cssDescription : 'CSS3 Demo Styles',
    p : {color:'#fff', font_weight:'bold', font_size:'20px', width:'500px',
    transitionAll:'300ms ease-in-out', border_radius:'$radius',
    background : '$pColor', box_shadow:'0px 2px 5px #000', padding:'$radius',
    subs : {
    '.big' : {border_radius : '$radiusBig', padding:'$radiusBig'},
    '.leafed' : {leafUL : '$radius'},
    '.leafed:hover' : {leafUR: '$radiusBig', padding:'$radiusBig'},
    '.big.leafed' : {leafUL : '$radiusBig', padding:'$radiusBig'},
    '.big.leafed:hover' : {leafUR : '$radiusBig'}
    }
    },
    a : {text_shadow : '1px 1px 2px #000000'},
    h1 : {font_weight:'bold', text_shadow : '1px 1px 4px $pColor'},
    'h1:hover' : {text_shadow : '1px 1px 20px $pColor'},
    h2 : {font_weight:'bold', text_shadow : '1px 1px 4px $sColor'},
    'h2:hover' : {text_shadow : '1px 1px 20px $sColor'},
    'h1,h2' : {transitionAll:'100ms ease-in-out'}

    });
  • DiceJS Colors

    The CSS3 (dicejs.colors.js) plugin adds variable functions for color manipulation (this one is fun!)

    To use this plugin, include the dicejs.color.js file in the head of your document and utilize one of the many variable functions provided to you ( ONLINE DEMO )

    var myCSS = [];

    //push in the variables
    myCSS.push({
    cssDescription : 'My Variables',
    cssVariables: {

    //primary color
    pBase: '#990033',
    pMid: '$lightness($pBase,50)', //primary mid 50% lightness
    pDark : '$lightness($pBase,15)', //primary dark 25% lightness
    pLight : '$lightness($pBase,55)', //primary light 75% lightness

    //secondary color
    sBase: '#33FF33',
    sMid: '$lightness($sBase,50)', //secondary mid 50% lightness
    sDark : '$lightness($sBase,15)', //secondary dark 25% lightness
    sLight : '$lightness($sBase,55)', //secondary light 75% lightness

    //generate a third color from the secondary color
    tMid: '$hsl($sBase,50,75,50)', //accent color (hsl compliment +50% saturation 100%)
    tLight : '$lightness($tMid,75)', //accent light 75% lightness
    tDark : '$lightness($tMid,25)', //accent dark 25% lightness

    radius : '20px'

    }
    });

    //push in some styles
    myCSS.push({
    cssDescription : 'Colors Demo Styles',
    p : {background_color:'$pDark', color:'$pLight', font_weight:'bold', font_size:'20px', padding:'$radius', width:'500px'},
    'p.instructions' : {background_color:'$sMid', color:'$sDark'},
    'p.secondary' : {background_color:'$sDark', color:'$sLight'},
    'p.accent' : {background_color:'$tDark', color:'$tLight'},
    h1 : {font_weight:'bold', color:'$pMid'},
    h2 : {font_weight:'bold', color:'$sMid'},
    h3 : {color :'$tMid'},
    a : {color:'$tMid'}
    });
  • DiceJS PRODUCTION

    The PRODUCTION (dicejs.production.js) plugin uses the diagnostics API to gain access to all styles. You can then in real time modify variables and variable functions you are using like colors, widths, etc.

    To use the production plugin, include the dicejs.production.js file in the head of your document. Then after you have added all of your styles, functions, and variables, run the 'production' diagnostic through the DiceJS api.

    You will see a 25x25 black cog image in the upper right hand corner of your screen if it was successful. Click that icon to use the production tools.

    <head>

    <!-- JQUERY -->
    <script type="text/javascript" src="jquery.min.js"></script>
    <!-- DICEJS -->
    <script type="text/javascript" src="dicejs/dicejs.js"></script>
    <script type="text/javascript" src="dicejs/plugins/dicejs.production.js"></script>

    <!-- DICEJS PLUGINS (OPTIONAL) -->
    <script type="text/javascript" src="dicejs/plugins/dicejs.colors.js"></script>
    <script type="text/javascript" src="dicejs/plugins/dicejs.css3.js"></script>
    //include css files
    <script type="text/javascript" src="styles/mycss.js"></script>

    <script>
    //inject the styles
    $.dicejs('my-css', myCSS).injectStyles();
    //run the production plugin
    $.dicejsAPI.runDiagnostic('production');
    </script>

    </head>

    Click on the icon in the upper right hand corner of this site, or this demo ( ONLINE DEMO ) to use the production plugin. Click on variables to edit the colors.

    (NOTE: These tools are still in development. Currently you can only modify color variables). We are working to be able to edit all variables (functions and numeric), and finish the analysis and print functions

DiceJS CSS3

DOWNLOAD : DiceJS

This site uses the most current version of DiceJS and DiceJS Plugins. Please see the change log for version changes.

DiceJS

Plugins

Working Demo with DiceJS

Change Log

  • Version 1.0 (Base Version)