Layout system



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.


There are no required arguments.

Assigns a value to the font size. I use a range of variables based upon a typographic scale.
Multiply the scale of line-height x2, x3 etc, x1 is the default.
Apply line-height, I've used unitless however should work otherwise.
Adds a margin-top for additional vertical alignment where needed.
Increases the padding above the text, works in conjunction with $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);