<h2 class="h2 margin-bottom-1">
    Installation
</h2>
<hr class="marginless margin-bottom-2" />
<pre class="code"><code>npm install crispy-css
</code></pre>

<h3 class="h4">SCSS</h3>
<pre class="code"><code>@import
    "node_modules/crispy-css/src/crispy";
</code></pre>
<p>
    Now include Components and Helpers you need.
</p>
<pre class="code"><code>@include crispy__helpers();
@include crispy__button();
@include crispy__code();
@include crispy__field();
@include crispy__group();
@include crispy__hero();
@include crispy__icon();
@include crispy__media();
@include crispy__modal();
@include crispy__overlay();
@include crispy__panel();
@include crispy__progress();
@include crispy__table();
</code></pre>

<p>
    There are two additionals Versions of <span class="text-bold">Crispy</span>.
    There is <span class="text-bold">crispy-minimal</span>, that only includes Helpers and
    <span class="text-bold">crispy-all</span> that includes Helpers and all Components.
</p>
<pre class="code"><code>@import
    "node_modules/crispy-css/src/crispy-all";
</code></pre>
<pre class="code"><code>@import
    "node_modules/crispy-css/src/crispy-minimal";
</code></pre>

<h4 class="h5">Configuration</h4>
<h5 class="h6">Breakpoints</h5>
<pre class="code"><code>$crispy__xs : 576px;
$crispy__sm : 768px;
$crispy__md : 992px;
$crispy__lg : 1200px;
$crispy__xlg: 1600px;
</code></pre>

<h5 class="h6">Fonts</h5>
<pre class="code"><code>$crispy__direction: ltr;

$crispy__font-family: "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif;
$crispy__font-weight: normal;
$crispy__font-size: 0.9rem;
$crispy__font-size-breakpoints: (
    $crispy__md: 1.1rem
);

$crispy__font-family-monospace: "Lucida Console", Monaco, monospace;
$crispy__font-weight-monospace: normal ;
$crispy__font-size-monospace: 1rem ;
$crispy__font-size-monospace__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,
);

$crispy__line-height: 1.4;
$crispy__line-height__breakpoints: (
    $crispy__md: $crispy__golden-ratio
);
</code></pre>

<h5 class="h6">Colors</h5>
<pre class="code"><code>$crispy__color-primary: #f18f01;
$crispy__color-secondary: #b3b2af;
$crispy__color-success: #5cb85c;
$crispy__color-warning: #f0ad4e;
$crispy__color-danger: #d9534f;
$crispy__color-info: #0090d4;

$crispy__color-grey-light: hsl(0, 0%, 97%);
$crispy__color-grey: hsl(0, 0%, 48%);
$crispy__color-grey-dark: hsl(0, 0%, 29%);
$crispy__color-white: white;

$crispy__color-text: #363636;
$crispy__color-border: #dfdfdf;
$crispy__color-background: #ffffff;

$crispy__color-panel: #f9f9f9;

$crispy__color-link: $crispy__color-primary;
$crispy__color-link-hover: $crispy__color-secondary;
$crispy__color-link-visited: $crispy__color-primary;
$crispy__color-link-focus: $crispy__color-primary;
$crispy__color-link-active: $crispy__color-primary;

$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>

<h5 class="h6">Padding & Magin</h5>
<pre class="code"><code>$crispy__margin: 0 0 15px;
$crispy__margin-breakpoints: (
    $crispy__md: 0 0 20px
);

$crispy__padding: 0.4em 0.6em;
$crispy__padding-breakpoints: (
    $crispy__md: 0.8em 1.1em
);
</code></pre>

<h5 class="h6">Heading</h5>
<pre class="code"><code>$crispy__heading__font-sizes: (
    'h1': $crispy__font-size * 2.5,
    'h2': $crispy__font-size * 2,
    'h3': $crispy__font-size * 1.75,
    'h4': $crispy__font-size * 1.5,
    'h5': $crispy__font-size * 1.25,
    'h6': $crispy__font-size
) ;

$crispy__heading__font-sizes__breakpoints: (
    $crispy__md: 1.2rem
);

$crispy__heading__font-weight: bold;
$crispy__heading__font-family: $crispy__font-family;
$crispy__heading__margin: $crispy__margin;
$crispy__heading__margin-breakpoints: $crispy__margin-breakpoints;
</code></pre>

<h5 class="h6">Borders</h5>
<pre class="code"><code>$crispy__border-radius: 3px !default;
$crispy__border: 1px solid $crispy__color-border !default;
</code></pre>

<h5 class="h6">Z-Index</h5>
<pre class="code"><code>$crispy__z-index: (
    'overlay': 90,
    'modal'  : 100
) !default;
</code></pre>

<p>
    For Custom Variables add a File before importing Crispy.
</p>
<pre class="code"><code>@import
    "config",
    "node_modules/crispy-css/src/crispy";
</code></pre>


<!-- examples -->
<h2 class="margin-top-3 margin-bottom-1">
Example
</h2>
<hr class="marginless margin-bottom-2" />
<p>
    You find all of this Site in "/src/example". This is also an Example how you can use Crispy CSS and orginaize your Project.
</p>

<h3 class="h4">Site</h3>
<p>
    Contains header, footer and some partials that are used on a Site or Webapp.
</p>

<h3 class="h4">Templates</h3>
<p>
    Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.
</p>