The Codebase element grid

Codebase uses a “soft” 0.5rem element grid (default 8px) for consistently positioning elements relative to each other.

This is similar in principle to various 8px grids out there (also known as 8-point or 8dp [device pixel] grids). For example:

• SpecFM’s 8-point grid
• The Power of the 8pt Grid System in Design by Mert Yagci

In Codebase, one element grid unit = 0.5rem = 8px (default).

How the element grid is used

The Codebase element grid has been deployed a follows:

1. By default, the base typography vertical rhythm (line-height) is set at 1.5rem (= 3 element grid units).
2. Spacing utilities for margins, paddings and gaps (used in both flexbox and grid) have been set using values from the 0.5rem element grid.

$spacing: (
  "0": 0,
  "1": 0.5rem,
  "2": 1rem,
  "3": 1.5rem,
  "4": 2rem,
  "5": 2.5rem,
  "6": 3rem,
);

$spacing-setup: (
  "0": 0,
  "1": var(--sp-1),
  "2": var(--sp-2),
  "3": var(--sp-3),
  "4": var(--sp-4),
  "5": var(--sp-5),
  "6": var(--sp-6),
);

Infographic: the Codebase element grid

Note: the padding for buttons and table cells corresponds to Codebase utility classes px-2 py-1. Since this would be used frequently for menu itams, tab labels, etc., Codebase also has p-cell that adds this margin (margin: var(--sp-1) var(--sp-2);) in one utility class.

Utility class spacing

The element grid has been used throughout Codebase’s classless (basic) styling. Where element grid units have been used in spacing utility classes (i.e. margins and paddings), these are provided as follows:

Element grid measure	Utility class suffix
0.5rem	-1
1rem	-2
1.5rem = 1 line height	-3
2rem	-4
2.5rem	-5
3rem = 2 lines	-6