Show grid with keypress

If you read my first article on this blog, you’ve probably pressed Ctrl-G to show my baseline and vertical grids in the background. If not, go ahead, try it right now (if you’re using a modern browser, that is.).

I use this on most of the sites I make, so I can satisfy my obsessive need to line everything up evenly. Here’s how I do it (jQuery required):

Put this in your stylesheet

.grids .grid, .grids .content  {
  background-image: 
    linear-gradient(
      bottom, 
      rgba(0, 0, 0, 0.07) 0, 
      transparent 0.0625rem), 
    linear-gradient(
      left, 
      transparent 1.9375rem, 
      rgba(0, 0, 0, 0.03) 2.0625rem, 
      rgba(0, 0, 0, 0.03) 6rem, 
      transparent 6.0625rem, 
      transparent 7.9375rem, 
      rgba(0, 0, 0, 0.03) 8rem, 
      rgba(0, 0, 0, 0.03) 8.0625rem);
  background-size: 12rem 2rem;
  background-position: center top;
}

Add a class “grid” to the container elements you want to show the grid in. Adjust to fit your grids, and don’t forget vendor prefixes!

Then use this jQuery plugin and code

// Plugin: Ctrl key press
	$.ctrl = function(key, callback, args) {
	    $(document).keydown(function(e) {
	        if(!args) args=[]; 
	        if(e.keyCode == key.charCodeAt(0) && e.ctrlKey) {
	            callback.apply(this, args);
	            return false;
	        }
	    });        
	};
// Show BG grid
	$.ctrl('G',function() {
		$('body').toggleClass('grids');
	});

Easy as pie!

Ctrl-Key plugin courtesy of Ganeshji Marwaha.

Comments? Tweet me!