// Gridset Overlay JS gs = { init: function () { if (window.location.href.match('gridset=show')) gs.show(); gs.bind(document, 'keydown', function (e) { if (!e) var e = window.event; if(e.metaKey || e.ctrlKey) { switch (e.which || e.keyCode) { case 71: var gw = document.getElementById('#gridscreenwidthwrap'), url = window.location.href; if (typeof(window.history.pushState) == 'function') { if (!url.match('gridset=show') && !gw) { var newurl = (url.match(/\?/)) ? url + '&gridset=show' : url + '?gridset=show'; window.history.pushState({"pageTitle":document.title},"", newurl); gs.show(); } else { var newurl = url.replace(/&gridset=show/, '').replace(/\?gridset=show&/, '?').replace(/\?gridset=show$/, ''); window.history.pushState({"pageTitle":document.title},"", newurl); gs.remove(); } } else { if (gw) window.location.href = window.location.href + '?gridset=show'; else window.location.href = window.location.href.replace('?gridset=show', ''); } gs.prevent(e); break; } } }); }, width: function () { var swv = document.getElementById('gridscreenwidthval'); if (swv) swv.innerHTML = window.innerWidth + 'px'; }, remove: function () { var gseles = document.querySelectorAll('.gridsetoverlaywrap, #gridsetoverlaystyles, #gridscreenwidthwrap, #gridsetstyles, #gridsetfavicon'), gscount = gseles.length; while(gscount-- > 0) { gseles[gscount].parentNode.removeChild(gseles[gscount]); } }, show: function () { var b = document.getElementsByTagName('body')[0], gridareas = document.querySelectorAll('[class*=-showgrid]'), areacount = gridareas.length, wrapper = document.querySelectorAll('.container'), styles = '.gridsetoverlaywrap{font-family:Helvetica, Arial, sans-serif !important;padding:0 !important;display:block;position:absolute;top:0;left:0;width:100%;height:100%;z-index:10000;pointer-events:none;}.gridsetnoareas .gridsetoverlaywrap{position:fixed;}.gridwrap{padding:0 !important;display:block;position:absolute;top:0;left:0;width:100%;height:100%;font-family:Helvetica, Arial, sans-serif !important;}.gridoverlay{padding:0 !important;position:relative;height:100%;overflow:hidden !important;background:none !important;}.gridoverlay .gridset{padding:0 !important;position:absolute;width:100%;height:100%;top:0;left:0;opacity:0.8; display:block;}.gridoverlay .gridset div{padding:0 !important;text-align:left;font-size:10px !important;border:1px solid #FFD800 !important;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;}.gridoverlay .gridset > div{border:none !important;height:100%;position:absolute;top:0;left:0;width:100%;}.gridoverlay div small{font-family:Helvetica, Arial, sans-serif !important;width:100%;display:block;text-align:center;font-weight:400 !important;letter-spacing: 1px !important;padding-top:0 !important;text-transform:none !important;height:22px !important;line-height:22px !important;text-style:normal !important;border-bottom:1px solid #FFD800 !important;color:#333 !important;background-color:#FFF79F !important;}.gridoverlay .gridset > div:nth-child(2){padding-top:23px !important;}.gridoverlay .gridset > div:nth-child(2) small{border-bottom:1px dashed #FFD800 !important;}.gridoverlay .gridset > div:nth-child(2) > div{border:1px dashed #FFD800 !important;}.gridoverlay .gridset > div:nth-child(3){padding-top:45px !important;}.gridoverlay .gridset > div:nth-child(3) small{border-bottom:1px dotted #FFD800 !important;}.gridoverlay .gridset > div:nth-child(3) > div{border:1px dotted #FFD800 !important;}.gridoverlay .gridset > div:nth-child(4){padding-top:67px !important;}.gridoverlay .gridset > div:nth-child(4) small{border-bottom:1px double #FFD800 !important;}.gridoverlay .gridset > div:nth-child(4) > div{border:1px double #FFD800 !important;}.gridsetoverlaywrap .noshow{display:none;}#gridscreenwidthwrap{margin:0 !important;padding:0 !important;display:none;width:100%;position:fixed !important;z-index:10000 !important;bottom:0 !important;left:0 !important;height:30px !important;opacity:0.95;border-top:1px solid #FFD800 !important;background-color:#FFF79F !important;text-align:center !important;}#gridscreenwidthwrap p{display:block;margin:0 !important;width:100% !important;max-width:none !important;font-size:12px;line-height:1;padding-top:10px !important;letter-spacing:normal !important;color:#333 !important;}#gridscreenwidthwrap #gridset-info{display:block !important;z-index:1 !important;position:relative !important;float:left !important;width:auto !important;margin-left:20px !important;}#gridset-logo{display:inline-block !imporant;margin:-4px 20px -1px 0 !important;padding:0 !important;width:81px !important;max-width:none !important;}#gridscreenwidthwrap a{color:#333 !important;text-decoration:none !important;letter-spacing:normal !important;}@media only screen and (max-width:560px){#gridscreenwidthwrap #gridset-system{display:none !important;}}#gridscreenwidthwrap a:hover{text-decoration:underline !important;}#gridscreenwidth{position:absolute !important;width:100% !important;z-index:0 !important;}#gridscreenwidth strong{text-transform:none;}', newstyles = document.createElement('style'), newwidth = document.createElement('div'), head = document.getElementsByTagName('head'), newfavicon = document.createElement('link'), newgsstyles = document.createElement('link'); newstyles.id = 'gridsetoverlaystyles'; newstyles.innerHTML = styles; newstyles.type = 'text/css'; newwidth.id = 'gridscreenwidthwrap'; newwidth.innerHTML = '

