In-browser Photoshop-like guides. After designing in browser for a little while there's been a few times that I wished I had guides in the browser so I decided to see how this worked out. Test page: http://jsbin.com/uHujOyo/3/edit

browser-guides.css

.guides {
  div {
    cursor: move; 
    content: ' ';
    display: block;
    position: fixed; }
  #x { 
    top: 50%; 
    width: 100%; height: 1px;
    background: cyan; }
  #y { 
    left: 50%; 
    height: 100%; width: 1px;
    background: cyan; } }

browser-guides.js

// Guides
// Requires jQuery & jQuery UI (draggable)
$('body').append('<div class="guides"><div id="x"></div><div id="y"></div></div>');
$('#x').draggable({ axis: 'y' });
$('#y').draggable({ axis: 'x' });