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).
Just as for spacing, you have to enable each of the available features by overriding their variable to true:
$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.