Skip to main content

Module: Sizing

The sizing module contains mixins for working with length related CSS properties. You'll find it in src/modules/_sizing.scss.

Setting general sizes

The set-length mixin is for setting length properties in relation to $spacing-base. When used it will declare the CSS properties but also use CSS calc and the --spacing-base custom property whenever available to make the spacing base changeable client-side.

Text sizing

The set-text mixin applies font-size and line-height. If the desired line-height can be related to the $spacing-base it will also be applied with CSS calc, as well as the --line-height custom property that can be used for other nifty calculations (e.g. baseline shift in Level 4).

Measure (line lengths)

The set-readable-max-width mixin applies max-width from $readable-line-length (default 75ch).

Customizable Sass variables

  • $spacing-base is usually set by the main Kingdom level file
  • $readable-line-length-min defaults to 45ch
  • $readable-line-length-max defaults to 75ch