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
StatusSprout
TagsCSS
The letter 'A' in upper and lower case.

Definition

The Braid Design System believes that UI (User Interface) components (such as React components) should not provide surrounding white space. Such as 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. It is usable in any context. Requirements like space between list items still need to be fulfilled however. To do this, Braid proposes Layout components. A category of components whose only function function is to position their child elements.

A layout component would commonly control:

  • the direction of the children (example: top-to-bottom or left-to-right) &
  • space between children (example: a margin below each list item).

A simple example would be a layout component would be a \<ul> for a list of text items. The styling of the text would be the responsbility of the \<li> component. 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