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

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

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