FAZUA Living Styleguide

FAZUA Living Styleguide

Source: scss/_2-Responsive/_utilities.scss, line 5

2.3.1 Spacing with Margin and Padding

The classes are named using the format {property}{sides}-{size} for xs and {property}{sides}-{breakpoint}-{size} for sm, md and lg.

Where property is one of:

m for classes that set margin

p for classes that set padding

Where sides is one of:

t - for classes that set margin-top or padding-top

b - for classes that set margin-bottom or padding-bottom

l - for classes that set margin-left or padding-left

r - for classes that set margin-right or padding-right

x - for classes that set both *-left and *-right

y - for classes that set both *-top and *-bottom

blank - for classes that set a margin or padding on all 4 sides of the element

Where size is one of:

0 - for classes that eliminate the margin or padding by setting it to 0

1 - for classes that set the margin or padding to 15px

2 - for classes that set the margin or padding to 30px

3 - for classes that set the margin or padding to 60px

4 - for classes that set the margin or padding to 120px

auto - for classes that set the margin to auto

Example

<div class="grid align-items-center kss-grid-example">
  <div class="col-desk-2 col-tab-1 col-mob-1 pb-0"></div>
  <div class="col-desk-2 col-tab-1 col-mob-1 pb-1"></div>
  <div class="col-desk-2 col-tab-1 col-mob-1 pb-2"></div>
  <div class="col-desk-2 col-tab-1 col-mob-1 pb-3"></div>
  <div class="col-desk-2 col-tab-1 col-mob-1 pb-4"></div>
</div>