Grid Overlay Bookmarklet

grid-overlay-bookmarklet.js

( function( window, document ) {

	var el = document.querySelector( '.grid-overlay' );

	if ( el ) {
		el.parentNode.removeChild( el );
		return;
	}

	var colCount    = 16;
	var maxWidth    = '65.833333333rem';
	var width       = 'calc( 100% - 3.333333332rem )';
	var colWidth    = 'calc( 6.25% - ( .9375 * .83333rem ) )';
	var gutterWidth = '0.833333333rem';
	
	if ( window.matchMedia( 'all and ( max-width: 51rem )' ).matches ) {
		width = 'calc( 100% - 1.66666667rem )';
	}

	if ( window.matchMedia( 'all and ( max-width: 34rem )' ).matches ) {
		colCount = 3;
		maxWidth = 'calc( 100% - 1.666666667rem )';
		colWidth = 'calc( 33.333333333% - ( 0.666666667 * .83333rem ) )';
	}

	el = document.createElement( 'div' );

	el.classList.add( 'grid-overlay' );
	el.style.position = 'fixed';
	el.style.top = '0';
	el.style.left = '50%';
	el.style.bottom = '0';
	el.style.width = width;
	el.style.maxWidth = maxWidth;
	el.style.transform = 'translateX( -50% )';
	el.style.backgroundColor = 'rgba(255,0,0,0.1)';
	el.style.pointerEvents = 'none';

	for ( var i = 0; i < colCount; i++ ) {
		var col     = document.createElement( 'div' );

		col.style.backgroundColor = 'rgba(255,0,0,0.1)';
		col.style.width = colWidth;
		col.style.marginRight = gutterWidth ;
		col.style.boxSizing = 'border-box';
		col.style.border = '1px solid rgba(0,0,0,0.25)';
		col.style.borderWidth = '0 1px';
		col.style.height = '100%';
		col.style.float = 'left';

		if ( i === colCount - 1 ) {
			col.style.marginRight = 0;
		}

		el.appendChild( col );
	}

	document.querySelector('body').appendChild( el );

})( window, document );