bootstrap grid bookmarklet

bootstrap-grid-bookmarklet.js

/*

    <style type="text/css">
      #grid {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        background-color: rgba(201, 201, 201, .5);
      }
      #grid .container,
      #grid .row {
        height: 100%;
        opacity: .5;
      }
      #grid .row > div {
        opacity: .7;
        height: 100%;
        border: 1px solid yellow;
        background-image:linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%);
        background-clip: content-box, padding-box;
      }
    </style>
*/
(function($) {
  $('body').append('<div id="grid-overlay"><div class="container"><div class="row"></div></div></div>');
  var gridDiv = $('#grid-overlay');
  var rowDiv = gridDiv.find('.row');
  var i = 12;
  while (var i > 0) {
    rowDiv.append('<div class="col-xs-1"></div>');
    i--;
  }
  gridDiv.css({
    position: 'fixed',
    top: 0,
    left: 0,
    height: '100%',
    width: '100%',
    backgroundColor: 'rgba(201, 201, 201, .5)',
    zIndex: 99999
  });
  gridDiv.find('.container,.row').css({
    height: '100%',
    opacity: .5
  });
  rowDiv.children('div').css({
    opacity: .7,
    height: '100%',
    border: '1px solid yellow',
    backgroundImage: 'linear-gradient(to bottom, rgba(240, 255, 40, 1) 0%, rgba(240, 255, 40, 1) 100%), linear-gradient(to bottom, rgba(240, 40, 40, 1) 0%, rgba(240, 40, 40, 1) 100%)',
    backgroundClip: 'content-box, padding-box'
  });
})(jQuery);