A Grid Overlay for Any Website

show-grid.js

/*
 * 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<style>#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}</style><div%20id=%22grid-container%22><div%20id=%22grid%22>%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...

This works as a bookmarklet in Firefox 66.0.2 [2019] javascript:(function(){ var columns = 12, gapWidth = 16, columnWidth = 80, opacity = 0.2, color = '#ff2a84',%20pageWidth%20=%20columns%20*%20columnWidth%20+%20(columns%20-%201)%20*%20gapWidth,%20grid%20=%20'';%20for%20(var%20i%20=%200;%20i%20<%20columns;%20i++,%20grid%20+=%20'<div></div>');%20document.getElementsByTagName('BODY')[0].innerHTML%20+=%20'<style>#grid-container{bottom:0;left:0;position:fixed;right:0;top:0;z-index:9999999}#grid{height:100%;margin:0%20auto;width:'+pageWidth+'px}#grid%20div{background:'+color+';float:left;height:100%;opacity:'+opacity+';filter:alpha(opacity='+opacity*100+');width:'+columnWidth+'px;margin-left:'+gapWidth+'px}#grid%20div:first-child{margin-left:0}</style><div%20id="grid-container"><div%20id="grid">'+grid+'</div></div>';'grid%20enabled';%20})();