Spacing

<h3>Spacing</h3>
<h4>Margin</h4>
<p><code>.u-no-margin<strong>-{BREAKPOINT REFERENCE}</strong></code> Removes all margins from the breakpoint referenced in the class name.</p>
<p><code>.u-no-margin-top<strong>-{BREAKPOINT REFERENCE}</strong></code> Removes top margin from the breakpoint referenced in the class name.</p>
<p><code>.u-no-margin-right<strong>-{BREAKPOINT REFERENCE}</strong></code> Removes right margin from the breakpoint referenced in the class name.</p>
<p><code>.u-no-margin-bottom<strong>-{BREAKPOINT REFERENCE}</strong></code> Removes bottom margin from the breakpoint referenced in the class name.</p>
<p><code>.u-no-margin-left<strong>-{BREAKPOINT REFERENCE}</strong></code> Removes left margi from the breakpoint referenced in the class name.n</p>
<p><code>.u-margin<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds <var>$space</var> variable margin from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-half<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds half <var>$space</var> variable margin from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-top<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds <var>$space</var> variable margin to the top from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-top-half<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds half <var>$space</var> variable margin to the top from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-right<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds <var>$space</var> variable margin to the right from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-right-half<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds half <var>$space</var> variable margin to the right from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-bottom<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds <var>$space</var> variable margin to the bottom from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-bottom-half<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds half <var>$space</var> variable margin to the bottom from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-left<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds <var>$space</var> variable margin to the left from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-left-half<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds half <var>$space</var> variable margin to the left from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-top-auto<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds margin-top: auto; to an element from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-right-auto<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds margin-right: auto; to an element from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-bottom-auto<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds margin-bottom: auto; to an element from the breakpoint referenced in the class name.</p>
<p><code>.u-margin-left-auto<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds margin-left: auto; to an element from the breakpoint referenced in the class name.</p>
<hr/>
<h4>Padding</h4>
<p><code>.u-no-padding<strong>-{BREAKPOINT REFERENCE}</strong></code> Removes all paddings from the breakpoint referenced in the class name.</p>
<p><code>.u-no-padding-top<strong>-{BREAKPOINT REFERENCE}</strong></code> Removes top paddin from the breakpoint referenced in the class name.g</p>
<p><code>.u-no-padding-right<strong>-{BREAKPOINT REFERENCE}</strong></code> Removes right padding from the breakpoint referenced in the class name.</p>
<p><code>.u-no-padding-bottom<strong>-{BREAKPOINT REFERENCE}</strong></code> Removes bottom padding from the breakpoint referenced in the class name.</p>
<p><code>.u-no-padding-left<strong>-{BREAKPOINT REFERENCE}</strong></code> Removes left padding from the breakpoint referenced in the class name.</p>
<p><code>.u-padding<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds <var>$space</var> variable padding from the breakpoint referenced in the class name.</p>
<p><code>.u-padding-half<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds half <var>$space</var> variable padding from the breakpoint referenced in the class name.</p>
<p><code>.u-padding-top<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds <var>$space</var> variable padding to the top from the breakpoint referenced in the class name.</p>
<p><code>.u-padding-top-half<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds half <var>$space</var> variable padding to the top from the breakpoint referenced in the class name.</p>
<p><code>.u-padding-right<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds <var>$space</var> variable padding to the right from the breakpoint referenced in the class name.</p>
<p><code>.u-padding-right-half<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds half <var>$space</var> variable padding to the right from the breakpoint referenced in the class name.</p>
<p><code>.u-padding-bottom<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds <var>$space</var> variable padding to the bottom from the breakpoint referenced in the class name.</p>
<p><code>.u-padding-bottom-half<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds half <var>$space</var> variable padding to the bottom from the breakpoint referenced in the class name.</p>
<p><code>.u-padding-left<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds <var>$space</var> variable padding to the left from the breakpoint referenced in the class name.</p>
<p><code>.u-padding-left-half<strong>-{BREAKPOINT REFERENCE}</strong></code> Adds half <var>$space</var> variable padding to the left from the breakpoint referenced in the class name.</p>
<hr/>
<p>The above utility classes will allow you to amend an element's spacing based on the breakpoint reference you use from the default list below:</p>
<pre>
$breakpoints: (
    xs: 0px,
    sm: 544px,
    md: 768px,
    lg: 992px,
    xl: 1200px,
    xxl: 1440px
) !default;
</pre>
<p>Utility classes will be built for all breakpoints apart from ones with a 0px value.</p>
<p><em>The breakpoints here are the same breakpoints used for <stong>@vivid-web/flexboxgrid-sass</stong>.</em></p>
<p>Each breakpoint creates a min-width media query version of the utility class. This allows chaining of class names for responsive display styles. For instance, is you use the <strong>.u-no-margin-right</strong> class on an element, the element with have
    <code>margin-right: 0;</code> from a window width of 0px, and then on if you add <strong>.u-margin-right-auto-md</strong> to the same element, it will have <code>margin-right: auto;</code> from a window width of 768px</p>

<h4>Breakpoint Specific</h4>
<p>If you only want a certain style for a specific breakpoint, and no others, you can use the <strong>-specific</strong> suffix.</p>
<p>For example, if you want to remove the right margin from a window width 768px to 992px then you can use <strong>.u-no-margin-right-md-specific</strong></p>