Vertical Rhythm made easy with LESS

Pierre Fritsch
Pierre Fritsch, 17. März 2014

Readability is really improved by consistency in text alignment, horizontally and vertically. But what we call „vertical rhythm“ is sometimes hard to manage on our web layouts.

Here, just a little mixin to control your vertical rhythm with LESS and the pseudo-class :first-child (compatible with ie7+)

// Define the base line-height
@base-line-height: 1.5em;

// Add margin top, except the first element
.vertical-rhythm () {
    margin-top: @base-line-height;
    &:first-child {
        margin-top: 0;
    }
}

// Apply the mixin to our elements
.content {
    padding: 2em;
    & > * {
        .vertical-rhythm;
    }
}

See a demo on Codepen.io