bootstap-grid-gui-tester-bookmark

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);