Spacing

Spacing function

For layout purpose use the

grid(size)

function.

(size) values can be found below:

Example:

.component {
  margin: grid(2) grid(3);
}

this will return:

.component {
  margin: 16px 24px;
}

Spacing utility classes

For layout purpose feel free to use spacing classes

m-(size)

p-(size)

m(side)-(size)

p(side)-(size)

Before using the spacing utility classes please include the apropiate mixin in your app:

@include margin;

@include padding;

The (side) values are:

Examples:

<div className="m-3 p-2">

<div className="mt-1 pb-3">

Tip: Don't mix spacing classes with the component classes. We suggest using them outside the component.

Example:

<div className="m-3 p-2">
  <div className="component-class">
    component
  </div>
</div>

Combined spacing classes

To shorten html code combined classes can be used:

mx-(size)

my-(size)

px-(size)

py-(size)

Example:

<div className="mx-3 py-2">
  ...
</div>

this will return a div with these styles:

.div {
  margin-left: 24px;
  margin-right: 24px;
  padding-top: 16px;
  padding-bottom: 16px;
}