CSS prototyping bookmarklet

grid.js

javascript:(function(){s1=document.createTextNode('.guidesOn::before { content:""; position:fixed; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADIAAAAyCAYAAAAeP4ixAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAACxEAAAsRAX9kX5EAAAAZdEVYdFNvZnR3YXJlAFBhaW50Lk5FVCB2My41LjVJivzgAAAAyUlEQVRoQ%2B2abQqAIBBEPW1X6CzdqTv1RUFIipi2o72gPyXV7uybKci5wDZM8xI6dz%2Buvs6pP2Dq81GI2qiiiJkiOzQ97EGHTXUF9XUwYsaI2o1LjyqjpaYwiqDI2YFs2HtI9Wjx2Z0R%2B1ADdmB%2FC7taB0uzCSNqCqOImSIkeyW7xLXMZvqjdzJcS01hFEGRSnbe3miR7JVGgWRXcxkUQRFgj%2F8Y8htGtkJHL%2FvGaGtKd6bU9Z4C%2FCiEZDeCPahIa%2FbbDSNX433mVkIrV5rTnhDyAAAAAElFTkSuQmCC) 50% 0; z-index:1; top:0; right:0; bottom:0; left:0; opacity:.3; pointer-events:none; } * { -webkit-user-modify: read-write; word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; } a { -webkit-user-modify: initial; }');s2=document.createTextNode('#a1_z { background-color: #fff; background-color: rgba(255,255,255,.8); float: left; position: fixed; z-index:2; padding: 3px; border-bottom: 1px solid; border-right: 1px solid; top: 0; left: 0}');css=document.createElement('style');css.type='text/css';css.media='screen';document.getElementsByTagName('head')[0].appendChild(css);css.appendChild(s1);css.appendChild(s2);div=document.createElement('div');div.id='a1_z';input=document.createElement('input');input.type='checkbox';input.checked='checked';label=document.createElement('label');label.innerHTML=" Toggle Grid ";div.appendChild(input);div.appendChild(label);body=document.getElementsByTagName('body')[0];first=body.firstChild;document.body.className='guidesOn';body.insertBefore(div,first);function toggleGuides(){var oldClasses=document.body.className;var newClasses=oldClasses.replace(/\s*guidesOn\s*/,'');input.checked='';if(oldClasses==newClasses){newClasses+=' guidesOn';input.checked='checked';}document.body.className=newClasses;}input.onclick=toggleGuides;window.addEventListener('keydown',function(e){if(e.metaKey&&(e.keyCode==186||e.keyCode==59)){e.preventDefault();toggleGuides();}},false);})();

Adapted from http://www.css-101.org/articles/trick-for-rapid-prototyping/

Modifications: cropped (for bookmarklet size) and encoded grid.png as data-uri; added toggle button

Webkit only

Fiddle: http://jsfiddle.net/TbzQp/8/

BM generator: http://ted.mielczarek.org/code/mozilla/bookmarklet.html

data-URI Generator: http://software.hixie.ch/utilities/cgi/data/data

If you change the main class to be body.guidesOn::before instead of just body::before then you can include this bit of JavaScript which will let you toggle the grid on and off using CMD + ; just like the show/hide guides command in Photoshop:

window.addEventListener(
    'keydown',
    function (e) {
        if (e.metaKey && (e.keyCode == 186 || e.keyCode == 59)) {
            e.preventDefault();
            var oldClasses = document.body.className;
            var newClasses = oldClasses.replace(/\s*guidesOn\s*/, '');
            if (oldClasses == newClasses) {
                newClasses += ' guidesOn';
            }
            document.body.className = newClasses;
        }
    },
    false
);

@zachstronaut why didn't I think of that? updated.

Big fan of your site. Thanks for the tip!

Any chance we can add the hotkey for Windows? Ctrl+'

I tried changing it to
if (e.ctrlKey && (e.keyCode == 192 || e.keyCode == 39)) {
But this doesn't seem to work :/

I think it is 222 for single quote.

Unfortunately that's still not doing the trick :/

if (e.metaKey && e.keyCode == 222) {

that doesn't work?

Nope. I wonder if Chrome just doesn't allow this kind of interaction on Windows?