Spacing #

Duet Design System uses the following framework and Sass Mixins for creating a predictable and harmonious spacing for components and templates.

Our space scale is based on our typographic scale. Below defined values are used for padding, margin, and position coordinates. Multiplying and dividing these values is allowed using even numbers.

Sass mixins #

Most components in Duet come with spacing included using the below mixins. The idea is that a developer can simply lay out components on a page and they will take care of the spacing automatically as well as they can. Collisions with component level spacing and inset spacing are solved systematically using advanced CSS selectors inside the space mixins.

• Inset spacing #

  For all user interface containers.

• Inset squish spacing #

  Same as previous, but a squished inset reduces space top and bottom, for example by 50%. Used for buttons, inputs, data table cells, list items, etc.

• Stack spacing #

  For all stacked content. So for example panels, form fields and anything else that is stacked vertically.

• Inline spacing #

  For pills, tags, breadcrumbs, side-by-side form fields etc. Things that are displayed inline.

You simply use these via Sass Mixins, like so:

// Stack space
.heading {
  @include stack-space($space-large);
}

// Inset space
.container {
  @include inset-space($space-x-large);
}

// Inline space
.pill {
  @include inline-space($space-small);
}

// You can also combine inset/inset-squish and inline/stack space
.button {
  @include inset-squish-space($space-large);
  @include inline-space($space-small);
}