Spacing

Spacing is hard which is why Vue Design System has Sass mixins and clear 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.

Advantages your team gets by using these mixins:

• 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 usinh advanced CSS selectors inside space mixins.

Resources:

Most of these overall 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