Codebase Basics

The Codebase “Soft” Element Grid

Codebase uses a “soft” 0.5rem element grid 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
Intro to The 8-Point Grid System by Elliot Dahl

In fact, at the Codebase default text size of 1rem = 16px, this means that the Codebase 0.5rem element grid defaults to units of 8px.

The Codebase element grid has been deployed a follows:

Element grid increments of 0.5rem have been used for setting all line-heights, margins and paddings throughout Codebase.
By default, the base typography vertical rhythm (line-height) is set at 1.5rem (= 3 element grid units). The line heights for headers have also been set using 0.5rem increments.
The layout .flex and .grid gaps have been set at a minimum of 1.5rem, but they also widen responsively for wider viewports.
Decoration utilities for margins and paddings have been set using values from the 0.5rem element grid.

Note: this padding: 0.5rem 1rem; in the illustration above is also available as the padding utility class .p-block. See 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.25rem	`-half`
0.5rem	`-1`
1rem	`-2`
1.5rem	`-3`
2rem	`-4`
2.5rem	`-5`
3rem	`-6`

Documentation