Not your average vertical rhythm Sass mixin

Way back when in September 2012 or so I was looking into vertical rhythm in design and layout. I instantly thought it would be great to create a Sass mixin that creates the line height and bottom margin for your typography based on the font size your pass it.

So I took to CodePen and created this -

// initial variables set-up

$doc-font-size:16;
$doc-line-height:24;

// mixin

@mixin font-size($size) {
      font-size: 0px + $size;
      font-size: 0rem + $size / $doc-font-size;
      line-height: ceil($size / $doc-line-height) * ($doc-line-height / $size);
      margin-bottom: 0px + $doc-line-height;
      margin-bottom: ($doc-line-height / $doc-font-size) +rem;
}

This simple mixin gives the element the font-size in REM with PX fallback for OldIE and other browsers (like Opera mini). A line height based on the font-size and the document’s line height that’s set. Finally you get a bottom margin, again in REM with a PX fallback that’s defined by the documents font size and line height.

This gives you some sweet vertical rhythm for you site.

I had an itch.

What if I wanted an element to have no bottom margin? What if I wanted to have a bigger line-height or no line height or maybe a larger or smaller bottom margin?

So I took to codepen again and adapted that mixin to allow for those questions to be answered.

So where is it?

It’s built in to my recently updated set of Sass mixins and files - Sassifaction.

Therein it’s also built and ready in my Mixture Project - Sassifaction Mixture.

If you just want it on it’s own or have a play it’s also on CodePen.