Utilities for spacing elements using paddings and margins. Also supports 2 media queries. The custom-media configuration can be overriden by your app or excluded.

@custom-media --sm-viewport (min-width:320px) and (max-width:640px);
@custom-media --md-viewport (min-width:640px) and (max-width:960px);

Utils Spacing - Margin Default

Used to force margins on any element. Default margin spacing.

HTML

<style>
    .Test-area {
        width: 250px;
        background-color: red;
        border:1px solid white;
        text-align: center;
    }
    .Test-area > div {
    	background-color: #cccccc;
    }
</style>
<div class="Test-area"><div class="u-m">margin</div></div>
<div class="Test-area"><div class="u-mh">horizontal margin</div></div>
<div class="Test-area"><div class="u-mv">vertical margin</div></div>
<div class="Test-area"><div class="u-mt">top margin</div></div>
<div class="Test-area" style="height:30px"><div class="u-mb">bottom margin</div></div>
<div class="Test-area"><div class="u-ml">left margin</div></div>
<div class="Test-area"><div class="u-mr">right margin</div></div>

Utils Spacing - Margin Small

Used to force margins on any element. Small variation.

HTML

<style>
    .Test-area.sized {
		height: 40px;
    }
</style>
<div class="Test-area sized"><div class="u-m-">margin</div></div>
<div class="Test-area sized"><div class="u-mh-">horizontal margin</div></div>
<div class="Test-area sized"><div class="u-mv-">vertical margin</div></div>
<div class="Test-area sized"><div class="u-mt-">top margin</div></div>
<div class="Test-area sized"><div class="u-mb-">bottom margin</div></div>
<div class="Test-area sized"><div class="u-ml-">left margin</div></div>
<div class="Test-area sized"><div class="u-mr-">right margin</div></div>

Utils Spacing - Margin Tiny

Tiny variation.

HTML

<div class="Test-area"><div class="u-m--">margin</div></div>
<div class="Test-area"><div class="u-mh--">horizontal margin</div></div>
<div class="Test-area"><div class="u-mv--">vertical margin</div></div>
<div class="Test-area"><div class="u-mt--">top margin</div></div>
<div class="Test-area" style="height:30px"><div class="u-mb--">bottom margin</div></div>
<div class="Test-area"><div class="u-ml--">left margin</div></div>
<div class="Test-area"><div class="u-mr--">right margin</div></div>

Utils Spacing - Margin Large

Used to force margins on any element. Large variation.

HTML

<div class="Test-area"><div class="u-m+">margin</div></div>
<div class="Test-area"><div class="u-mh+">horizontal margin</div></div>
<div class="Test-area"><div class="u-mv+">vertical margin</div></div>
<div class="Test-area"><div class="u-mt+">top margin</div></div>
<div class="Test-area"><div class="u-mb+">bottom margin</div></div>
<div class="Test-area"><div class="u-ml+">left margin</div></div>
<div class="Test-area"><div class="u-mr+">right margin</div></div>

Utils Spacing - Margin Huge

Used to force margins on any element. Huge variation.

HTML

<div class="Test-area"><div class="u-m++">margin</div></div>
<div class="Test-area"><div class="u-mh++">horizontal margin</div></div>
<div class="Test-area"><div class="u-mv++">vertical margin</div></div>
<div class="Test-area"><div class="u-mt++">top margin</div></div>
<div class="Test-area"><div class="u-mb++">bottom margin</div></div>
<div class="Test-area"><div class="u-ml++">left margin</div></div>
<div class="Test-area"><div class="u-mr++">right margin</div></div>

Utils Spacing - No Margin

Used to force no margins on any element.

HTML

<style>
    .Test-area.margined > div {
    	margin: 10px;
    }
</style>
<div class="Test-area margined"><div class="u-m0">no margin</div></div>
<div class="Test-area margined"><div class="u-mh0">no horizontal margin</div></div>
<div class="Test-area margined"><div class="u-mv0">no vertical margin</div></div>
<div class="Test-area margined"><div class="u-mt0">no top margin</div></div>
<div class="Test-area margined"><div class="u-mb0">no bottom margin</div></div>
<div class="Test-area margined"><div class="u-ml0">no left margin</div></div>
<div class="Test-area margined"><div class="u-mr0">no right margin</div></div>

