Stafford Brooke

Traditionally achieving a nice vertical rhythm across a web page has required a good bit of knowledge about typography, just as much math, and in the end your still running around tweaking numbers to get things perfect. Compass features a very flexible vertical rhythm module that aims to make your life a lot easier.

Getting Started

To use the module, first you will need to ensure that have compass all set up and have included the vertical rhythm module compass/typography/vertical_rhythm. If you haven’t done this I’m sure compass will let you know.

Next you have to add a couple declartions to your SCSS/SASS. If you follow Compass’s best practices, it seems like your _base.scss would be a great place to put these declarations.

$base-font-size:16px;
$base-line-height:24px;
@include establish-baseline;

The first two lines are self-explanatory and well documented. The third is a little different. The establish-baseline mixin is used to set up the baseline for the document. Usually in compass you use in conjunction with selectors. In this case the mixin is targeting html > body so using anywhere else really doesn’t work. For instance if you tried for on ‘container’ class it would produce a css declaration targeting .container html > body, and that isn’t helping anyone.

Giving things more space

So after the initial setup you should notice a that your base font size and line height have been set. Now we can set up leading and trailing spacing for elements. Let’s put some space between each paragraph to make things more readable.

p {
  @include trailer(1);
}

What we have done here is add one line of space after each paragraph in our document. We could add space before each paragraph using @include leader(1). These mixins basically add margin the the element using the rhythm function. This rhythm function calculates a measurement in ems based on line height and font size and the number of lines requested.

Setting boundaries

While space is great for readability and chunking. Sometimes it isn’t enough. Sometimes we have to draw some lines. With the vertical rhythm module we can do this without having to keep up with pixel border math. Say we have certain paragraphs with a break class, and for these paragraphs we want to add a border after the paragraph:

p.break {
  @include apply-side-rhythm-border(bottom);
}

Here we are telling compass to apply a border to one side (top, left, right, or bottom) of the element.

Learning more

Compass provides many more mixins around the basics discussed here. Spacing and borders can be applied the same way using other mixins from this module, so if these examples don’t fit your needs or aren’t quite what you need to do the job check out the module documentation.