Left Arrow.Back

The Layout Component

Table Of Contents

A grid of squares.

An introduction to Layout components. Components whose only function is to position their children.

Last Tended
Planted
StatusSeed
The letter 'A' in upper and lower case.

Definition

The Braid Design System believes UI (User Interface) components should not provide surrounding white space. For example, a list item having a margin below it to add a gap between itself & the next item. This margin breaks component encapsulation, making it harder to use. A well-built component should not affect anything outside itself.

Requirements like space between list items still need to be satisfied. To do this, Braid proposes layout components. A category of components whose only function is to position their child elements. A layout component would control:

  • the direction of the children (example: top-to-bottom or left-to-right) &
  • space between children.

An example of a layout component would be a <ul> for a list of text items. The <ul> could set the direction to go from top-to-bottom & add 16px of space between each list item:

A wireframe of a browser with a vertical list of squares.

Layout components can also be more complex, such as parent component of a data dashboard.

A wireframe of a browser with a vertical list of squares.
A space ship's docking bay with various equipment.

Tools