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

*/

EDIT:

I forgot to mention that the verison of the .baseline class that I'm using doesn't set have the font-size: 1em;. Because your .baseline sets the font-size, I don't think you'd need to worry about using rem.

For my latest tests, I wanted to be able to apply the .baseline class to modules without it affecting a font-size that might already be set on said module. :)

With that said, my below comments will probably make more sense.

---

What do you think about using rem for:

background-size: 100% 1.5rem;

Here's a situation where I found the rem unit to be helpful:

CSS:

(Using normalize.css to normalize everything) and then:

/**
 * Indicates that its content is preformatted and that this format must be preserved.
 * 
 * @see https://github.com/twitter/bootstrap/blob/master/less/code.less
 */

pre {
    font: .813em/1.845018 Monaco, Menlo, Consolas, "Courier New", monospace;
    color: #333;
    background-color: #ddd;
    background-color: rgba(0, 0, 0, .1);
    border-width: 1px; /* .063em */
    border-style: solid;
    border-color: #ccc;
    border-color: rgba(0, 0, 0, .15);
    margin: 1.782018em 0;
    padding: .922509em;
    display: block;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre;
    overflow: auto;
}

HTML:

<pre class="baseline">
var q2 = oMQ.addQuery({
    context               : ['small', 'medium'],
    call_for_each_context : false,
    match                 : function() { console.log('MATCH: small/medium'); },
    unmatch               : function() { console.log('UNMATCH: small/medium'); }
});
</pre>

From what I can tell, using rem made it so the "local" .baseline on the <pre> isn't affected by the <pre>'s font size.

I suppose this would be a minor change to your code… Also, this would not be an issue if one was not using the "local" baseline grid approach.

What do you think?

Cheers,
Micky

Another update:

Inspired by your comment found in this Gist's description:

Perhaps an overlay version can be developed from this.

I quickly slapped this together:

/**
 * Baseline grid class.
 * It simulates a baseline grid based on `em`/`rems` which will allow you to size according to your site's `font-size`.
 *
 * @see https://gist.github.com/4277585
 * @see http://advent2012.digitpaint.nl/13/
 * @see http://stackoverflow.com/a/8905262/922323
 * @see http://css-tricks.com/browser-support-pseudo-elements/
 */

.baseline { position: relative; }
    /* Grid overlay: */
    .baseline:before {
        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);
        background-size: 100% 1.5rem;   /* Match base `line-height`. */
        background-position: 0 0;       /* Put line adjustments here. */
        background-origin: content-box; /* Regardless of padding, background will begin in the corner of the box. */
        background-attachment: local;   /* For scrolling. */
        width: 100%;
        display: block;
        position: absolute;
        top: 0;
        bottom: -1px; /* Allows for the bottom-most border to show. */
        z-index: 999; /* Above all other content. */
        content: "";
        pointer-events: none; /* The element is never the target of mouse events. */
    }
    .baseline.half:before { background-size: 100% .75rem; } /* Half base `line-height`. */
    .baseline.double:before { background-size: 100% 3rem; } /* Double base `line-height`. */
    /* Add a faux border to child elements to view where they begin/end in relationship to baseline: */
    .baseline * {
        -webkit-box-shadow: inset 0 0 0 1px rgba(255, 0, 0, .5);
        box-shadow: inset 0 0 0 1px rgba(255, 0, 0, .5);
    }

I haven't had a chance to cross-browser test (just been using Firefox 17.0.1 on Mac 10.8.2).

What do you think?

As I've said before, my version is a tad different than yours... As you can see, I removed the font-size: 1em; and background: none; properties from the .baseline class.

I was also playing with the .baseline * class... Just experimenting box shadows... It's not a dashed line, but I kinda like how it looks (I wish it were easy to apply an inset box-shadow to the top and bottom only).

Anyway, what do you think?

Micky

Hey!
Sorry if I miss a few things, been kinda busy lately.

I'll start by saying that the overlay baseline is awesome. I didn't think it'd be that easy. I played with similar ideas before but always ran into issues, i.e. the box with the baseline would not take the full height or would stop at the end of the screen. But this seems to be working really well (Chrome v23 on Mac). Like you said it still needs to be tested in other browsers. I'll play with it a little more and give you some feedback.

