public
Created

A Grid Overlay for Any Website

  • Download Gist
show-grid.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13
/*
* A Grid Overlay for Any Website
* ------------------------------
*
* Open your browser console, paste in this code and you’re done.
* (Works at least for Safari, Firefox, Chrome and Internet Explorer 8.0)
*
* Adjust variables to your need. The example shows a 960.gs grid with 12 columns à 60px:
*/
 
var columns = 12, gapWidth = 20, columnWidth = 60, opacity = 0.2, color = '#ff2a84', pageWidth = columns * columnWidth + (columns - 1) * gapWidth, grid = '';
for (var i = 0; i < columns; i++, grid += '<div></div>');
document.getElementsByTagName('BODY')[0].innerHTML += '<style>#grid-container{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999999}#grid{height:100%;margin:0 auto;width:'+pageWidth+'px}#grid div{background:'+color+';float:left;height:100%;opacity:'+opacity+';filter:alpha(opacity='+opacity*100+');width:'+columnWidth+'px;margin-left:'+gapWidth+'px}#grid div:first-child{margin-left:0}</style><div id="grid-container"><div id="grid">'+grid+'</div></div>';'grid enabled';

And here's the script as a bookmarklet:

javascript:var%20columns%20=%2012,%20gapWidth%20=%2020,%20columnWidth%20=%2060,%20opacity%20=%200.2,%20color%20=%20%27#ff2a84%27,%20pageWidth%20=%20columns%20*%20columnWidth%20+%20(columns%20-%201)%20*%20gapWidth,%20grid%20=%20%27%27;for%20(var%20i%20=%200;%20i%20<%20columns;%20i++,%20grid%20+=%20%27

%27);document.getElementsByTagName(%27BODY%27)[0].innerHTML%20+=%20%27#grid-container{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999999}#grid{height:100%;margin:0%20auto;width:%27+pageWidth+%27px}#grid%20div{background:%27+color+%27;float:left;height:100%;opacity:%27+opacity+%27;filter:alpha(opacity=%27+opacity*100+%27);width:%27+columnWidth+%27px;margin-left:%27+gapWidth+%27px}#grid%20div:first-child{margin-left:0}
%27+grid+%27
%27;%27grid%20enabled%27;

Now we only need a 'Hide grid' version :-)

Maybe there should be a input box, where you can paste in the variables.

Sure, pretty 'static' right now though it still helps if you need it for a dedicated project - modify/save once, then use without c&p'ing...

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.