This module provides exactly the same function as spacing, but for specific breakpoints. It is based on the list in responsive settings and creates individual spacing classes for each breakpoint availale in that list.
With this possibility you can assign classes like:
<div class="newsletter-box u-mb+ u-palm-mb-">
...
</div>
where the newsletter-box will have an initial large margin-bottom, but for the palm-breakpoint, .u-palm-mb- takes effect (i.e. .u-mb- on palm).
<div class="u-mb+ u-palm-mb- ">
...
</div>
$inuit-enable-responsive-margins: false !default;
$inuit-enable-responsive-margins--tiny: false !default;
$inuit-enable-responsive-margins--small: false !default;
$inuit-enable-responsive-margins--large: false !default;
$inuit-enable-responsive-margins--huge: false !default;
$inuit-enable-responsive-margins--negative: false !default;
$inuit-enable-responsive-margins--negative-tiny: false !default;
$inuit-enable-responsive-margins--negative-small: false !default;
$inuit-enable-responsive-margins--negative-large: false !default;
$inuit-enable-responsive-margins--negative-huge: false !default;
$inuit-enable-responsive-margins--none: false !default;
$inuit-enable-responsive-paddings: false !default;
$inuit-enable-responsive-paddings--tiny: false !default;
$inuit-enable-responsive-paddings--small: false !default;
$inuit-enable-responsive-paddings--large: false !default;
$inuit-enable-responsive-paddings--huge: false !default;
$inuit-enable-responsive-paddings--none: false !default;
Setting everything to true will provide ultimate combination possibilities, but also bloats your output. Be sure to only enable the classes you really need.