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';

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})();