View grid system

Screen width:

'; b.appendChild(newstyles); b.appendChild(newwidth); var newwidthdisplay = (newwidth.currentStyle) ? newwidth.currentStyle.display : getComputedStyle(newwidth, null).display; newfavicon.rel = "shortcut icon"; newfavicon.id = "gridsetfavicon"; newfavicon.href = "https://gridsetapp.com/app/img/favicon.ico"; head[0].appendChild(newfavicon); if (newwidthdisplay != 'block') { newgsstyles.rel = "stylesheet"; newgsstyles.id = "gridsetstyles"; newgsstyles.href = "https://get.gridsetapp.com/9275/"; head[0].appendChild(newgsstyles); } if (areacount) { var j = areacount; while (j-- > 0) { var area = gridareas[j]; gs.buildgrid(area, j, areacount); if (window.getComputedStyle(area,null).getPropertyValue("position") == 'static') area.style.position = 'relative'; } } else { if (!b.className.match('gridsetnoareas')) b.className += ' gridsetnoareas'; gs.buildgrid(b, j, areacount); } gs.width(); gs.bind(window, 'resize', gs.width); }, buildgrid: function (area, j, showgrid) { var set = JSON.parse('{"id":"9275","name":"MIT","widths":{"960":{"width":960,"grids":{"d":{"name":"960 container (1024)","prefix":"d","width":960,"columns":{"d1":{"name":"d1","unit":"%","percent":10.40364583,"px":99.87},"d2":{"name":"d2","unit":"%","percent":10.40364583,"px":99.87},"d3":{"name":"d3","unit":"%","percent":10.40364583,"px":99.87},"d4":{"name":"d4","unit":"%","percent":10.40364583,"px":99.87},"d5":{"name":"d5","unit":"%","percent":10.40364583,"px":99.87},"d6":{"name":"d6","unit":"%","percent":10.40364583,"px":99.87},"d7":{"name":"d7","unit":"%","percent":10.40364583,"px":99.87},"d8":{"name":"d8","unit":"%","percent":10.40364583,"px":99.87}},"gutter":{"unit":"px","px":23,"percent":2.39583333},"ratio":{"name":"even","value":1}}}},"722":{"width":722,"grids":{"th":{"name":"722 container (768)","prefix":"th","width":722,"columns":{"th1":{"name":"th1","unit":"%","percent":14.58910434,"px":105.33},"th2":{"name":"th2","unit":"%","percent":14.58910434,"px":105.33},"th3":{"name":"th3","unit":"%","percent":14.58910434,"px":105.33},"th4":{"name":"th4","unit":"%","percent":14.58910434,"px":105.33},"th5":{"name":"th5","unit":"%","percent":14.58910434,"px":105.33},"th6":{"name":"th6","unit":"%","percent":14.58910434,"px":105.33}},"gutter":{"unit":"px","px":18,"percent":2.49307479},"ratio":{"name":"even","value":1}}}},"564":{"width":564,"grids":{"t":{"name":"564 container (600)","prefix":"t","width":564,"columns":{"t1":{"name":"t1","unit":"%","percent":14.59810875,"px":82.33},"t2":{"name":"t2","unit":"%","percent":14.59810875,"px":82.33},"t3":{"name":"t3","unit":"%","percent":14.59810875,"px":82.33},"t4":{"name":"t4","unit":"%","percent":14.59810875,"px":82.33},"t5":{"name":"t5","unit":"%","percent":14.59810875,"px":82.33},"t6":{"name":"t6","unit":"%","percent":14.59810875,"px":82.33}},"gutter":{"unit":"px","px":14,"percent":2.4822695},"ratio":{"name":"even","value":1}}}},"460":{"width":460,"grids":{"mh":{"name":"460 container (480)","prefix":"mh","width":460,"columns":{"mh1":{"name":"mh1","unit":"%","percent":22.7173913,"px":104.5},"mh2":{"name":"mh2","unit":"%","percent":22.7173913,"px":104.5},"mh3":{"name":"mh3","unit":"%","percent":22.7173913,"px":104.5},"mh4":{"name":"mh4","unit":"%","percent":22.7173913,"px":104.5}},"gutter":{"unit":"px","px":14,"percent":3.04347826},"ratio":{"name":"even","value":1}}}},"300":{"width":300,"grids":{"m":{"name":"300 container (320)","prefix":"m","width":300,"columns":{"m1":{"name":"m1","unit":"%","percent":30.22222222,"px":90.67},"m2":{"name":"m2","unit":"%","percent":30.22222222,"px":90.67},"m3":{"name":"m3","unit":"%","percent":30.22222222,"px":90.67}},"gutter":{"unit":"px","px":14,"percent":4.66666667},"ratio":{"name":"even","value":1}}}}},"prefixes":{"index":["d","th","t","mh","m"],"960":["d"],"722":["th"],"564":["t"],"460":["mh"],"300":["m"]}}'), gridwrap = document.createElement('div'), gridinner = (showgrid) ? '
' : '
', awidth = area.clientWidth, apadleft = (parseFloat(gs.getstyle(area, 'padding-left')) / awidth) * 100, apadright = (parseFloat(gs.getstyle(area, 'padding-right')) / awidth) * 100; if (showgrid) gridwrap.className = 'gridsetoverlaywrap'; else gridwrap.className = 'gridsetoverlaywrap'; for (w in set.widths) { var width = set.widths[w], hides = ''; for (p in set.prefixes) { if (p != w && p != 'index') hides += set.prefixes[p][0] + "-hide "; } gridinner += '
'; for (j in width.grids) { var grid = width.grids[j], showreg = new RegExp('(^| )' + grid.prefix + '-showgrid( |$)'); if (!showgrid || area.className.match(showreg)) { gridinner += '
'; for (k in grid.columns) { var col = grid.columns[k]; gridinner += '
' + col.name + '
'; } gridinner += '
'; } } gridinner += '
'; } gridinner += '
'; gridwrap.innerHTML = gridinner; area.appendChild(gridwrap); }, bind : function (t, e, f) { if (t.attachEvent) t.attachEvent('on' + e, f); else t.addEventListener(e, f, false); }, prevent : function (e) { if (e.preventDefault) e.preventDefault(); else event.returnValue = false; }, getstyle : function (t, p){ if (t.currentStyle) return t.currentStyle[p]; else if (document.defaultView && document.defaultView.getComputedStyle) return document.defaultView.getComputedStyle(t, "").getPropertyValue(p); else return t.style[p]; } }; gs.init();