Mall för testprogram

En mall för testprogram, inklusive jQuery och LESS som körs när DOM är laddat och klart.

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/less.js/1.4.1/less.min.js"></script>
<div id='flash'>
    <p id='text' class='red'>Hi this text sse replaced when page and DOM is loaded.</p>
</div>

CSS

// LESS can go here
@green:#46a546;
@red:#9d261d;
@grey:#555;
@greyLight:#999;
@greyLighter:#eee;

.green{color:@green;}
.red{color:@red;}

#flash{background-color:lighten(@greyLighter,5%);min-height:10em;border:1px solid @greyLight;padding:1em;.border-radius(10px);.box-shadow();}


/** ------------------------------------
 * CSS3 mixins.
 */
.border-radius(@radius:5px) {
  -webkit-border-radius: @radius;
     -moz-border-radius: @radius;
          border-radius: @radius;
}

.box-shadow(@shadow:5px 5px 5px 5px @grey) {
  -webkit-box-shadow: @shadow;
     -moz-box-shadow: @shadow;
          box-shadow: @shadow;
}

JavaScript

'use strict';

// Shim for LESS/JSFiddle, http://jsfiddle.net/AaronLayton/B5zCu/
(function(){$('head style[type="text/css"]').attr('type', 'text/less');less.refreshStyles();})();

var text;
text = document.getElementById('text');
text.innerHTML = 'Hello World, documensst is ready!';
text.className = 'green';