Foundations

Margins and Paddings

scss:Ready
Usage
Code

The margins and paddings utility classes

You can add to your bundle the margins or paggings utility classes like so :

@import 'utilities/_u.margin.scss';
@import 'utilities/_u.padding.scss';
Viewport: px 
<div class="example mu-pb-025 mu-mt-250">
  <div class="example__item mu-mb-075 mu-pb-200 mu-pt-075 mu-ml-350">
    margin-bottom of 0.75mu <br />
    margin-left of 3.5mu <br />
    padding-top of 0.75mu <br />
    padding-bottom of 2mu <br />
  </div>
</div>


<div class="mu-mb-100">
  I will have a 1mu (16px) margin bottom
</div>
<div class="mu-m-100">
  I will have a 1mu (16px) margin on all sides of the div
</div>
<div class="mu-pl-050">
  I will have a 8px padding left
</div>
<div class="mu-p-050">
  I will have a 8px padding on all sides of the div
</div>

Please considere that those utilities are looping through all magic-unit authorized values up to 10x magic-units (160px), and trought all possible sides (left, top, right, bottom).This is resulting in a lot of classes that you will potentialy not use.

You may want to add your utilities one by one as you use them instead. In that case, use the space mixin.


The space mixin

You can implement your own margins or paggings utility using the space mixin :

@import 'settings-tools/all-settings.scss';


@include make-space-util(m, t, 075);
/*
.mu-mt-075 {
    margin-top: 12px !important;
}
*/


Do not use margin and padding utilities inside components
<div class="mc-list">
  <div class="mc-list__item mu-mb-025">item</div>
  <div class="mc-list__item mu-mb-025">item</div>
</div>

Use utilities to manage space between components
<div class="mc-list mu-mb-025">
  <div class="mc-list__item">item</div>
  <div class="mc-list__item">item</div>
</div>
<div class="mc-other">other</div>

Use margins and padding using variables or functions to define inner spaces
@import 'settings-tools/all-settings.scss';


.mc-list {
  /* ... list styles */


  &__item {
    margin-bottom: $mu025;
  }
}

Utilities are meant to provide you with easy to use spacing. When building reusable components, you should try to colocate all related styles within your component CSS definition. It makes it easier for your coworker to understant what is related to what.


Removing border-sizes from vertical paddings

You should remove border sizes from the vertical paddings values

To remove border sizes from vertical padding, as borders are expressed in px and padding in rem, use the calc() css function :

@import 'settings-tools/all-settings.scss';


.exemple {
  border: solid 1px block;
  line-height: $mu150;
  padding: calc($mu025 - 1px) $mu025;
}