Components

Button

SCSS:

$crispy__button__font-family: $crispy__font-family;
$crispy__button__font-weight: $crispy__font-weight;
$crispy__button__font-size: $crispy__font-size;
$crispy__button__font-size-breakpoints: $crispy__font-size-breakpoints;

$crispy__button__padding: 0.4em 0.8em;
$crispy__button__padding-breakpoints: (
    $crispy__md: 0.6em 1.2em
);

$crispy__button__margin: $crispy__margin;
$crispy__button__margin-breakpoints: $crispy__margin-breakpoints;

Html:

<button class="button"></button>
<button class="button text-size-medium"></button>
<button class="button text-size-large"></button>
<button class="button width-100"></button>

Code

SCSS:

$crispy__code__border: $crispy__border;
$crispy__code__background-color: $crispy__color-grey-light;

$crispy__code__padding: $crispy__padding;
$crispy__code__padding-breakpoints: $crispy__padding-breakpoints;

$crispy__code__margin: $crispy__margin;
$crispy__code__margin-breakpoints: $crispy__margin-breakpoints;

Html:

<pre class="code">
    <code></code>
</pre>

Fields

SCSS:

$crispy__field__margin: $crispy__margin;
$crispy__field__border: $crispy__border;

$crispy__field__color--valid: $crispy__color-success;
$crispy__field__color--error: $crispy__color-danger;

$crispy__field__border-color--focus: $crispy__color-primary;
$crispy__field__border-color--valid: $crispy__color-success;
$crispy__field__border-color--error: $crispy__color-danger;

$crispy__field__choice__checked__color: $crispy__color-success;
$crispy__field__choice__unchecked__color: $crispy__color-danger;

$crispy__field__input__padding: 0.4em 0.6em;
$crispy__field__input__color: $crispy__color-text;

$crispy__field__select__padding: 0.3em 0.5em;
$crispy__field__panel__padding: 0.3em 0.6em;

$crispy__field__select__background-color: white;
$crispy__field__select__border: $crispy__border;

Input / Textarea

<div class="field">
    <input class="field__text" type="text" />
</div>
<div class="field field--valid">
    <label class="field__label">
        Text
        <input type="text" class="field__text" />
    </label>
    <div class="field__panel">
        error item 1
    </div>
</div>
<div class="field field--error">
    <label class="field__label">
        Text
        <input type="text" class="field__text" />
    </label>
    <div class="field__panel">
        error item 1
    </div>
</div>
<div class="field">
    <label class="field__label">
        Textarea
        <textarea class="field__text"></textarea>
    </label>
</div>

Checkbox

<div class="field">
    <input id="field__checkbox__1" class="field__choice" type="checkbox" name="field__checkbox__1" value="true" />
    <label for="field__checkbox__1" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
        </svg>
        checkbox 1
    </label>
    <input id="field__checkbox__2" class="field__choice" type="checkbox" name="field__checkbox__2" value="true" />
    <label for="field__checkbox__2" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right"></use>
        </svg>
        checkbox 2
    </label>
</div>

Radio

<div class="field">
    <input id="field__radio__1" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
    <label for="field__radio__1" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
        </svg>
        radio item 1
    </label><br />
    <input id="field__radio__2" class="field__choice" type="radio" name="field__radio__1[]" value="true" />
    <label for="field__radio__2" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
        </svg>
        radio item 2
    </label>
</div>
<div class="field field--error">
    <input id="field__radio__3" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
    <label for="field__radio__3" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
        </svg>
        radio item 1
    </label><br />
    <input id="field__radio__4" class="field__choice" type="radio" name="field__radio__2[]" value="true" />
    <label for="field__radio__4" class="field__label">
        <svg class="icon text-size-medium field__choice__unchecked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-left"></use>
        </svg>
        <svg class="icon text-size-medium field__choice__checked" aria-hidden="true">
            <use xlink:href="symbol-defs.svg#icon-toggle-right" />
        </svg>
        radio item 2
    </label>
    <div class="field__panel">
        error item 1
    </div>
