Layout

In Codebase, components and utility classes are built upon a 0.5rem element grid. Codebase also gives you a range of containers of different sizes, simple columnar positioning by flexbox, and complex layouts can be built using a real CSS grid system. A few more things can be found in layout utilities.

The Codebase 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
• Material Design’s 4dp square baseline grid

The Codebase element grid has been deployed a follows:

1. Element grid increments of 0.5rem have been used for setting all line-heights, margins and paddings throughout Codebase.
2. 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.
3. The layout .grid and .flexbox gaps have been set at 1.5rem.
4. Decoration utilities for margins and paddings have been set using values from the 0.5rem element grid.

Element Grid Unit Suffixes in Utility Classes

For various utility classes, the element grid is set using “element grid units” of 0.5rem.

1 element grid unit = 1e = 0.5rem

Where element grid units have been used in utility classes (e.g. margins and paddings), these have been given the unit e as follows:

¹ This half element-grid spacer is also available in margin and padding (i.e. spacing) utility classes.