Now, since you brought up CSS3 support for IE. Be sure to check out http://selectivizr.com/ we use it at work and it allows me to use CSS3 features with almost no worries. However keep in mind that it uses JavaScript and requires an additional library such as jQuery.

Also, I liked the concept of creating identical classes for headings. I'll have to experiment with that it may solve some issues I've seen. When do you use it? Did you learn about it online? I'd like to know if there's any background info.
I was also wondering about the 100.01% font size. why the .01 ?

I haven't had the chance to play with rems yet but I'll try to look into that in the near future.

I think after the first week of January I'll have a little more time to focus on writing a post, I'll let you know!

Alright, gotta go for now but I'll get back to you soon.

Take care!

Carlos

Sorry if I miss a few things, been kinda busy lately.

No worries at all! I completely understand. :)

I'll start by saying that the overlay baseline is awesome.

Lol, thanks! Honestly, I don't deserve any credit, I just made a mashup of your .baseline and this technique here (I've most recently made use of that technique in a column border class that I created for a simple responsive "grid system" I built for my day job); but yah, it's definitely a cool and useful technique… The only drawback is that it's only compatible with IE > 7 (without any sort of JS polyfill).

I didn't think it'd be that easy. I played with similar ideas before but always ran into issues, i.e. the box with the baseline would not take the full height or would stop at the end of the screen. But this seems to be working really well (Chrome v23 on Mac). Like you said it still needs to be tested in other browsers. I'll play with it a little more and give you some feedback.

Cool! Glad to hear it's working for you too! :)

I would not be surprised if you found some bugs though…

For example, I noticed a spacing issue when I applied it to the <pre> class that I posted in my previous comment (I think it had to do with the padding applied to the <pre>). Unfortunately, I haven't had time to try and fix. Fortunately, the way I've been using the :before version of .baseline is on the <div> or <section> wrappers around my "local" modules; typically, for me, these wrappers don't have any, or very little, styling applied so I'm not so worried about the weirdness I discovered with the <pre> styles.

I've also tested it on the <body> and it seems to work pretty well there too, though I do have these global styles applied:

html {
    height: 100%; /* Expand to height of browser window. */
    overflow-y: scroll; /* Force scrollbar in non-IE. */
}
body {
    /* Initial height of `<html>`, but will expand taller if necessary: */
    min-height: 100%; /* Compliant browsers. */
    _height: 100%; /* IE6 treats `height` as `min-height`. */
}

Now, since you brought up CSS3 support for IE. Be sure to check out http://selectivizr.com/ we use it at work and it allows me to use CSS3 features with almost no worries. However keep in mind that it uses JavaScript and requires an additional library such as jQuery.

Thanks for linkage! I'll play around with that. :)

I usually try to avoid extraneous libs, but selectivizr seems pretty useful (I've seen it talked about over the last couple years, but never used it for any projects).

Also, I liked the concept of creating identical classes for headings. I'll have to experiment with that it may solve some issues I've seen. When do you use it? Did you learn about it online? I'd like to know if there's any background info.

Oh, for sure. Again, I can't take any credit. That's an OOCSS technique/concept.

I've updated that code with a CSS comment doc block that helps to explain the code via descriptions and linkages. For your convenience, here's the links:

• Headings question: Basic concept/usage?
• Don’t Style Headings Using HTML5 Sections
• OOCSS: heading.css
• Pragmatic, practical font sizing in CSS

I was also wondering about the 100.01% font size. why the .01 ?

Oh, sure! It's an older technique that I've been using off and on recently. Here's some links:

• Is using font-size: 100.01% still needed, and for what browsers?
• body { font-size: 100.01%; } vs body { font-size: 100%; }?
• Internet Explorer Win Bugs: Inheritance

With that said, I don't think there's a huge need for 100.01% these days, so I may switch back to using font-size: 100%.

I haven't had the chance to play with rems yet but I'll try to look into that in the near future.

Yah, the rem (root + em) unit is interesting. Here's some links:

• Type study: Sizing the legible letter
• Font sizing with rem
• Preserving vertical rhythm with CSS and jQuery
• Gridlover is the tool to establish a type system with modular scale and vertical rhythm to build upon.

Note: The last two links above are examples of folks using rems for vertical rythm.

I think after the first week of January I'll have a little more time to focus on writing a post, I'll let you know!

Awesome! I'm totally looking forward to reading what you post! :)

Alright, gotta go for now but I'll get back to you soon.

Ditto! See you next year!

Happy New Year!!!

Cheers,
Micky

btw, this is mostly a note to myself.
In the past i had a baseline with a css3 switch. i'll work on adding that.

CSS3 switch sounds interesting! :)

