Spacing utilities and documentation

[arielsalminen]

Vue Design System is missing proper utilities/framework for spacing components and layout. I’m proposing the addition of the following helpers which would be either based on the x-height of the chosen typeface or then just the base space token (if based on x-height, will have to change the spacing tokens to match as well).

Utilities:

• INSET-SPACE: For interface containers.
• INSET-SQUISH-SPACE: For buttons, form elements, cells, etc…
• STACK-SPACE: For vertically stacked content.
• INLINE-SPACE: For things displayed inline.

Advantages:

• Most components would come with spacing included using the above helpers/mixins.
• A developer would be able to just lay out components and they would take care of the spacing automatically as well as they can.
• Collisions with component level spacing and inset spacing would be solved systematically using for example mixin or advanced CSS selectors inside space mixins.
• In addition, we need margin and padding utilities for added convenience in laying out components.

Prototype

• A quick-n-dirty CodePen prototype I did: https://codepen.io/viljamis/pen/yvmWrV

Resources:

Most of the 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

[arielsalminen]

See my updated description above. I’m now working on this feature in https://github.com/viljamis/vue-design-system/pull/36

[sapegin]

This looks very close to my react-spaceman which was inspired by your first link ;-)

[arielsalminen]

This is now merged and I’m in the process of making a new release and updating docs.