Left Arrow

Notes

Layout Component

A grid of squares.

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:

A wireframe of a browser with a vertical list of squares.

Layout components can also be more complex, such as a parent component of a data dashboard:

A wireframe of a browser with a vertical list of squares.
A wireframe of a 2 layouts. 2 with consistent spacing between its children. The other with inconsistent spacing.

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

  • a large space between h1 and p 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?