I've updated my overlay version with a new property pointer-events... Without this property, links below the overlay aren't clickable. Unfortunately this property is not totally cross-browser compliant... I was thinking about maybe hiding the grid overlay or setting its grid z-index to a negative value on :hover. On the other hand, maybe I'm making a mountain out of a molehill here? :D

I was gonna suggest the same. Pointer events is awesome but as you mentioned it is not fully supported. After thinking more about it I think the css3 switch may not be such a good idea, it'd be cool but it would have to be added as markup as well making this grid solution more annoying. However one option would be to turn it on/off via :hover.

I've done some modifications to your grid which adapt to the way I work

/* Overlay Baseline */
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 */
}

The biggest change is the switch from .baseline to simply body. The way I'm using it now is by dropping the class in the stylesheet, or in the Dev tools, and commenting it on/off. However I understand that the way you're using it is more modular so that it can be dropped in different elements; in which case I do agree that having the baseline class, along with the line-height classes, is the way to go.

While testing it at work the bottom: -1px was adding an empty pixel at the bottom which I found a little annoying. I guess if the height of the page matches the grid then it would make sense but overall I didn't think it was necessary. Now, since those properties were setting the height I had to add height:100% I don't know how this will affect other browsers yet.

This version includes the on hover switch. I'm still getting used to it, it's not all that versatile since every time I scroll it shows the grid even if I don't want to, unless I use the keyboard. However it is very nice not having to switch on/off the grid via comments, I simply hover out of the window and it's gone. I'll continue using it for now.

Oops, Just saw your other comment. Thanks for the links!

Hi Carlos!

I was gonna suggest the same. Pointer events is awesome but as you mentioned it is not fully supported. After thinking more about it I think the css3 switch may not be such a good idea, it'd be cool but it would have to be added as markup as well making this grid solution more annoying. However one option would be to turn it on/off via :hover.

Yah, that seems to make sense to me too! Thanks updated code snippet, that's pretty cool! I'm going to play with it now. :)

The biggest change is the switch from .baseline to simply body. The way I'm using it now is by dropping the class in the stylesheet, or in the Dev tools, and commenting it on/off. However I understand that the way you're using it is more modular so that it can be dropped in different elements; in which case I do agree that having the baseline class, along with the line-height classes, is the way to go.

Interesting! I haven't completely committed my workflow to "modules"… I'm kinda trying to build something I can use for a simple personal site, to something that I can adapt to a larger newspaper website with lots of coming/going news content… For my personal site, the <body> approach makes a lot of sense, but for my work's site, the modular approach seems way more sane. :D

While testing it at work the bottom: -1px was adding an empty pixel at the bottom which I found a little annoying. I guess if the height of the page matches the grid then it would make sense but overall I didn't think it was necessary. Now, since those properties were setting the height I had to add height:100% I don't know how this will affect other browsers yet.

That makes sense… I had added the extra pixel because the last line of the baseline would not show when applying it to "modules" on the page. I had not tested thoroughly on the <body> tag. :(

This version includes the on hover switch. I'm still getting used to it, it's not all that versatile since every time I scroll it shows the grid even if I don't want to, unless I use the keyboard. However it is very nice not having to switch on/off the grid via comments, I simply hover out of the window and it's gone. I'll continue using it for now.

That's cool! I was kinda getting tired of commenting out the CSS (or adding an x in front of the class name).

I'm looking forward to testing your code. :)

Idea: Multiple colored baselines. Say you want to have the .75em baseline but would like to see how the elements line up to the true 1.5em bl.

Check it out:

http://jsfiddle.net/zPrwS/3/

In this case I've added 1/4, 1/2 and the full baseline. I think one can work on improving the colors but you get the idea.

In this case I've added 1/4, 1/2 and the full baseline. I think one can work on improving the colors but you get the idea.

WHOA! That's AWESOME!!!!!!!!!!!!!!

Carlos, you ROCK!!!! :)

