/* less grid v4.0 - For Less Framework 4. (c) Arnau March http://arnaumarch.com/en/lessgrid.html, freely distributable under the terms of the MIT license. */ $(document).ready(function() { createSwitch(); }); function createGrid () { $('body').append('
'); var pageWidth = $('body').width(); //var pageWidth = $('body').children(':first').width(); //If you don't set body width, uncomment this //var pageLeft = ($('body').width() - pageWidth) / 2; //If you don't set body width, uncomment this $('#less-grid').css({ width: pageWidth, position: "absolute", top: "0", bottom: "0", zIndex: 900, //left: pageLeft //If you don't set body width, uncomment this }); var colWidth = 68; var colSep = 24; var colCount = 1; for(colLeft=0;colLeft<=pageWidth;colLeft=(colWidth+colSep)*(colCount-1)){ $('#less-grid').append(' col: ' +colCount+'
 w: '+(((colWidth+colSep)*colCount)-colSep)+'
'); $('#less-grid .col-'+colCount).css({ width: colWidth, position: "absolute", top: "0", left: colLeft, bottom: "0", background: "#3d5fa3", opacity: 0.5, color: "#fff", fontSize: "13px", paddingTop: "33px" }); colCount++; }; } function createSwitch () { $('body').append('show grid'); $('#less-grid-switch').css({ position: "absolute", top: "0", right: "0", background: "#3d5fa3", border: "2px solid #fff", borderTop: 0, color: "#fff", fontSize: "13px", lineHeight: "13px", padding: "2px 8px 6px 8px", cursor: "pointer", "border-radius": "0 0 5px 5px", "-moz-border-radius": "0 0 5px 5px", zIndex: 1000 }); $('#less-grid-switch').toggle(function() { $(this).text("x"); $('#less-grid').show(); $(this).attr('rel','on'); $('#less-grid').remove(); createGrid(); }, function() { $(this).text('show grid'); $('#less-grid').hide(); $(this).attr('rel','off'); }); } $(function(){ $(window).resize(function(){ if($('#less-grid-switch').attr('rel')=="on") { $('#less-grid').remove(); createGrid(); } }); });