Utils Spacing - Negative Default Margin

Used to force default negative margins on any element.

HTML

<style>
    .Test-area {
        width: 250px;
        background-color: red;
        border:1px solid white;
        text-align: center;
    }
    .Test-area > div {
    	background-color: #cccccc;
    }
    .Test-area.padded {
    	padding: 20px;
    }
</style>
<div class="Test-area padded"><div class="u-nm">negative</div></div>
<div class="Test-area padded"><div class="u-nmh">negative horizontal</div></div>
<div class="Test-area padded"><div class="u-nmv">negative vertical</div></div>
<div class="Test-area padded"><div class="u-nmt">negative top</div></div>
<div class="Test-area padded"><div class="u-nmb">negative bottom</div></div>
<div class="Test-area padded"><div class="u-nml">negative left</div></div>
<div class="Test-area padded"><div class="u-nmr">negative right</div></div>

Utils Spacing - Negative Margin Tiny

Used to force negative margins on any element. Tiny variation.

HTML

<div class="Test-area padded"><div class="u-nm--">negative</div></div>
<div class="Test-area padded"><div class="u-nmh--">negative horizontal</div></div>
<div class="Test-area padded"><div class="u-nmv--">negative vertical</div></div>
<div class="Test-area padded"><div class="u-nmt--">negative top</div></div>
<div class="Test-area padded"><div class="u-nmb--">negative bottom</div></div>
<div class="Test-area padded"><div class="u-nml--">negative left</div></div>
<div class="Test-area padded"><div class="u-nmr--">negative right</div></div>

Utils Spacing - Negative Margin Small

Used to force negative margins on any element. Small variation.

HTML

<div class="Test-area padded"><div class="u-nm- sm--view--m- md--view--m-">negative</div></div>
<div class="Test-area padded"><div class="u-nmh- sm--view--mh- md--view--mh-">negative horizontal</div></div>
<div class="Test-area padded"><div class="u-nmv- sm--view--mv- md--view--mv-">negative vertical</div></div>
<div class="Test-area padded"><div class="u-nmt- sm--view--mt- md--view--mt-">negative top</div></div>
<div class="Test-area padded"><div class="u-nmb- sm--view--mb- md--view--mb-">negative bottom</div></div>
<div class="Test-area padded"><div class="u-nml- sm--view--ml- md--view--ml-">negative left</div></div>
<div class="Test-area padded"><div class="u-nmr- sm--view--mr- md--view--mr-">negative right</div></div>

Utils Spacing - Negative Margin Large

Used to force negative margins on any element. Large variation.

HTML

<div class="Test-area padded"><div class="u-nm+ sm--view--m+ md--view--m+">negative</div></div>
<div class="Test-area padded"><div class="u-nmh+ sm--view--mh+ md--view--mh+">negative horizontal</div></div>
<div class="Test-area padded"><div class="u-nmv+ sm--view--mv+ md--view--mv+">negative vertical</div></div>
<div class="Test-area padded"><div class="u-nmt+ sm--view--mt+ md--view--mt+">negative top</div></div>
<div class="Test-area padded"><div class="u-nmb+ sm--view--mb+ md--view--mb+">negative bottom</div></div>
<div class="Test-area padded"><div class="u-nml+ sm--view--ml+ md--view--ml+">negative left</div></div>
<div class="Test-area padded"><div class="u-nmr+ sm--view--mr+ md--view--mr+">negative right</div></div>

Utils Spacing - Negative Margin Huge

Used to force negative margins on any element. Huge variation.

HTML

<div class="Test-area padded"><div class="u-nm++">negative</div></div>
<div class="Test-area padded"><div class="u-nmh++">negative horizontal</div></div>
<div class="Test-area padded"><div class="u-nmv++">negative vertical</div></div>
<div class="Test-area padded"><div class="u-nmt++">negative top</div></div>
<div class="Test-area padded"><div class="u-nmb++">negative bottom</div></div>
<div class="Test-area padded"><div class="u-nml++">negative left</div></div>
<div class="Test-area padded"><div class="u-nmr++">negative right</div></div>

Utils Spacing - Padding Default

Used to force paddings on any element. Default padding spacing.

HTML

<style>
    .Test-area {
        text-align: center;
        margin-bottom: 20px;
    }
    .Test-area > span {
    	background-color: #cccccc;
    }
</style>
<div class="Test-area"><span class="u-p">padding</span></div>
<div class="Test-area"><span class="u-ph">horizontal padding</span></div>
<div class="Test-area"><span class="u-pv">vertical padding</span></div>
<div class="Test-area"><span class="u-pt">top padding</span></div>
<div class="Test-area"><span class="u-pb">bottom padding</span></div>
<div class="Test-area"><span class="u-pl">left padding</span></div>
<div class="Test-area"><span class="u-pr">right padding</span></div>

Utils Spacing - Padding Small

Used to force paddings on any element. Small variation.

HTML

<style>
    .Test-area.sized {
		height: 40px;
    }
</style>
<div class="Test-area sized"><span class="u-p-">padding</span></div>
<div class="Test-area sized"><span class="u-ph-">horizontal padding</span></div>
<div class="Test-area sized"><span class="u-pv-">vertical padding</span></div>
<div class="Test-area sized"><span class="u-pt-">top padding</span></div>
<div class="Test-area sized"><span class="u-pb-">bottom padding</span></div>
<div class="Test-area sized"><span class="u-pl-">left padding</span></div>
<div class="Test-area sized"><span class="u-pr-">right padding</span></div>

Utils Spacing - Padding Tiny

Tiny variation.

HTML

<div class="Test-area"><span class="u-p--">padding</span></div>
<div class="Test-area"><span class="u-ph--">horizontal padding</span></div>
<div class="Test-area"><span class="u-pv--">vertical padding</span></div>
<div class="Test-area"><span class="u-pt--">top padding</span></div>
<div class="Test-area"><span class="u-pb--">bottom padding</span></div>
<div class="Test-area"><span class="u-pl--">left padding</span></div>
<div class="Test-area"><span class="u-pr--">right padding</span></div>

Utils Spacing - Padding Large

Used to force paddings on any element. Large variation.

HTML

<div class="Test-area"><span class="u-p+">padding</span></div>
<div class="Test-area"><span class="u-ph+">horizontal padding</span></div>
<div class="Test-area"><span class="u-pv+">vertical padding</span></div>
<div class="Test-area"><span class="u-pt+">top padding</span></div>
<div class="Test-area"><span class="u-pb+">bottom padding</span></div>
<div class="Test-area"><span class="u-pl+">left padding</span></div>
<div class="Test-area"><span class="u-pr+">right padding</span></div>

Utils Spacing - Padding Huge

Used to force paddings on any element. Huge variation.

HTML

<div class="Test-area"><span class="u-p++">padding</span></div>
<div class="Test-area"><span class="u-ph++">horizontal padding</span></div>
<div class="Test-area"><span class="u-pv++">vertical padding</span></div>
<div class="Test-area"><span class="u-pt++">top padding</span></div>
<div class="Test-area"><span class="u-pb++">bottom padding</span></div>
<div class="Test-area"><span class="u-pl++">left padding</span></div>
<div class="Test-area"><span class="u-pr++">right padding</span></div>

Utils Spacing - No Padding

Used to force no paddings on any element.

HTML

<style>
    .Test-area.paddinged > span {
    	padding: 10px;
    }
</style>
<div class="Test-area paddinged"><span class="u-p0">no padding</span></div>
<div class="Test-area paddinged"><span class="u-ph0">no horizontal padding</span></div>
<div class="Test-area paddinged"><span class="u-pv0">no vertical padding</span></div>
<div class="Test-area paddinged"><span class="u-pt0">no top padding</span></div>
<div class="Test-area paddinged"><span class="u-pb0">no bottom padding</span></div>
<div class="Test-area paddinged"><span class="u-pl0">no left padding</span></div>
<div class="Test-area paddinged"><span class="u-pr0">no right padding</span></div>

Utils Spacing - Media queries

Media queries can be turned on for any of the breakpoints defined by your app.

HTML

<div class="Test-area"><div class="u-lap-mv++">Above lap size lots of vertical margin</div></div>
<div class="Test-area"><div class="u-desk-mv++">Above desk size of lots vertical margin</div></div>
<div class="Test-area"><div class="u-desk-wide-mv++">Above desk wide size lots of vertical margin</div></div>
<div class="Test-area"><div class="u-mv++ u-desk-mv0">Large vertical margin until desk size, then none.</div></div>