All sizes at each viewport is calculated using the body size (.type-m), leading factor ($typography-leading-factor-…) and modular scale ($typography-modular-scale-…). Line height is set manually with the base unit ($base-unit-…) and base unit increments using sizer($base-unit-xs, number-of-base-units, base-unit-increments).

.type-s: Starlight
.type-m: Starlight
.type-l: Starlight
.type-xl: Starlight
.type-xxl: Starlight
.type-xxxl: Starlight
.type-xxxxl: Starlight

The grid is based on the Twitter Boostrap technique, based on breakpoints ($viewport-…), number of columns ($grid-column-count), gutter ($grid-gutter-) and outer margins ($grid-outer-margin). The grid contains several helpful classes to create different layouts (full width, half gutters, passepartout, full height, nesting and masonary).

Example of a UI element that uses base unit and base unit increments for rendering.

Button Button Button Button Button Button

Typography

Size classes

Grid

.grid

.grid .passepartout

.grid .full-width

.grid .full-height

.grid .no-gutters

.grid .half-gutters

Nesting

.grid .masonary .row-x (only FireFox)

Sizing

Buttons