I can't wait to test the latest version of your code (thanks for updating the gist).

The following is mostly a rant that i need to get out of my head regarding the concept of a baseline grid on the web.

I need some more feedback on the overall idea of baselines in websites. I love the concept but perhaps it's too impractical. I think it may be worth the amount of work it takes but I don't think it's something that can be easily implemented into any site. And while creating a boilerplate such as BaselineCSS.com is a noble idea I often find myself needing more options which are often limited by a boilerplate. Perhaps a boilerplate for something such as this is just not justifiable. Maybe all we can do is give advice on how to do certain things and some steps to follow but not a modular solution that can be just copy n pasted.

Programs such as InDesign make the idea of a baseline easy as it automatically shifts the text to sit ON the baseline, but unless this is possible via JS, one would resort to a faux baseline where elements don't actually sit on it OR a few hours of work to figure out how much each element should be offset, e.g. top:.15em. Now, offsetting the text will only work when the design stays as it was delivered which may not be ideal in all situations, say if you worry about people zooming in/out, there may be some discrepancies. Now perhaps that's going too far and it's unnecessary, idk. I can see someone making the argument that it should always work; which, as we know, it's sometimes nothing more than wishful thinking in our world.

For now I have accepted that obeying a true baseline is not practical. However we CAN resort to a one half/third/quarter sub-baseline. Where we can make sure that the spacing between elements follows AT LEAST some pattern and will at some point, depending on the length of the page, fall back within the 'true' baseline.

