Typography Baseline Mixin

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 an element you apply it to. Simply add the following include statement:

.yourelement {
  @include baseline;
}

Set the toggle in _config-debug.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.

Built with the Best

Slate was built by Hash&Salt, a company who loves building for the internet. Using the very best in industry leading software and practices honed over the last 20 years in the industry. You're in good hands.