Spacing

Spacing is hard which is why Vue Design System has Sass mixins and guidelines to help. Vue Design System introduces the following concepts for spacing:

• 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 the spacing 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);
}

These Sass helpers are located in src/styles/_spacing.scss

Advantages:

• Most components come with spacing included using the above mixins.
• A developer is able to just lay out components 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 space mixins.

Resources:

Most of these ideas are from the following articles:

• Space in Design Systems: https://medium.com/eightshapes-llc/space-in-design-systems-188bcbae0d62
• A framework for creating a predictable & harmonious spacing system for faster design-dev handoff: https://blog.prototypr.io/a-framework-for-creating-a-predictable-and-harmonious-spacing-system-8eee8aaf773c
• Padding in Lightning Design System: https://www.lightningdesignsystem.com/utilities/padding