12 column full width desktop website overlay for web developers Bookmarklet

Add the javascript below to the location section of a new bookmark. Clicking on the bookmark will display a 12 column overlay over the current web page. Adjust variables as necessary.

Source (gist.github.com)


Download Bookmarklet:


View Bookmarklet Code:

Bookmarklet Source Code:

javascript%3Avar%20columns%3D12%0D%0AgapWidth%3D16%0D%0AcolumnWidth%3D80%2Copacity%3D0.2%0D%0Acolor%3D%27%23ff2a84%27%2CpageWidth%3Dcolumns*columnWidth+%28columns-1%29*gapWidth%2Cgrid%3D%27%27%3Bfor%28var%20i%3D0%3Bi%3Ccolumns%3Bi++%2Cgrid+%3D%27%3Cdiv%3E%3C/div%3E%27%29%3Bdocument.getElementsByTagName%28%27BODY%27%29%5B0%5D.innerHTML+%3D%27%3Cstyle%3E%23grid-container%7Bbottom%3A0%3Bleft%3A0%3Bposition%3Afixed%3Bright%3A0%3Btop%3A0%3Bz-index%3A9999999%7D%23grid%7Bheight%3A100%25%3Bmargin%3A0%20auto%3Bwidth%3A%27+pageWidth+%27px%7D%23grid%20div%7Bbackground%3A%27+color+%27%3Bfloat%3Aleft%3Bheight%3A100%25%3Bopacity%3A%27+opacity+%27%3Bfilter%3Aalpha%28opacity%3D%27+opacity*100+%27%29%3Bwidth%3A%27+columnWidth+%27px%3Bmargin-left%3A%27+gapWidth+%27px%7D%23grid%20div%3Afirst-child%7Bmargin-left%3A0%7D%3C/style%3E%3Cdiv%20id%3D%22grid-container%22%3E%3Cdiv%20id%3D%22grid%22%3E%27+grid+%27%3C/div%3E%3C/div%3E%27%3B%27grid%20enabled%27%3B%7D%29%28%29%3B


Rate it:


Tags:

Comments

Comments so far. Add yours.