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.by Brad Woods