Baseline grid

Setka library utilizes baseline grid for line heights, spacing and overall vertical rythm. It is optional, you can left it.

Baseline grid originates from number of steps (2 by default) per one line-height of body text. It is regulated by --grid-steps and --line-height variables. I recommend use at least 2 steps or else you won't have enough options for choosing line heights.

Example header

Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque voluptatibus neque asperiores rerum officia non illo. Incidunt sit eveniet perspiciatis

In this example header has line-height of 3 grid units. And body text has line-height of 2 grid units.

Baseline grid is also responsive, so spacings between blocks too. Try to narrow window under 576px and you will see in the example above that not only size of font will become smaller, but line-height and spacings too.

When setting baseline grid, make sure that (--line-height / --grid-steps) is round number. Float number cause problems because of rounding. For example, by default --line-height variable is 20px. Then grid unit size will be (20px / 2) = 10px.

Grid units

Grid unit is a size of step of baseline grid. Spacing classes by default use grid units to calculate their margins. Value of grid unit can be get from CSS variable --grid-unit or function gu(Number) in Stylus. Formula of grid unit size is: calc(var(--line-height) / var(--grid-steps)).

If you choose to use baseline grid, then use grid units in CSS rules like this:

CSS Stylus
.some-class {
  margin-bottom: calc(var(--grid-unit) * 8);
} 
.some-class
  margin-bottom: gu(8)

Example of using grid units:

CSS Stylus
h1 {
  font-size: 2.75rem;
  line-height: calc(var(--grid-unit) * 4);
  margin-top: calc(var(--grid-unit) * 4);
  margin-bottom: calc(var(--grid-unit) * 4);
} 
h1
  font-size: 2.75rem
  line-height: gu(4)
  margin-top: gu(4)
  margin-bottom: gu(4)

Grid