An introduction to Layout components. Components whose only function is to position their children.
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> could set the direction to go from top-to-bottom & add 16px of space between each list item:
Layout components can also be more complex, such as parent component of a data dashboard.
- CSS Layout Generator - a tool for generating layout component code.