<!-- border -->
<h2 class="h3 margin-bottom-1">Border</h2>
<hr class="marginless margin-bottom-2" />

<div class="panel panel__inner margin-bottom-1 bordered">
    <div style="width: 50px; height: 50px;" class="background-color-info round"></div>
    .round
</div>
<div class="panel panel__inner margin-bottom-1 bordered">
    <div style="width: 50px; height: 50px;" class="background-color-info round radiusless"></div>
    .radiusless
</div>
<div class="panel panel__inner margin-bottom-1 bordered">.bordered</div>
<div class="panel panel__inner margin-bottom-1 bordered rounded">.rounded</div>
<div class="panel panel__inner margin-bottom-1 bordered borderless">.borderless</div>


<!-- margin and padding -->
<h2 class="h3 margin-top-3 margin-bottom-1">Margin / Padding</h2>
<hr class="marginless margin-bottom-2" />
<p>
    Padding and margin-left, -top, -right and -bottom. The Classes Paddingless and Marginless sets padding and margin in each
    direction to zero.
</p>

<h3 class="h4">SCSS:</h3>
<pre class="code"><code>$crispy__helpers__spacing-gap: 8px;
$crispy__helpers__spacing-steps: 6;
$crispy__helpers__spacing-max-steps: 3;
$crispy__helpers__spacing-breakpoints: (
    $crispy__md: 12px
);
</code></pre>

<div class="panel bordered padding-bottom-0">padding-bottom-0</div>
<div class="panel bordered padding-bottom-1">padding-bottom-1</div>
<div class="panel bordered padding-bottom-2">padding-bottom-2</div>
<div class="panel bordered padding-bottom-3">padding-bottom-3</div>
<div class="panel bordered padding-bottom-4">padding-bottom-4</div>
<div class="panel bordered padding-bottom-5">padding-bottom-5</div>
<div class="panel bordered padding-bottom-6">padding-bottom-6</div>
<div class="panel bordered paddingless">paddingless</div>
<div class="panel bordered paddingless">marginless</div>


<!-- typography -->
<h2 class="h3 margin-top-3 margin-bottom-1">Typography</h2>
<hr class="marginless margin-bottom-2" />

<p class="panel panel__inner bordered text-left">text-left</p>
<p class="panel panel__inner bordered text-center">text-center</p>
<p class="panel panel__inner bordered text-right">text-right</p>
<p class="panel panel__inner bordered text-justify">
    text-justify<br />
    I'm baby literally tousled ramps 8-bit franzen, yuccie before they sold out stumptown XOXO palo santo. Blog taiyaki vegan crucifix. Mustache raw denim shabby chic
    vegan hexagon aesthetic deep v tofu man braid church-key pork belly unicorn pinterest. Palo santo heirloom banh mi waistcoat, neutra listicle selvage sustainable adaptogen tote bag art party migas ethical PBR&B 8-bit.
    Chillwave hammock VHS post-ironic, tumblr brunch normcore blue bottle chambray. Austin vice microdosing celiac. Bushwick blog farm-to-table succulents mlkshk actually.
</p>
<p class="panel panel__inner bordered text-italic">text-italic</p>
<p class="panel panel__inner bordered text-light">text-light</p>
<p class="panel panel__inner bordered text-normal">text-normal</p>
<p class="panel panel__inner bordered text-medium">text-medium</p>
<p class="panel panel__inner bordered text-bold">text-bold</p>
<p class="panel panel__inner bordered text-capitalize">text-capitalize</p>
<p class="panel panel__inner bordered text-uppercase">text-uppercase</p>
<p class="panel panel__inner bordered text-smaller">text-smaller</p>
<p class="panel panel__inner bordered text-crossed">text-crossed</p>
<p class="panel panel__inner bordered text-unterline">text-underline</p>


<!-- Font-Size -->
<h2 class="h3 margin-top-3 margin-bottom-1">Font Size</h2>
<hr class="marginless margin-bottom-2" />
<h3 class="h4">SCSS:</h3>
<pre class="code"><code>$crispy__font-size: 0.9rem;
$crispy__font-size-breakpoints: (
    $crispy__md: 1.1rem
);

$crispy__font-sizes: (
    'default' : $crispy__font-size,
    'small'   : $crispy__font-size * 0.75,
    'medium'  : $crispy__font-size * 1.25,
    'large'   : $crispy__font-size * 1.5,
    'big'     : $crispy__font-size * 1.75,
    'mega'    : $crispy__font-size * 2,
);
</code></pre>
<p class="panel panel__inner bordered text-size-small">text-size-small</p>
<p class="panel panel__inner bordered text-size-medium">text-size-medium</p>
<p class="panel panel__inner bordered text-size-large">text-size-large</p>
<p class="panel panel__inner bordered text-size-big">text-size-big</p>
<p class="panel panel__inner bordered text-size-mega">text-size-mega</p>


<!-- Float -->
<h2 class="h3 margin-top-3 margin-bottom-1">Float</h2>
<hr class="marginless margin-bottom-2" />
<p class="panel panel__inner bordered clearfix">
    <span class="float-left">float-left</span>
</p>
<p class="panel panel__inner bordered clearfix">
    <span class="float-right">float-right</span>
</p>
<p class="panel panel__inner bordered">
    <span class="float-right float-none">float-none</span>
</p>
<p class="panel panel__inner bordered">
    <span class="show centered width-25 text-center background-color-info">centered</span>
</p>


<!-- Colors -->
<h2 class="h3 margin-top-3 margin-bottom-1">Colors</h2>
<hr class="marginless margin-bottom-2" />
<h3 class="h4">SCSS:</h3>
<pre class="code"><code>$crispy__colors: (
    'primary'    : $crispy__color-primary,
    'secondary'  : $crispy__color-secondary,
    'success'    : $crispy__color-success,
    'warning'    : $crispy__color-warning,
    'danger'     : $crispy__color-danger,
    'info'       : $crispy__color-info,
    'grey'       : $crispy__color-grey,
    'grey-light' : $crispy__color-grey-light,
    'grey-dark'  : $crispy__color-grey-dark,
    'white'      : $crispy__color-white
);
</code></pre>
<p class="panel panel__inner bordered text-color-danger">text-color-danger</p>
<p class="panel panel__inner bordered background-color-info">background-color-info</p>
<p class="panel panel__inner bordered border-color-success">border-color-success</p>


<!-- Hide & Show -->
<h2 class="h3 margin-top-3 margin-bottom-1">Hide & Show</h2>
<hr class="marginless margin-bottom-2" />
<p>
    For each Breakpoint there is a hide & show-CSS-Class.
</p>

<h3 class="h4">Html:</h3>
<pre class="code"><code>&lt;span class=&quot;hide&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;show&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;show-inline&quot;&gt;&lt;/span&gt;
&lt;span class=&quot;show hide-lg&quot;&gt;&lt;/span&gt;
</code></pre>


<!-- width -->
<h2 class="h3 margin-top-3 margin-bottom-1">Width</h2>
<hr class="marginless margin-bottom-2" />
<h3 class="h4">SCSS:</h3>
<pre class="code"><code>$crispy__helpers__width: (
    '25' : 25%,
    '50' : 50%,
    '75' : 75%,
    '100': 100%
);
</code></pre>

<div class="panel panel__inner bordered width-25 margin-bottom-1">width-25</div>
<div class="panel panel__inner bordered width-50 margin-bottom-1">width-50</div>
<div class="panel panel__inner bordered width-75 margin-bottom-1">width-75</div>
<div class="panel panel__inner bordered width-100 margin-bottom-1">width-100</div>