overlay a grid on top of webpage

overlay.js

/**
 * Apply a fixed grid on whole page.
 * @author Simon ertel
 * @license MIT
 */

(function () {

  "use strict";

  var displayGrid = true;

  function setCSS() {

    var styleEl = document.createElement('style'), styleSheet;
    document.head.appendChild(styleEl);
    styleSheet = styleEl.sheet;
    styleSheet.insertRule(".containerGrid{ position:fixed;z-index:9999;top:0;left: 0;margin:0;display:flex;flex-direction:column;overflow:hidden;width:100%;height:100%;}", 0);
    styleSheet.insertRule(".containerGrid>.rowGrid{height:100%;display:flex;width:calc(100% - 20px);padding:0 10px;box-sizing: content-box;}", 1);
    styleSheet.insertRule(".containerGrid>.rowGrid>div{flex: 1 1 0;margin: 0 10px;background: rgba(250,0,0,0.2);}", 2);
    styleSheet.insertRule(".containerGrid > div:first-child{display: none;}", 3);
    styleSheet.insertRule("@media screen and (min-width: 460px) {.containerGrid > div:first-child{display: flex;}}", 4);
    styleSheet.insertRule("@media screen and (min-width: 460px) {.containerGrid > div:last-child{display: none;}}", 5);
  }

  function destroyPanels(){
    document.querySelector(".containerGrid").remove();
  }


  function testGrid() {
    if(document.querySelector(".containerGrid") === null){
      return true;
    } else {
      return false;
    }
  }


  function createGrid(){
    if(testGrid()) {
      var grid = document.createElement("div");
      grid.className = "containerGrid";
      document.body.appendChild(grid);

      for (var j=1; j<=2; j++) {
        var dDiv=document.createElement("div");
        dDiv.className = "rowGrid";
        grid.appendChild(dDiv);

        if(j===1){
          for (var k=1; k<=12; k++) {
            var eDiv=document.createElement("div");
            dDiv.appendChild(eDiv);
          }
        } else {
          for (var l=1; l<=4; l++) {
            var fDiv=document.createElement("div");
            dDiv.appendChild(fDiv);
          }
        }
      }
    }

  }

  function bindKeyboard(e){

    console.log(e);
      //Echap
      if(e.keyCode == 27){
        document.body.removeEventListener("keydown", bindKeyboard);
        destroyPanels();
        displayGrid = true;
      }

  }

  function init(){

    displayGrid = false;
    createGrid();
    document.body.addEventListener('keydown', bindKeyboard);

  }

  setCSS();
  if(displayGrid){
    init();
  }

  return false;

})();

/*

Bookmark:

Used with http://chriszarate.github.io/bookmarkleter/ :
javascript:!function(){(function(){%22use%20strict%22;function%20e(){document.querySelector(%22.containerGrid%22).remove()}function%20n(){return%20null===document.querySelector(%22.containerGrid%22)}function%20i(){if(n()){var%20e=document.createElement(%22div%22);e.className=%22containerGrid%22,document.body.appendChild(e);for(var%20i=1;i%3C=2;i++){var%20d=document.createElement(%22div%22);if(d.className=%22rowGrid%22,e.appendChild(d),1===i)for(var%20t=1;t%3C=12;t++){var%20r=document.createElement(%22div%22);d.appendChild(r)}else%20for(var%20o=1;o%3C=4;o++){var%20a=document.createElement(%22div%22);d.appendChild(a)}}}}function%20d(n){console.log(n),27==n.keyCode%26%26(document.body.removeEventListener(%22keydown%22,d),e(),t=!0)}var%20t=!0;(function(){var%20e,n=document.createElement(%22style%22);document.head.appendChild(n),e=n.sheet,e.insertRule(%22.containerGrid{%20position:fixed;z-index:9999;top:0;left:%200;margin:0;display:flex;flex-direction:column;overflow:hidden;width:100%25;height:100%25;}%22,0),e.insertRule(%22.containerGrid%3E.rowGrid{height:100%25;display:flex;width:calc(100%25%20-%2020px);padding:0%2010px;box-sizing:%20content-box;}%22,1),e.insertRule(%22.containerGrid%3E.rowGrid%3Ediv{flex:%201%201%200;margin:%200%2010px;background:%20rgba(250,0,0,0.2);}%22,2),e.insertRule(%22.containerGrid%20%3E%20div:first-child{display:%20none;}%22,3),e.insertRule(%22%40media%20screen%20and%20(min-width:%20460px)%20{.containerGrid%20%3E%20div:first-child{display:%20flex;}}%22,4),e.insertRule(%22%40media%20screen%20and%20(min-width:%20460px)%20{.containerGrid%20%3E%20div:last-child{display:%20none;}}%22,5)})(),t%26%26function(){t=!1,i(),document.body.addEventListener(%22keydown%22,d)}(),!1})()}();

*/