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.
Layout components can be more complex, such as a parent component of a data dashboard.
The CSS Layout Generator is a tool for creating the CSS & HTML for layout components.Give feedback