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 met. To do this, Braid proposes layout components. A category of components whose only function is to position their child elements. A layout component controls:

• ▪ the direction of the children (rows or columns) and
• ▪ space between them.

An example of a layout component would be a <ul> for a list of text items. The <ul> could set the direction to column and add 16px of space between each item:

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

Consistent or Inconsistent Gaps

There are two categories of layout copmonents:

• ▪ consistent gap - gaps between elements are the same. For example, a to-do list that lists items down the page with a gap between each.
• ▪ inconsistent gap - gaps between elements vary depending on the type of elements. For example, a blog with a large gap between a heading and a paragraph but a small gap between two paragraphs.

For consistent gaps, make the component's display flex or grid and use the gap property. For inconsistent gaps, add margins to children using the adjacent sibling combinator.

.elemA + .elemB {
    margin-top: 16px;
}

The margin wil be applied to elemB only if it immediately follows elemA. Using this, we can add:

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

This approach avoids problems like margin collapse.

Tools

• CSS Layout Generator

Feedback

Have any feedback about this note or just want to comment on the state of the economy?