{% 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 &oacute;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 &oacute;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" %}