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 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 and height 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 2^nd element only if it immediately follows the 1^st element. For example, we can use this to add:

• ▪ a large space between h1 and p elements and
• ▪ a small space between p elements.

/* body is acting as the layout component */
body > h1 + p {
    margin-top: 40px;
}

body > p + p {
    margin-top: 28px;
}

Tools

• CSS Layout Generator