</div>

Select

<div class="field">
    <label class="field__label">
        Select Item
        <select class="field__select">
            <option>select item 1</option>
            <option>select item 2</option>
            <option>select item 3</option>
        </select>
    </label>
</div>
<div class="field field--error">
    <label class="field__label">
        Select Item
        <select class="field__select">
            <option>select item 1</option>
            <option>select item 2</option>
            <option>select item 3</option>
        </select>
        <div class="field__panel">
            error item 1
        </div>
    </label>
</div>

Group

SCSS:

$crispy__group__margin: 0.3em !default;
$crispy__group__character: '/' !default;
$crispy__group__character-margin: 0 $crispy__group__margin 0 !default;

Html:

<nav>
    <ul class="group group--hr">
        <li class="group__item">first item</li>
        <li class="group__item">second item</li>
        <li class="group__item">third item</li>
    </ul>
</nav>

Hero

Html:

<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>

<div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>

<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>

Icon

SCSS:

$crispy__icon__size: 1.15em;

Html:

<svg class="icon text-size-small" aria-hidden="true">
     <use xlink:href="symbol-defs.svg#icon-flask"></use>
</svg>
<svg class="icon" aria-hidden="true">
     <use xlink:href="symbol-defs.svg#icon-flask"></use>
</svg>
<svg class="icon text-size-large" aria-hidden="true">
     <use xlink:href="symbol-defs.svg#icon-flask"></use>
</svg>
<svg class="icon text-size-big" aria-hidden="true">
     <use xlink:href="symbol-defs.svg#icon-flask"></use>
</svg>
<svg class="icon text-size-mega" aria-hidden="true">
     <use xlink:href="symbol-defs.svg#icon-flask"></use>
</svg>
<svg class="icon icon-color-danger" aria-hidden="true">
     <use xlink:href="symbol-defs.svg#icon-flask"></use>
</svg>;

Media

Html:

<img class="img-responsive" src="https://picsum.photos/400" />
<figure>
    <img class="img-responsive" src="https://picsum.photos/400" />
    <figcaption class="text-center">Lorem Ipsum</figcaption>
</figure>

Panel

SCSS:

$crispy__panel__inner-padding: $crispy__padding;
$crispy__panel__inner-padding-breakpoints: $crispy__padding-breakpoints;
$crispy__panel__background-color: $crispy__color-grey-light;

Html:

<div class="panel">
    <div class="panel__inner">
        Lorem Ipsum
    </div>
</div>

Progress

SCSS:

$crispy__progress__height: 30px;
$crispy__progress__background-color: $crispy__color-primary;
$crispy__progress__border-width: 1px;
$crispy__progress__border-color: $crispy__color-border;

Html:

<div class="progress">
    <div class="progress__inner" style="width: 80%"></div>
</div>

Modal

SCSS:

$crispy__modal__max-width-breakpoints: (
    $crispy__md: 50%
);

$crispy__modal__margin-breakpoints: (
    $crispy__md: 0.75em
);

$crispy__modal__z-index: zIndex('modal');

Html:

<div class="modal modal--bottom width-100">
    <div class="panel">
        <div class="panel__inner">
            Lorem Ipsum
        </div>
    </div>
</div>

Table

SCSS:

$crispy__table__padding: $crispy__padding !default;
$crispy__table__padding-breakpoints: $crispy__padding-breakpoints !default;

$crispy__table__td__border: 1px solid $crispy__color-border !default;
$crispy__table__th__border-width: 2px !default;

$crispy__table__color: $crispy__color-text !default;
$crispy__table__striped__background-color: $crispy__color-grey-light !default;

Html:

<table class="table table--striped margin-bottom-2">
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Mr. Brown</td>
            <td>43</td>
        </tr>
        <tr>
            <td>Mr. Magenta</td>
            <td>32</td>
        </tr>
        <tr>
            <td>Mr. White</td>
            <td>45</td>
        </tr>
    </tbody>
</table>