README.md

Order.less

Order.less is a library of Less mixins for precise control over typographic contrast, rhythm and layout. It was designed to fit seamlessly into any project and does not put any restrictions on your stylesheet structure. You set the number of columns, the gutter and baseline sizes, your font size scale, and use the same offset and size property names as you do in CSS. The library does all computations and adjustments — no extra HTML markup required!

Order.less is made of three loosely coupled modules:

Column grid mixins enable you to define a uniform grid with fixed inner gutters, and set elements' padding, margin, offset and width in columns.

Baseline grid mixins let you control vertical rhythm of the document by setting padding, margin, offset and height in baseline rows. It can also automatically shift elements to sit on baseline.

Font size scale mixins let you define a custom font size scale and set elements' font size to a value from that scale.

Column grid

Column grid mixins let you define a uniform grid with fixed inner gutters, and set elements' padding, margin, offset and width in columns. At the moment, only uniform grids with inner gutters are supported, e.g. a 3-column grid will have 2 gutters between 3 columns of equal width.

Example

<divid="content">
<divclass="primary">Main content</div>
<divclass="secondary">Secondary content</div>
<divclass="secondary">Secondary content</div>
</div>
<divid="sidebar">Sidebar</div>
<ulid="grid"><!-- We must bust the whitespace around all items, because they will be rendered as inline blocks. You don't have to do this, if you are using floated or flexible boxes.--><li>Item 1</li><!----><li>Item 2</li><!----><li>Item 3</li><!----><li>Item 4</li><!----><li>Item 5</li><!----><li>Item 6</li><!----><li>Item 7</li><!----><li>Item 8</li><!----><li>Item 9</li><!----></ul>

Usage

div {
.left(20px); // set left to 20px.left(1, 6); // set left to 1 column in a 6 column grid.left(1, -10px, 6); // same as above, but nudge element 10px left
}

Baseline grid

These mixins let you control vertical rhythm of the document by setting padding, margin, offset and height in baseline rows. It can also automatically shift elements to sit on baseline, if their font size, line height and/or font family is changed.

Example

A body of copy is set in three typefaces, with vertical rhythm and baseline alignment preserved throughout:

A bit of theory

Baseline row height is a product of base font-size and base line-height of the document. For example, if the base font-size equals 20px and base line-height equals 1.5, then baseline row height is 30px.

Whenever you change any of font property of a block element, its baseline drifts off the parent baseline. In order to preserve baseline alignment you could manually adjust relative position of the element:

These mixins can help automatically shift the element back to baseline. The offset is primarily a function of font-size, line-height and font-family, and in many cases of font-variant, font-weight and font-style. If we abstract the variability of each typeface variation via special ratio referred to as baseline offset, the actual offset is simply a function of font-size, line-height and baseline offset.

Here are baseline offset values for a few popular typefaces:

Font

Offset

Arial

0.847

Arial Black

0.895

Comic Sans MS

0.905

Courier New

0.766

Georgia

0.849

Impact

0.899

Tahoma

0.897

Times New Roman

0.837

Trebuchet MS

0.858

Verdana

0.898

You can find offset values for many other typefaces (and their variations) including popular Google fonts in HTML source of the test suite.

Gotchas

When you are fine-tuning font size and line height, some combinations would make the library align text onto the previous baseline, potentially colliding with other copy. This can be fixed by adding additional margin to the target element or its siblings.

When you have multiple one-liners of different height stacked below each other you should also explicitly set their bottom margin, even if it's zero. .margin-bottom() mixin automatically realigns the baseline for the next element, if the current element uses an odd value.

These mixins let you set the respective CSS property in baseline rows.

NB! When combining multiple elements with line heights that are not evenly divisible by your baseline, you should explicitly set .margin-bottom(), even if it's zero. This mixin would take into account the difference and add it to the element's margin, preserving baseline alignment for its next sibling.

Exports

Usage

Font size scale

Font size scale mixins let you define a custom scale and set elements' font size to a value from that scale. You can learn more about modular scales in More Meaningful Typography by Tim Brown. He also made this handy tool that you can use to generate modular scales.

Mixin reference

.use-custom-scale()

Defines a custom scale and exports other mixins.

Parameters

pixel@base – base value

list@values – list of pixel values (must include @base value)

Exports

pixel@scale-base

list@scale-values

Usage

You can define an arbitrary scale by passing a list of valid step values as the second argument: