/* This gist was inspired by DigitPaint [ http://advent2012.digitpaint.nl/13/ ] */ This is a baseline grid created using some (perhaps all) of the new CSS background properties. it simulates a baseline grid based on ems which will allow you to size according to your site's font size. A clear disadvantage is that it is limited to be a background.…

css-baseline-grid.css

/* ---------------------------------------------------
  Production Versions ( Minified )
--------------------------------------------------- */
/* Background */
/**/ .baseline{font-size:1em;background:none;background-image:-webkit-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-image:linear-gradient(rgba(0,0,0,0.2) 1px,transparent 1px);background-size:100% 1.5em;background-origin:content-box;background-attachment:local}
/**/ .baseline *{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)}

/* Overlay + Hover switch */
/**/ body{position:relative}body:hover:before{width:100%;height:100%;display:block;content:"";position:absolute;z-index:9999;pointer-events:none;background-size:100% .75em;background-origin:content-box;background-attachment:local;background-image:-webkit-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);background-image:-moz-linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px);background-image:linear-gradient(rgba(0,255,255,.75) 1px,transparent 1px)}
/**/ body:hover *{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)}

/* ---------------------------------------------------
  Background Baseline - Dev
--------------------------------------------------- */
.baseline {
  font-size: 1em;
  background: none; /* Removes any pre existing background */
  background-image: -webkit-linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px);
  background-image: -moz-linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px);
  background-image: linear-gradient(rgba(0,0,0,0.2) 1px, transparent 1px);    
  background-size: 100% 1.5em;    /* line-height */
  background-origin: content-box; /* regardless of padding, background will begin in the corner of the box */
  background-attachment: local;   /* for scrolling */
}

/* For Debugging  */
.baseline * {
  background: none !important;            /* Remove all backgrounds */
  outline:1px dashed rgba(100%,0%,0%,.5); /* Add a dashed outline around elements to view where they begin/end in relationship to baseline. */
}

/* ---------------------------------------------------
  Overlay Baseline + Hover switch - Dev
   - Thanks to mhulse for the overlay update!
--------------------------------------------------- */
body { position:relative; }
body:hover:before {
    width: 100%; height: 100%;         /* sizes element */
    display: block; content: "";       /* displays element */
    position: absolute; z-index: 9999; /* positions element */
    pointer-events:none;               /* click through overlay */

    background-size: 100% .75em;       /* sets baseline height */
    background-origin: content-box;    /* for correct display of grid */
    background-attachment: local;      /* for scrolling */

    background-image: -webkit-linear-gradient(rgba(0, 255, 255, .75) 1px, transparent 1px);
    background-image: -moz-linear-gradient(rgba(0, 255, 255, .75) 1px, transparent 1px);
    background-image: linear-gradient(rgba(0, 255, 255, .75) 1px, transparent 1px);
}

/* Debugging */
body:hover * {
  background: none !important;            /* removes all backgrounds */
  outline:1px dashed rgba(100%,0%,0%,.5); /* red dashed outline around elements */
}

/* ---------------------------------------------------
  Deprecated
------------------------------------------------------

Shifts lines to bottom of type. { background-position: 0 -0.6em; }

*/

That's awesome! I'm looking forward to using it in the coming weeks. :)

(P.S. I've tried commenting in the last week and there was something wrong on GitHub's end ... Sorry for my late reply.)