The Layout Component
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 a parent component of a data dashboard:
Consistent / Varying Spacing
A layout component falls into 1 of 2 categories:
- ▪ consistent spacing - all horizontal & / or vertical space between elements is the same. Example: a to-do list that lists items down the page with a gap between each.
- ▪ varying spacing - space between elements varies depending on the type of elements. Example: a blog with a large gap between a heading & a paragraph but a small gap between 2 paragraphs.
Working with margins adds complexity to layout components:
marginvalues sometimes collapse with an adjacent element's margin, taking the maximum of the margins between them rather than the combination of both,
heightsettings don't work on inline-elements &
margindoesn't work on table cell elements.
If you need consistent spacing, make the parent a
grid & use the
If you need varying spacing, add margins to children using the adjacent sibling combinator
This matches the 2nd element only if it immediately follows the 1st element.
We can use this to add:
- ▪ a large space between
- ▪ a small space between 2
|CSS Layout Generator||A grid & flexbox code generator|