Spacing

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

Spacing Scales

General Scale

{{size}}

Border Scale

{{size}}

Spacing Types

The following examples all use the 'sm' spacing scale size.

{{type}}
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

Spacing Classes

Class Prefixes

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

Class Format

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