24_column_grid.js

(function() {

    var columns = 24,
        css     = '.bbcnews-debug-grid{position:fixed;left:0;top:0;right:0;bottom:0;z-index:9999;display:block;pointer-events:none}.bbcnews-debug-grid__inner{height:100%;margin:0 auto;padding:0 4px}.bbcnews-debug-column{float:left;width:4.166666667%;height:100%}.bbcnews-debug-column__inner{margin-left:4px;margin-right:4px;height:100%;background-color:rgba(0,171,236,0.2)}@media(min-width:400px){.bbcnews-debug-grid__inner{padding:0 12px}}@media(min-width:600px){.bbcnews-debug-grid__inner{padding:0 24px}.bbcnews-debug-column__inner{margin-left:8px;margin-right:8px}}@media(min-width:1008px){.bbcnews-debug-grid__inner{width:992px;max-width:992px;padding:0}}';

    function createColumn(i) {
        var column = document.createElement('div'),
            inner  = document.createElement('div');

        column.className = 'bbcnews-debug-column bbcnews-debug-column--'+i;
        inner.className  = 'bbcnews-debug-column__inner';

        column.appendChild(inner);
        return column;
    }

    function createGrid() {
        var grid  = document.createElement('div'),
            inner = document.createElement('div');

        grid.className  = 'bbcnews-debug-grid';
        inner.className = 'bbcnews-debug-grid__inner';

        for(var i = 1; i <= columns; i++) {
            inner.appendChild(createColumn(i));
        }

        grid.appendChild(inner);
        document.body.appendChild(grid);
    }

    function insertCSS() {
        var style = document.createElement('style');
        style.setAttribute('type', 'text/css');
        style.innerHTML = css;
        document.body.appendChild(style);
    }

    createGrid();
    insertCSS();
}());