Skip to content

Instantly share code, notes, and snippets.

@danielt69

danielt69/bootstap-grid-gui-tester-bookmark.js

Last active October 31, 2018 07:19
Show Gist options
  • Save danielt69/55883c33d2aed999a2fca3d79e5f5a30 to your computer and use it in GitHub Desktop.
Save danielt69/55883c33d2aed999a2fca3d79e5f5a30 to your computer and use it in GitHub Desktop.
Download ZIP
bootstap-grid-gui-tester-bookmark
Raw
bootstap-grid-gui-tester-bookmark.js
var htmlBSGrid = `
<div class="bsgrid">
<div class="container">
<h1>
<span class="visible-xs">XS: </span>
<span class="visible-sm">SM: </span>
<span class="visible-md">MD: </span>
<span class="visible-lg">LG: </span>
<span class="size"></span>
</h1>
<div class="row">
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1"></div>
<div class="col-xs-1 hidden-xs"></div>
<div class="col-xs-1 hidden-xs"></div>
<div class="col-xs-1 hidden-xs"></div>
<div class="col-xs-1 hidden-xs"></div>
<div class="col-xs-1 hidden-xs"></div>
<div class="col-xs-1 hidden-xs"></div>
</div>
</div>
</div>
<style>
.bsgrid { height: 100vh; width: 100%; position: fixed; top: 0; z-index: 9999999999999999; }
.bsgrid .container { height: 100%; position: relative; }
.bsgrid .container h1 { background: none; position: absolute; text-align: center; width: calc(100% - 30px); background: #fff; z-index: 1; line-height: 70px; bottom: 0; box-shadow: inset 0 0 1px 0 #000; margin: 0; display: flex; justify-content: center; }
.bsgrid .container h1 span { background: none; }
.bsgrid .container .row { display: flex; }
.bsgrid .container .row div {min-height: 100vh; position: relative; flex: 1 1 auto; }
.bsgrid .container .row div:before { content: ""; position: absolute; top: 0; left: 0; width: calc(100% - 30px); height: 100%; background: rgba(219, 112, 147, 0.3); margin: 0 15px; box-shadow: 0 0 0 15px rgba(2, 45, 25, 0.07);}
</style>
`;
document.body.insertAdjacentHTML('beforeend', htmlBSGrid);
function setbgWidth() {
var container = document.querySelectorAll('.bsgrid .container h1')[0];
container.querySelector('.size').innerText = container.offsetWidth;
}
setbgWidth();
/* Feature detection */
var passiveIfSupported = false;
try {
window.addEventListener("test", null, Object.defineProperty({}, "passive", { get: function() { passiveIfSupported = { passive: false }; } }));
} catch(err) {}
// requestAnimationFrame
const raf =
window.requestAnimationFrame ||
window.webkitRequestAnimationFrame ||
window.mozRequestAnimationFrame ||
function( callback ) {
window.setTimeout( callback, 1000 / 60 )
}
window.addEventListener('resize',function(){
raf(function(){
setbgWidth();
})
}, passiveIfSupported);
/////////////////// minified script for bookmark ///////////////////////
javascript:'use strict';var htmlBSGrid='\n<div class="bsgrid">\n\t<div class="container">\n\t\t<h1>\n\t\t\t<span class="visible-xs">XS: </span>\n\t\t\t<span class="visible-sm">SM: </span>\n\t\t\t<span class="visible-md">MD: </span>\n\t\t\t<span class="visible-lg">LG: </span>\n\t\t\t<span class="size"></span>\n\t\t</h1>\n\t\t<div class="row">\n\t\t\t<div class="col-xs-1"></div>\n\t\t\t<div class="col-xs-1"></div>\n\t\t\t<div class="col-xs-1"></div>\n\t\t\t<div class="col-xs-1"></div>\n\t\t\t<div class="col-xs-1"></div>\n\t\t\t<div class="col-xs-1"></div>\n\t\t\t<div class="col-xs-1 hidden-xs"></div>\n\t\t\t<div class="col-xs-1 hidden-xs"></div>\n\t\t\t<div class="col-xs-1 hidden-xs"></div>\n\t\t\t<div class="col-xs-1 hidden-xs"></div>\n\t\t\t<div class="col-xs-1 hidden-xs"></div>\n\t\t\t<div class="col-xs-1 hidden-xs"></div>\n\t\t</div>\n\t</div>\n</div>\n<style>\n\t.bsgrid { height: 100vh; width: 100%; position: fixed; top: 0; z-index: 9999999999999999; }\n\t.bsgrid .container { height: 100%; position: relative; }\n\t.bsgrid .container h1 { background: none; position: absolute; text-align: center; width: calc(100% - 30px); background: #fff; z-index: 1; line-height: 70px; bottom: 0; box-shadow: inset 0 0 1px 0 #000; margin: 0; display: flex; justify-content: center; }\n\t.bsgrid .container h1 span { background: none; }\n\t.bsgrid .container .row { display: flex; }\n\t.bsgrid .container .row div {min-height: 100vh; position: relative; flex: 1 1 auto; }\n\t.bsgrid .container .row div:before { content: ""; position: absolute; top: 0; left: 0; width: calc(100% - 30px); height: 100%; background: rgba(219, 112, 147, 0.3); margin: 0 15px; box-shadow: 0 0 0 15px rgba(2, 45, 25, 0.07);}\n</style>\n';document.body.insertAdjacentHTML('beforeend',htmlBSGrid);function setbgWidth(){var a=document.querySelectorAll('.bsgrid .container h1')[0];a.querySelector('.size').innerText=a.offsetWidth}setbgWidth();var passiveIfSupported=!1;try{window.addEventListener('test',null,Object.defineProperty({},'passive',{get:function get(){passiveIfSupported={passive:!1}}}))}catch(a){}var raf=window.requestAnimationFrame||window.webkitRequestAnimationFrame||window.mozRequestAnimationFrame||function(a){window.setTimeout(a,1e3/60)};window.addEventListener('resize',function(){raf(function(){setbgWidth()})},passiveIfSupported);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment