-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathtrumps.spacing.html
29 lines (24 loc) · 7.87 KB
/
trumps.spacing.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><link href="http://fonts.googleapis.com/css?family=Open+Sans:400,700" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Bitter:400,700" rel="stylesheet" type="text/css"><link href="http://fonts.googleapis.com/css?family=Inconsolata:400,700" rel="stylesheet" type="text/css"><title>inuit kitchen sink | _trumps.spacing.scss</title><meta name="description" content="inuit kitchen sink lists you all modules of inuitcss and helps you getting started with the framework."><meta name="viewport" content="width=device-width,minimum-scale=1"><link rel="stylesheet" href="build/assets/css/style.css"><link rel="shortcut icon" href="src/assets/img/favicon.png" type="image/png"></head><body><header class="[ page-head ] [ pv- mb ]"><div class="[ page-wrap ] [ clearfix ]"><h6 class="[ float--left ] [ mb0 ]"><a class="site-logo" href="index.html">inuit kitchen sink</a></h6><a class="[ site-nav-trigger ] [ float--right ]" href="#site-nav"></a></div></header><div class="page-wrap"><div class="[ layout layout--rev ]"><div class="[ layout__item 8/12 portable-1/1 ] [ mb++ ]"><h1 class="mb0">_trumps.spacing.scss</h1><div class="mb"><a class="zeta" href="https://github.com/inuitcss/trumps.spacing/blob/master/_trumps.spacing.scss">View source</a><br></div><p>This module provides a few helper classes for margins and paddings. Just assign these classes to your components however you like:</p><pre><code class="language-html"><div class="newsletter-box u-mb+">
...
</div></code></pre><h3 id="naming">Naming</h3><p>There are two basic variations of classes:</p><ul><li><code>.u-m</code> for margins</li><li><code>.u-p</code> for paddings</li></ul><p>These classes would do:</p><pre><code class="language-scss"><span class="class">.u-m</span> {
<span class="attribute">margin</span><span class="value">: $inuit-base-spacing-unit;</span>
}
<span class="class">.u-p</span> {
<span class="attribute">padding</span><span class="value">: $inuit-base-spacing-unit;</span>
}</code></pre><h5 id="specific-directions">Specific Directions</h5><p>If you want to assign margins/paddings just for specific directions, you've got to specify the classes furthermore:</p><ul><li><code>.u-mt</code> for margin-top</li><li><code>.u-mr</code> for margin-right</li><li><code>.u-mb</code> for margin-bottom</li><li><code>.u-ml</code> for margin-left</li><li><code>.u-mv</code> for margin-top and margin-bottom</li><li><code>.u-mh</code> for margin-left and margin-right</li></ul><p>And just as well for the padding classes.</p><h5 id="sizes">Sizes</h5><p>Each particular class above has always one specific value of margin/padding (default is <code>$inuit-base-spacing-unit</code>). You can control the amount of spacing by assigning different classes:</p><ul><li><code>.u-pb--</code> for padding-bottom with a tiny spacing</li><li><code>.u-pl-</code> for padding-left with a small spacing</li><li><code>.u-pt+</code> for padding-top with a large spacing</li><li><code>.u-pr++</code> for padding-right with a huge spacing</li><li><code>.u-pb0</code> for resetting padding-bottom to <code>0</code></li></ul><p>And just as well for the margin classes.</p><h5 id="negative-margins">Negative margins</h5><p>For margins there is also the ability of assigning negative spacings:</p><ul><li><code>.u--ml++</code> will set a huge negative margin to the left</li><li><code>.u--mb-</code> will set a small negative margin to the bottom</li></ul><h3 id="enabling-spacings">Enabling spacings</h3><p>Without enabling anything, none of the above will be available. In order to use one of those spacings, you need to enable each specific feature you need by overriding the appropriate variable to <code>true</code>:</p><pre><code class="language-scss">$inuit-enable-margins<span class="value">: false !default;</span>
$inuit-enable-margins--tiny<span class="value">: false !default;</span>
$inuit-enable-margins--<span class="tag">small</span><span class="value">: false !default;</span>
$inuit-enable-margins--large<span class="value">: false !default;</span>
$inuit-enable-margins--huge<span class="value">: false !default;</span>
$inuit-enable-margins--negative<span class="value">: false !default;</span>
$inuit-enable-margins--negative-tiny<span class="value">: false !default;</span>
$inuit-enable-margins--negative-<span class="tag">small</span><span class="value">: false !default;</span>
$inuit-enable-margins--negative-large<span class="value">: false !default;</span>
$inuit-enable-margins--negative-huge<span class="value">: false !default;</span>
$inuit-enable-margins--<span class="attribute">none</span><span class="value">: false !default;</span>
$inuit-enable-paddings<span class="value">: false !default;</span>
$inuit-enable-paddings--tiny<span class="value">: false !default;</span>
$inuit-enable-paddings--<span class="tag">small</span><span class="value">: false !default;</span>
$inuit-enable-paddings--large<span class="value">: false !default;</span>
$inuit-enable-paddings--huge<span class="value">: false !default;</span>
$inuit-enable-paddings--<span class="attribute">none</span><span class="value">: false !default;</span></code></pre><ul class="[ tabs ] [ ui-tabs ] [ mt+ ]"><li class="tabs__item"><a class="tabs__link" href="trumps.headings.html" title="trumps.headings">prev</a></li><li class="tabs__item"><a class="tabs__link" href="trumps.spacing-responsive.html" title="trumps.spacing-responsive">next</a></li></ul></div><div class="[ layout__item 4/12 portable-1/1 ]"><nav role="navigation"><ul id="site-nav" class="[ site-nav ] [ list-bare ] [ portable-p- ]"><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">settings</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="settings.default.html">default</a></li><li><a href="settings.responsive.html">responsive</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">tools</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="tools.functions.html">functions</a></li><li><a href="tools.mixins.html">mixins</a></li><li><a href="tools.responsive.html">responsive</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">base</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="base.headings.html">headings</a></li><li><a href="base.paragraphs.html">paragraphs</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">objects</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="objects.media.html">media</a></li><li><a href="objects.flag.html">flag</a></li><li><a href="objects.block.html">block</a></li><li><a href="objects.pack.html">pack</a></li><li><a href="objects.box.html">box</a></li><li><a href="objects.list-bare.html">list-bare</a></li><li><a href="objects.list-inline.html">list-inline</a></li><li><a href="objects.list-block.html">list-block</a></li><li><a href="objects.list-ui.html">list-ui</a></li><li><a href="objects.tabs.html">tabs</a></li><li><a href="objects.buttons.html">buttons</a></li><li><a href="objects.tables.html">tables</a></li><li><a href="objects.layout.html">layout</a></li></ul></li><li><p class="[ gamma ] [ weight--700 ] [ mb0 ]">trumps</p><ul class="[ site-nav__sub ] [ list-bare ] [ mb ]"><li><a href="trumps.headings.html">headings</a></li><li><a href="trumps.spacing.html">spacing</a></li><li><a href="trumps.spacing-responsive.html">spacing-responsive</a></li><li><a href="trumps.widths.html">widths</a></li><li><a href="trumps.widths-responsive.html">widths-responsive</a></li><li><a href="trumps.clearfix.html">clearfix</a></li></ul></li></ul></nav></div></div></div><footer class="[ page-foot ] [ pv+ ]"><ul class="[ list-inline ] [ page-wrap ]"><li><a href="https://github.com/csshugs/inuit-kitchen-sink">Contribute on GitHub</a></li></ul></footer></body></html>