I would like to emphasize the idea of a 1/3 sub-baseline (let's call it that for now) Perhaps this allows some more flexibility in some cases and it works fairly well if one uses a 24px baseline.

Nonetheless an implementation of this kind will require some researches and deep involvement with the site. Taking an existing site and updating it to follow a baseline may(most likely) not be possible overnight and in some cases it will require some deep reconfiguration of the CSS which, in turn, will result into a whole lot of work depending on the number of pages.

Thoughts?

SATURDAY REPLY:

Hi Carlos! Just FYI, I'll be back later tonight with some thoughts. :)

---

MONDAY UPDATE:

Ugh, sorry Carlos, the weekend got away from me. :(

I plan on replying more thoroughly as soon as I can find some time to break away from my day job duties... In the meantime, I was wondering if you have a demo, or demos, of the BLG experiments you've been working on? I'd like to see where you've been successful vs. where you think you haven't (or, at least see examples of the sticking points you've run into).

Also, not sure if this will be of any help, but I've recently realized that some folks are using "modular scale" instead of a baseline grid. Some links/examples:

Baseline grid or modular scale? Both? Neither?

Specifically, Joni's reply:

I use both of them. Here's how.

1. I pick a base font-size and line-height.
2. I create a baseline grid based on the line-height.
3. I create a modular scale based on the font-size.
4. I round (or "snap") the results from the modular scale to fit the baseline grid, much like Gridlover does.

Two special things I do with the baseline grid:

1. I rarely use just line-height as the unit. Instead, I split it: (line-height/2), (line-height/3) or (line-height/4). I think of this as changing the "resolution" of the baseline grid. Here's an example of Aen Tan applying this method to iOS: aentan.com
2. I use this split baseline grid horizontally too. It's great for determining things like paddings for buttons and widths for columns.

This site offers a useful tool:

Modular Scale

From what I have learned:

• Related ALA article here.
• Ignore % of 13 unless you're using YUI fonts/resets (more info here).
• Important number:

I’ve found that a variety of things can serve as an important number. The size at which caption text looks best, for instance, or a large number like the width of a piece of media—if the project at hand mandates ads or embedded videos, for instance—ensures that something about those elements resonates with the layout as a whole.
– More Meaningful Typography

Other good reads (found linked to from the modularscale.com website):

• Composing the New Canon: Music, Harmony, Proportion
• Tips for choosing a scale

---

With all that said, modular scale is, obviously, not a new term/concept... I just wanted to mention it in this thread of ours, as a "scale" could be used in place of (or, in conjunction with) a baseline grid; the beauty of, from what I understand, using a modular scale is that the focus is more on using numbers that fit on the chosen scale vs. line up on a particular baseline.

Me personally? I still like using a baseline grid. Though, admittedly, my experiments have been focused on lining up "modules" on "local" baselines; I think I'd go crazy if I had to line up elements to a global baseline.

Also, there's something about using just a modular scale that doesn't appeal to me... I can't put my finger on it yet, but my gut is telling me to stick with the baseline (and utilize the modular scale when needed).

The key words (concepts?) for me have been "local" and "modules".

Anyway, not sure if you'd be interested, but here's what I've been working on:

mhulse / bassline

There's not much there as I haven't had a ton of free time to work on it... Day job and all. :D

I have yet to impliment the new version of your baseline CSS, and I've been wanting to change the baseline when I get down to "mobile" sizes. In other words, I have a lot more work to do.

If you scroll down to the bottom of the demo page, you can see an example of a "local" baseline "module".

If you view this css (also posted below), you can see where I was playing with a "local" modular scale for the heading tags (96px being the "important number", which is the largest heading size).

/**
 * Represent headings and subheadings. These elements rank in importance
 * according to the number in their name. The `<h1>` element is said to
 * have the highest rank, the `<h6>` element has the lowest rank, and two
 * elements with the same name have equal rank.
 *
 * Note: The `.h1`-`.h6` classes should be used to maintain the
 * semantically appropriate heading levels.
 *
 * Attention: Classes NOT for use on non-headings.
 *
 * @see https://groups.google.com/d/topic/object-oriented-css/GE1uzU2Bu48/discussion
 * @see http://www.stubbornella.org/content/2011/09/06/style-headings-using-html5-sections/
 * @see https://github.com/stubbornella/oocss/blob/master/core/heading/heading.css
 * @see http://csswizardry.com/2012/02/pragmatic-practical-font-sizing-in-css/
 */

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin: 0; }

/**
 * (16px = base font size) * (6 heading levels) = (96px = "important number")
 * Scale: 1:2 octave.
 *
 * @see http://modularscale.com/scale/?px1=16&px2=96&ra1=2&ra2=0
 */

h1, .h1 {
    font-size: 6em; /* 96px */
    line-height: 1.2; /* 7.2 / 6 */
}
h2, .h2 {
    font-size: 4em; /* 64px */
    line-height: 1.35; /* 5.4 / 4 */
}
h3, .h3 {
    font-size: 3em; /* 48px */
    line-height: 1.2; /* 3.6 / 3 */
}
h4, .h4 {
    font-size: 2em; /* 32px */
    line-height: 1.8; /* 3.6 / 2 */
}
h5, .h5 {
    font-size: 1.5em; /* 24px */
    line-height: 1.2; /* 1.8 / 1.5 */
    padding: .6em 0; /* 1.2 / 2 */
}
h6, .h6 {
    font-size: 1em; /* 16px */
    line-height: 1.8; /* 1.8 / 1 */
    padding: .9em 0; /* 1.8 / 2 */
}

NOTE TO FUTURE READERS: All of my repository related links, and code, may change over time as I work on things.

---

I have to get back to work for now. Not sure if any of what I have said is helpful to your endeavors; I mostly wanted to point out the modular scale as an alternative (or, an addition to) baseline grids.

I'll be back if I think of anything else... I'll hopefully have some time this weekend to continue working on my baseline experiments (and, in turn, have something more meaningful to contribute to this conversation). :)

Have an awesome day!

Cheers,
Micky

Hey man, sorry I haven't gotten back to you. I'll try to do so over the weekend.

Hey! No rush at all! I know how that goes. Take your time. :)

Hey Micky,
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.

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.

Btw, nice job on the bassline project and thanks for putting me in the credits ;) 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. 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 ;)

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/]

Anyway, let me know how your project is going.

Oh hey, one more thing. On the hover switch for the baseline, here's something you may wanna try. This will activate the outline from the third child on, leaving the body and top most elements untouched, in some cases it works well, you may wanna add another asterisk.

body:hover * *:hover{background:none !important;outline:1px dashed rgba(100%,0%,0%,.5)}

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