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.

--sp-1: 0.5rem;
--sp-2: 1rem;
--sp-3: 1.5rem;
--sp-4: 2rem;
--sp-5: 2.5rem;
--sp-6: 3rem;

// Spacing (paddings, margins, and gaps)

$spacing: (
  "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 has --sp-cell thatcorresponds to Codebase utility classes var(--sp-1) var(--sp-2);. Since this would also be used frequently for menu items, tab labels, etc., Codebase also has this as utility class p-cell.

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	CSS variable	Utility class suffix
0.5rem	--sp-1	-1
1rem	--sp-2	-2
1.5rem = 1 line height	--sp-3	-3
2rem	--sp-4	-4
2.5rem	--sp-5	-5
3rem = 2 lines	--sp-6	-6