Spacing & Layout

Overview

Spacing & Layout define how a UI is organized. Space controls the amount of "breathing room" UI elements have while Layout controls the arrangement and size.

Space is controlled using a few CSS properties:

• font-size (& other font properties such as line-height)
• padding
• border-width
• margin

Another important CSS Property is box-sizing and should generally be set to border-box;

Motivation

Space & Layout are fundamental building blocks for a UI. Webapps might run on any number of screen sizes, devices, & browsers; each of which behave slightly differently given the same set of styles. As the complexity of webapps increases, it will be increasingly important for tools, such as a component library, to handle the details under the hood automatically via simple, intuitive APIs.

Developers should be able to rapidly prototype a component layout or design during a live session with a designer with relative ease. Shorter iteration times enable designers and developers to focus on more difficult problems, such as organizing data, designing AB testing strategies, or brainstorming new features.

Ideal Experience

• Developer has option of using the following display values:
  • none, block, inline, inline-block, flex, inline-flex, grid, inline-grid, & list-item
• box-sizing includes border, meaning margin is the only external space for an element
  • Note - margin should rarely be used. Often there are simpler, more reliable styles that can be applied
• Padding is supported via t-shirt sizes: small, medium, large
• Borders support includes:
  • All colors
  • Fixed weights: thin, medium, thick
  • Fixed border-radii: square, pill, circle, round
• Inset box-shadow support for enabling border support without affecting element dimensions

Additional Resources

• Understanding the display property
• MDN Display Property