The Layout Component
Tended:
Status: decay
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 and 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) and
- ▪ 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 and 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 Gaps
A layout component falls into 1 of 2 categories:
- ▪ consistent gap - all horizontal and / or vertical gaps between elements are the same. Example: a to-do list that lists items down the page with a gap between each.
- ▪ varying gap - gaps between elements varies depending on the type of elements. Example: a blog with a large gap between a heading and a paragraph but a small gap between 2 paragraphs.
Working with margins adds complexity to layout components:
- ▪
margin
values sometimes collapse with an adjacent element's margin, taking the maximum of the margins between them rather than the combination of both, - ▪
margin
,width
andheight
settings don't work on inline-elements and - ▪
margin
doesn't work on table cell elements.
If you need consistent gaps, make the parent a flex
or grid
and use the gap
property.
If you need varying gaps, add margins to children using the adjacent sibling combinator +
.
This matches the 2nd element only if it immediately follows the 1st element.
For example, we can use this to add:
- ▪ a large space between
h1
andp
elements and - ▪ a small space between
p
elements.
localhost:3000
/* body is acting as the layout component */ body > h1 + p { margin-top: 40px; } body > p + p { margin-top: 28px; }
Where to Next?


