baseline Documentation

$base (Map)

scss

$base: () !default;

Description

The grid is defined in a single map variable, with four initial properties: root-font-size, row-height, min-line-height and math.

Anything you put in the root $base variable map will be treated as a global project default. You can create similar configuration maps under different variable names, to override the defaults as-needed.

Map Properties

cap-height: (Number)

Cap-height of the used font. Possible resource for looking it up: https://jamonserrano.github.io/plumber-sass/baselines/

root-font-size: 1rem (Number)

Font-size of the root element

row-height: .5 (Number)

Height of each row, generaly ½ of the font-size

min-line-height: 1.2 (Number)

Minimum line-height

math: (String)

Base can calculate shoulders in 3 types

absolute shoulder is calculated in the unit of the font-size
relative shoulder is calculated in a em unit. This will forces the needed of the correct corresponding font-size.
static a static value that uses a em value with the row height and the calc() value. This removes the need to know the font-size, but can result in a shoulder spanning over multiple rows.

Examples

scss Default values

$base: (
  font-size: 1rem,
  row-height: .5
);

scss Advanced example with Segoe UI as font

$base: (
  font-size: 1rem,
  row-height: .5,
  cap-height: 0.86,
  math: 'static'
);

baseline 0.4.0