Spacing

Decanter includes a range of spacing types that impact a page’s or an element’s appearance. These spacing types are: gutters, screen edge, element spacing, vertical rhythm, and typography scale.

Responsive Spacing in Decanter v.7

Documentation on responsive spacing coming soon!

Modular Spacing in Decanter v.6

Please note: Modular spacing will be deprecated in Decanter v.7

Gutters

Gutters are the gaps between cells in a grid layout – not including the outside edge – and are set at each breakpoint. Gutter values are curated and do not mathematically scale.

Developer notes

Config is stored in a SASS map.

Namespace: flex_, grid_, or gutter_

Screen edge

Screen edge is the minimal amount of space between the outside edge of a layout and the window frame. Its margins are set at each breakpoint, up to and not including the biggest breakpoint (2XL). The total width of the 12 column grid is not fixed at each breakpoint, but rather expands as the viewport expands, with the exception of the 2XL breakpoint, which is a centered beginning at 1700px (1500px breakpoint plus 100px margin on each side). Screen edge values are curated and do not mathematically scale.

Developer notes

Config is stored in a SASS map.

Namespace: screen_

Element spacing

Element spacing is the space between elements within a component. This spacing can be between several elements, or between an element and the edge of the component’s container. The values are set at each breakpoint and scale off of a set base value, which are set at each breakpoint. Element spacing values are curated and do not mathematically scale.

Developer notes

There are 10 scale ratios: 0.1666666, 0.3333, 0.5, 0.6666, 1, 1.4444, 2, 2.5, 4, 6

Config is stored in three SASS maps.

Namespace: modular_spacing

Vertical rhythm

Vertical rhythm is the amount of space between the baseline of a text element and the next element. The values are set for each heading level at each breakpoint. The values are determined by a calculation of the relative font size for the text element multiplied by the corresponding breakpoint scale value.

Developer notes

The scale value is set in a SASS map.

Namespace: typography_

Typography scale

While not directly related to whitespace, Typography scale is a sizing system that is related to vertical rhythm.

The amount a text element’s font size scales is a fixed ratio. Typography scale follows the Bourbon modular-scale mixin formula with a 1.25 scale ratio between each step. Typography scale is bi-directional, as font sizes can scale up or down, and is not dependent on breakpoints.

Developer notes

The scale ratio is set in a single SASS variable.

Namespace: modular_typography_