displays overlay with bootstrap-grid

_dev-grid.scss

$screen-xs-min: 480px !default;
$screen-sm-min: 768px !default;
$screen-md-min: 992px !default;
$screen-lg-min: 1200px !default;
$grid-gutter-width: 30px !default;

$dev-grid-style: guides !default;
$dev-grid-style: false !default;
$dev-grid-show-center-guides: true !default;
$dev-grid-show-label: true !default;

.dev-grid {
    $xs: $screen-xs-min;
    $sm: $screen-sm-min;
    $md: $screen-md-min;
    $lg: $screen-lg-min;
    box-sizing: border-box;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 0;
    z-index: 9999999;
    pointer-events: none;
    display: none;

    .dev-mode & {
        display: block;
    }

    @if $dev-grid-show-label {
        &::before {
            position: absolute;
            left: 0;
            bottom: -100vh;
            background: rgba(#000, 0.5);
            padding: 0.2em 0.5em 0;
            font-size: 12px;
            font-weight: 700;
            color: #ffffff;
            content: 'XS 0...#{$sm - 1}';
            @media (min-width: $sm) { content: 'SM #{$sm}..#{$md - 1}'; }
            @media (min-width: $md) { content: 'MD #{$md}..#{$lg - 1}'; }
            @media (min-width: $lg) { content: 'LG #{$lg}..'; }
        }
    }

    .container {
        display: flex;
        padding: 0 !important;
        height: 0;
    }

    .grid {
        border-right: 1px solid rgba(red, 0.1);
        &:first-child {
            border-left: 1px solid rgba(red, 0.1);
        }
        height: 100vh;
        padding: 0 (($grid-gutter-width / 2) - 1px);
        position: relative;
        width: percentage(1/12);
        @if $dev-grid-style == guides {
            &, &:first-child { border-color: rgba(#4affff, 0.3); }
        }
        @if $dev-grid-show-center-guides == false {
            height: 0;
        }
        &::before {
            box-sizing: border-box;
            background: rgba(red, 0.03);
            content: '';
            height: 100vh;
            left: 0;
            position: absolute;
            top: 0;
            width: (($grid-gutter-width / 2) - 1px);
            @if $dev-grid-style == guides {
                border-right: 1px solid rgba(#4affff, 0.3);
                background: none;
            }
        }
        &::after {
            box-sizing: border-box;
            background: rgba(red, 0.03);
            content: '';
            height: 100vh;
            position: absolute;
            right: 0;
            top: 0;
            width: (($grid-gutter-width / 2) - 1px);
            @if $dev-grid-style == guides {
                border-left: 1px solid rgba(#4affff, 0.3);
                background: none;
            }
        }
        @media (max-width: $xs) {
            width: 100%;
            &:not(:first-child) {
                display: none;
            }
        }
    }
}

dev-grid.js

/**
 * Only for the development stage. Remove in production.
 */
(function () {
    var gridColumns = 12;

    function devReady(fn) {
        (document.readyState != 'loading') ? fn() : document.addEventListener('DOMContentLoaded', fn);
    }

    function elem(cls, tag) {
        var el;
        tag          = tag || 'div';
        el           = document.createElement(tag);
        el.className = cls;
        return el;
    }

    devReady(function () {
        var isDevMode = false;
        var checkHash = function () {
            if (location.hash == '#dev') {
                if (!isDevMode) {
                    isDevMode = true;
                    document.body.classList.add('dev-mode');
                    var elements = document.querySelectorAll('a');
                    Array.prototype.forEach.call(elements, function (el, i) {
                        if (el.hash == '') {
                            el.hash = '#dev';
                        }
                    });
                    var grid      = elem('dev-grid');
                    var container = elem('container');
                    var i;
                    for (i = 0; i < gridColumns; i++) {
                        container.appendChild(elem('grid'));
                    }
                    grid.appendChild(container);
                    document.body.appendChild(grid);
                }
            } else {
                document.body.classList.remove('dev-mode');
            }
        };
        window.addEventListener('hashchange', checkHash);
        checkHash();
    });
})();