Debug Grid Overlay

🏁 Display your design's grid as an overlay on top of your web site or app to debug positioning of elements.

Usage

Import it as a ES6 module and initialize it:

import debugGridOverlay from 'debug-grid-overlay';

debugGridOverlay({
    columns: 24,
    columnWidth: '1fr',
    gutterWidth: '16px',
});

You can now trigger the overlay by pressing on lowercase "g" on your keyboard. You can also toggle the overlay manually by calling the .toggle() method.

Note: You should disable this in your production build by wrapping the initialization in a conditional, like so:

if (process.env.NODE_ENV === 'development') {
    DebugGridOverlay();
}

Options

const debugGrid = debugGridOverlay({
	columns: 12,
	// The amount of columns in your grid
	// Default: 12

	columnWidth: '1fr',
	// Default: 1fr

	gutterWidth: '16px',
	// Default: 16px

	maxWidth: '1344px',
	// Sets a max width for your grid
	// Default: null,

	marginsWidth: '40px',
	// Sets outer document margins for your grid
	// Default: null

	verticalRhythm: '20px',
	// Useful for seeing if your design conforms to the vertical rhythm
	// Default: 20px

	keyCode: 71,
	// Keyboard key code that triggers the overlay
	// Default: 71 (lowercase 'g')
});

API

Events

const debugGrid = debugGridOverlay();

debugGrid.on('toggled', (visible) => {
	if (visible) {
		console.log('Grid has been toggled on');
	} else {
		console.log('Grid has been toggled off');
	}
});