castlecss-docs
Version:
Documentation website for CastleCSS
183 lines (169 loc) • 6.97 kB
HTML
{% set currentPageId = 'utility_spacers' %}{% set pageTitle = 'Utility spacers - CastleCSS' %}{% include "inc/header.html" %}
<!-- Main -->
<div class="b0_12 b4_14 b4_push_01">
<div class="p p-b3-3x">
<div class="block">
<h1>Utility spacers</h1>
<p class="intro">Manipulate your spacing the easy way</p>
<p>Add padding and margin with these default classes. See <a href="utility.html">utility.scss</a> for more utility classes.
</p>
</div>
<div class="block">
<h2>Padding <span class="notify-positive">p{side} {-breakpoint} {-size}</span></h2>
<p>Add padding with the class <code>p</code>. This is adjustable per element and breakpoint.</p>
<p>The padding uses the <code>$padding-default</code> which is set to 12px by default.</p>
<p>The standard padding of CastleCSS is <code>12px</code>; </p>
<p>
It's also possible to give an element 2 or 3 times the default padding like this. <strong>Example:</strong> <code>p-2x</code> (padding: 24px;) <code>p-3x</code> (padding: 24px;)
</p>
<h3>Options</h3>
<h4>Default padding</h4>
<p>Add uniform padding to an element with the class <code>p</code>. The value of <code>p</code> is <code>$padding-default</code> </p>
<h4>top, bottom, left ór right padding.</h4>
<p>Place the padding on the top, right, bottom or left only with respectively; <code>pt</code>,<code>pr</code>, <code>pb</code> en <code>pl</code>. <br />
Combine this with 2x and 3x for bigger paddings. Example: <code>pl-b2-3x</code> (padding-left breakpoint $2+: 36px)</p>
<p>You can also combine this with classes for 2x and 3x. <strong>Example:</strong> <code>pl-b2-3x</code> (padding-left breakpoint $2+: 36px)</p>
<h4>No padding</h4>
<p>Turn off padding for a breakpoint by using the class <code>p-0</code> or <code>p-{breakpoint}-0</code>. <strong>Example:</strong> <code>p-b2-0</code> (no padding $b2+) <strong>or</strong> <code>pt-b3-0</code> (no padding-top breakpoint $b3+).</p>
</div>
<hr /><br />
<div class="block">
<table class="specs">
<tr>
<th>Class</th>
<th>Value</th>
</tr>
<tr>
<td><code>p</code></td>
<td>padding: $padding-default</td>
</tr>
<tr>
<td><code>pl</code></td>
<td>padding-left: $padding-default</td>
</tr>
<tr>
<td><code>pt</code></td>
<td>padding-top: $padding-default</td>
</tr>
<tr>
<td><code>pr</code></td>
<td>padding-right: $padding-default</td>
</tr>
<tr>
<td><code>pb</code></td>
<td>padding-bottom: $padding-default</td>
</tr>
<tr>
<td><code>p-2x</code></td>
<td>padding: $padding-default*2</td>
</tr>
<tr>
<td><code>p{side}-2x</code></td>
<td>padding-{side}: $padding-default*2</td>
</tr>
<tr>
<td><code>p{side}-{breakpoint}-2x</code></td>
<td>padding-{side}: $padding-default*2 ( {breakpoint}+ )</td>
</tr>
<tr>
<td><code>p-3x</code></td>
<td>padding: $padding-default*3</td>
</tr>
<tr>
<td><code>p{side}-3x</code></td>
<td>padding-{side}: $padding-default*3</td>
</tr>
<tr>
<td><code>p{side}-{breakpoint}-3x</code></td>
<td>padding-{side}: $padding-default*3 ( {breakpoint}+ )</td>
</tr>
</table>
</div>
<div class="block">
<h2>Margin <span class="notify-positive">m{side} {-breakpoint} {-size}</span></h2>
<p>Add margin with the class <code>m</code>. This is adjustable per element and breakpoint.</p>
<p>The margin uses the <code>$margin-default</code> which is set to 12px by default.</p>
<p>The standard margin of CastleCSS is <code>12px</code>; </p>
<p>
It's also possible to give an element 2 or 3 times the default margin like this. <strong>Example:</strong> <code>m-2x</code> (margin: 24px;) <code>m-3x</code> (margin: 24px;)
</p>
<h3>Options</h3>
<h4>Default margin</h4>
<p>Add uniform margin to an element with the class <code>m</code>. The value of <code>m</code> is <code>$margin-default</code> </p>
<h4>top, bottom, left ór right margin.</h4>
<p>Place the margin on the top, right, bottom or left only with respectively; <code>mt</code>,<code>mr</code>, <code>mb</code> en <code>ml</code>. <br />
Combine this with 2x and 3x for bigger margins. Example: <code>ml-b2-3x</code> (margin-left breakpoint $2+: 36px)</p>
<p>You can also combine this with classes for 2x and 3x. <strong>Example:</strong> <code>ml-b2-3x</code> (margin-left breakpoint $2+: 36px)</p>
<h4>No margin</h4>
<p>Turn off margin for a breakpoint by using the class <code>m-0</code> or <code>m-{breakpoint}-0</code>. <strong>Example:</strong> <code>m-b2-0</code> (no margin $b2+) <strong>or</strong> <code>mt-b3-0</code> (no margin-top breakpoint $b3+).</p>
</div>
<div class="block">
<table class="specs">
<tr>
<th>Class</th>
<th>Value</th>
</tr>
<tr>
<td><code>m</code></td>
<td>margin: $margin-default</td>
</tr>
<tr>
<td><code>ml</code></td>
<td>margin-left: $margin-default</td>
</tr>
<tr>
<td><code>mt</code></td>
<td>margin-top: $margin-default</td>
</tr>
<tr>
<td><code>mr</code></td>
<td>margin-right: $margin-default</td>
</tr>
<tr>
<td><code>mb</code></td>
<td>margin-bottom: $margin-default</td>
</tr>
<tr>
<td><code>m-2x</code></td>
<td>margin: $margin-default*2</td>
</tr>
<tr>
<td><code>m{side}-2x</code></td>
<td>margin-{side}: $margin-default*2</td>
</tr>
<tr>
<td><code>m{side}-{breakpoint}-2x</code></td>
<td>margin-{side}: $margin-default*2 ( {breakpoint}+ )</td>
</tr>
<tr>
<td><code>m-3x</code></td>
<td>margin: $margin-default*3</td>
</tr>
<tr>
<td><code>m{side}-3x</code></td>
<td>margin-{side}: $margin-default*3</td>
</tr>
<tr>
<td><code>m{side}-{breakpoint}-3x</code></td>
<td>margin-{side}: $margin-default*3 ( {breakpoint}+ )</td>
</tr>
</table>
</div>
<hr /><br />
<div class="block">
<h2>Examples</h2>
<div class="block-invert m mb-b4-3x p">
I have $margin-default all around and margin-bottom 3x from breakpoint 4 and up. I also have $padding-default.
</div>
<pre class="brush: xml;">
<div class="m mb-b4-3x p"> </div></pre>
<div class="block-invert p-2x pt-b4-3x p">
I have $padding-default*2 all around and padding-top 3x from breakpoint 4 and up.
</div>
<pre class="brush: xml;">
<div class="p-2x pt-b4-3x p"> </div></pre>
</div>
</div>
</div>
<!-- End main -->
{% include "inc/footer.html" %}