About

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 and 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 controls:

• the direction of the children (rows or columns) and
• space between them.

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

Layout components can be more complex, such as a parent of a dashboard:

The CSS Layout Generator is a tool for generating layout component code.