Using a Baseline

Check your typographical settings easily with a mixin that draws baselines on an element.

To help you set text, Slate includes a mixin that will draw horizontal lines as a guide on the element you apply it to. Simply add the following include statement:

.yourelement {
 @include baseline;
}

Set the toggle in _settings.type.scss to see them. This way, you can leave the includes where you need them and just toggle it on or off via the config.

$type-debug: true;

Baseline Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris

  • List One
  • List One
  • List One

Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Setting a custom baseline

By default the baseline uses the `$base-font-size` and `$line-height` vars to calculate the spacing between the lines. To set a different spacing, you can pass the font size and line height values to the mixin:

.yourelement {
 @include baseline(18px, 1.2);
}