« Back to Index

The responsive GEL grid system

View original Gist on GitHub

bookmarklet-grid.js

javascript:(function(w, d){
    var columns = 12,
        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{margin:0 auto;padding:0 4px;height:100%}.bbcnews-debug-column{float:left;width:8.333333333%;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{padding:0;width:992px;max-width:992px}}';

    function createColumn(i) {
        var column = d.createElement('div'),
            inner  = d.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  = d.createElement('div'),
            inner = d.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);
        d.body.appendChild(grid);
    }

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

    createGrid();
    insertCSS();
}(window, window.document));

// minified version
/* 
javascript:(function(w,d){var columns=12,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{margin:0 auto;padding:0 4px;height:100%}.bbcnews-debug-column{float:left;width:8.333333333%;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{padding:0;width:992px;max-width:992px}}";function createColumn(i){var column=d.createElement("div"),inner=d.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=d.createElement("div"),inner=d.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);d.body.appendChild(grid)}function insertCSS(){var style=d.createElement("style");style.setAttribute("type","text/css");style.innerHTML=css;d.body.appendChild(style)}createGrid();insertCSS()})(window,window.document);
*/