The sme spacing scale and associated classes use a base pixel size to derive common values used for defining space.
'Space' is the term we use to define the dimensions of objects and the distance in between them
Most if not all scenarios can be achieved using the predefined spacing guidelines. Please do not to create your own spacing and stick to this spacing scale. This will help the product to maintain a sense of cohesion and consistency even though it is developed by many different teams and organizations
The following examples all use the 'sm' spacing scale size.
Spacing Type Name | Effect |
---|---|
inset | Applies space to all sides of the object |
top | Applies space to the top side of the object |
left | Applies space to the left side of the object |
bottom | Applies space to the bottom side of the object |
right | Applies space to the right side of the object |
vertical | Applies space to the top and bottom sides of the object |
horizontal | Applies space to the left and right sides of the object |
squish-v | Applies space to the left and right sides of the object and 50% space to the top and bottom |
squish-h | Applies space to the top and bottom sides of the object and 50% space to the left and right |
spread-v | Applies space to the left and right sides of the object and 150% space to the top and bottom |
spread-h | Applies space to the top and bottom sides of the object and 150% space to the left and right |
All Classes are prefixed with sme-
. Spatial classes are additionally prefixed based on the properties that they effect
Spacing Class Prefix | Effect |
---|---|
position | Modifies the top, left, bottom, and right properties |
margin | Modifies the margin property |
padding | Modifies the padding property |
border | Modifies the border-width property |
height | Modifies the height property |
width | Modifies the width property |
square | Modifies the height, and width properties equally |
line-height | Modifies the line-height property |
The final spacing classes take the following format
.sme-[spacing prefix]-[spacing type]-[spacing size]
Here are some examples of valid classes:
.sme-margin-inset-sm
.sme-border-left-lg
.sme-position-squish-v-xxl