/* 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; }

*/

Thanks a lot for those links, I def agree with Joni's comment. That's exactly what I was going for in my previous comment. Not sure I would call it baseline resolution but that's a minor detail.

Great minds think alike! :)

I can't say I've been working a lot on this lately. I took some time to work on a small js project but I'm trying to keep an eye on this as well.

Ditto. Pretty much the same boat here. I've been back and forth working on various projects myself.

Btw, nice job on the bassline project and thanks for putting me in the credits ;)

Lol, I was hoping you wouldn't mind the shout out.

Not that my repo is useful to anyone other than myself ... I just wanted to make sure anyone stumbling along GitHub would know where (and who) to look for when it comes to all the juicy details. :)

One thing you may want to keep an eye on are the list items. I understand that for baseline purposes it makes sense to make them as even as possible; however from a readability point of view, I think it's better to emphasize the difference between items.

Oh, good tip! Yah, I was having some issues with my lists for sure (especially at the mobile sizes).

This can be achieved by adding top/bottom margin to the lis. In the project I had been working on I added half the baseline which worked nicely with the model I had. At work we made the line height tighter so that we wouldn't need to add as much margin. I think so far you don't have that problem but neither did I at the beginning ;)

Interesting! I think I understand.

Just to clarify, are you saying that you like to put more space between list elements (say, more than the line-height that's applied to <li> items)? Sorry, I guess I'm having a hard time visualizing.

Actually, I ended up boosting my overall font-size/line-height to 16px/28px:

Base font size = 16px or 100% or 1em.
Base line height = 28px or 175% or 1.75em.

... because I was having issues with the 24px line-height for when it cames to things like <code>. I kinda like the airiness of 28px.

Hey did u hear about the new plans for CSS? I can't wait to get my hands on the parent selector.
[http://coding.smashingmagazine.com/2013/01/21/sneak-peek-future-selectors-level-4/]

Oooh, sick! I had not seen that article or read anything about CSS4. Thanks for linkage!

Anyway, let me know how your project is going.

Sure thing. Ditto.

I'm actually going to apply some of these concepts to a larger site over the next few weeks; I have my fingers crossed. I'll let you know how it goes. :)

Btw, not sure if you'd find this interesting, but the 2012 Wordpress template is using vertical rythm:

http://core.trac.wordpress.org/browser/trunk/wp-content/themes/twentytwelve/style.css

Looks like they're using a CSS preprocessor to do some of the math. That's my long-term goal is to convert my bassline project into LESS/SASS/other (and Grunt.js or Yeoman or other), so I can automate the math!!! That would make life so much easier! :D

Keep me posted and I'll do the same.

Cheers,
Micky

I kinda got derailed from ems and baselines:

https://github.com/cballenar/emzy

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.)