Responsive.js allow you to render css/media query based on a javascript templating function. It will be possibile to render some css based on a JSON object.
The base function is r$.template(str,data) where str is the template string and data a JSON object. Here is a list of syntax rules of r$ template definition :
<# code #> permit to execute some javascript code
<#= property #> replace with data property value
## escape for # char
r$ exposes a dynamic methods to register a template for a fixed range :
r$.dynamic(template,data,range) where range is an array of width intervals (example : [[100,200],[400,600]...])
<script type="responsive-template" id="template">
#box{
background-color:<#= Color #> !important;
width: <#= Math.round(Width/2) #>px;
height: <#= Math.round(Width/2) #>px;
}
</script>
r$.settings().debug = true;
r$.settings().indent = true;
r$.dynamic($('#template').html(),function(w) {
return {
Width: w,
Color: getColor(w)
};
});
r$.start();