Utilities: Sizing

A collection of classes for setting length related properties. Which classes that are actually generated can be controlled by setting Sass variables. Check the source of src/utilities/_sizing.scss to see what can be configured.

Heights (vertical sizing)

Use classes h-n for heights that are multiples (n) of the spacing base.

For example, this element has class h-3 applied and should take up three "lines" of vertical space.

For setting a one-pixel height there's class h-px, that will also set margin-bottom: -1px; to avoid breaking the vertical rhythm.

Widths (horizontal sizing)

Horizontally there's classes w-n for widths that are multiples (n) of the spacing base. But as we don't need to care about the vertical rhythm, some fractional width classes like w-1/2 are available too.

For example, this element has class w-8 applied and should take upp eight "lines" of horizontal space.

Limiting line lengths

For good readability it's recommended to keep lines of text between 45 and 85 characters long on screens. Class w-readable will apply such a max-width to an element, while classes children:w-readable and paragraphs:w-readable will apply to elements within. This documentation uses the latter to allow headings, lists, and other blocks to be wider, while keeping the body text easy to follow.