Interior

Layout system

Baseline.

Usage

The baseline() mixin is a vertical text-alignment tool. It accepts a variety of arguments, automating baseline alignment with as few restrictions as possible. Use of arguments is necessary with a variety of font-size and line-height values.

Arguments

There are no required arguments.

$font-size
Assigns a value to the font size. I use a range of variables based upon a typographic scale.
$unit
Multiply the scale of line-height x2, x3 etc, x1 is the default.
$line-height
Apply line-height, I've used unitless however should work otherwise.
$margin
Adds a margin-top for additional vertical alignment where needed.
$above
Increases the padding above the text, works in conjunction with $below.
$below
The amount of margin-bottom to apply.
p {
  @include baseline($font-base, $line-height: 1.5, $above: .24);
}
h1 {
  @include baseline($canon, $above: .8, $below: 5, $margin: 5);
}
h5 {
  @include baseline($great-primer, $line-height: 1.35, $above: 1.1, $below: .5);
}