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. 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 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 of 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>  would set the direction to go from top-to-bottom & add  16px  of space between each list item.

A wireframe of a browser with a number of different size boxes.

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

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

The CSS Layout Generator is a tool for creating the CSS & HTML for layout components.

Give feedback