Rhythmless

Rhythmless provides an easy way to maintain vertical rhythm in CSS. It's a lightweight LESS mixin bundle that doesn't make any assumptions about your code.

Features

• Semantic - use the mixins with any class or element
• Compatible - tightly namespaced and compatible with CSS reset code
• Easy - put away your calculator, no need for pesky arithmatic
• Pure - generates pure CSS, no JavaScript
• Flexible - specify your own rhythmic unit and apply it to the selectors you want

Getting Started

Requirements

Rhythmless requires the LESS CSS compiler. If you're not already using it, refer to the LESS documentation to integrate LESS into your project.

Installation

First, download rhythm.less into the directory you intend to use it from. Include rhythmless in another .less file as follows:

// import the mixins
@import "rhythm";

// set the rhythmic unit
@rhythmic-unit: 20px;

Styling Elements

Rhythmless provides vertical rhythm within a container, which can be any block-level element such as a <div>. All block-level elements within the container must inherit the .rhythm mixin. A helper mixin called .rhythm-container is provided which takes a base font size and automatically adds the .rhythm mixin to many common block-level elements.

div#content {
    // apply rhythmless to the contents
    // of the #content element
    #rhythmless > .rhythm-container(14px);
}

Rhythmless guesses values for font-sizes and margins that make sense for the given font size. Of course, you can override the values if they don't suit you.

h1 {
    // set the text size of h1 to 40px
    // while maintaining rhythm
    #rhythmless > .rhythm(40px);
}

Showing a vertical grid

It can be useful to display evenly-spaced vertical lines to verify that spacing is correct. To display this, add .vertical-grid to the container element.

div#content {
    // show red vertical lines spaced
    // according to @rhythmic-unit
    #rhythmless > .vertical-grid(red);
}

Nested containers

Sometimes you may want to have containers within containers without breaking the rhythm. The code sample boxes on this page are an example of this. Rhythmless needs to be aware of the padding and border width of these elements.

div.code {
    // create a container with 5px of padding
    // and a 1px border
    #rhythmless > .nested-container(5px, 1px);
    // apply some styles
    background-color: rgba(255, 255, 0, 0.2);
    border-style: solid;
    border-color: #cc9;
    padding-left: 15px;
    padding-right: 15px;
}

Compatibility

Works:

• Google Chrome
• Firefox
• Android Browser

Works except for vertical grid:

• Internet Explorer 9
• Opera Browser

Doesn't work:

• Chrome for Android

Changelog

• Sept 25, 2012 — version 0.1 released

Credits

Created by Paul Butler. Contributions and bug reports welcome via GitHub.

You are encouraged to use and distribute Rhythmless in accordance with the MIT License

Inspired by Gridlover and Wilson Miner's article. This page uses the font Signika by Anna Giedryś.