Get started!

Installation

---

npm install crispy-css

SCSS

@import
    "crispy";

Now include Mixins you need. Components and Modifiziers only works if you include them,

@include crispy__core();
@include crispy__modifiers();

// components
@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();

For Custom Variables add a File before importing Crispy,

@import
    "config",
    "crispy";

If you need all, mixins will be included,

@import
    "crispy-all";

Only need Core and Modifiziers?

@import
    "crispy-minimal";

CSS

For using CSS you can use crispy-all.css for all Styles or crispy-mininmal.css without Components.

Example

You find an example in "/src/example", this is this Documentation. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.

Site

Contains header, footer, partials that are used on a site or webapp. Header and Footer are not classical components, there often more complex and have a special brand.

Templates

Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.

Typography

---

a

Html:

<a href=""></a>

Color of Text is set by $crispy__color-primary. Hover is set by $crispy__color-text

abbr

Html:

<abbr title=""></abbr>

Glossier viral occupy mixtape pok pok cornhole, vape affogato hella knausgaard thundercats

blockquote

Html:

<blockquote></blockquote>

Hoodie kickstarter four loko, pinterest hashtag chambray glossier. Pug before they sold out etsy listicle. Deep v bespoke tacos polaroid, squid flexitarian crucifix messenger bag.

hr

Html:

<hr>

---

paragraph

Html:

<p></p>

Glossier viral occupy mixtape pok pok.

mark

Html:

<mark></mark>

Pug before they four loko Deep v bespoke

list

Html:

<ul>
    <li>item 1</li>
    <li>item 2
        <ul>
            <li>child item 1</li>
            <li>child item 2</li>
        </ul>
    </li>
</ul>
<ol>
    <li>item 1</li>
    <li>item 2</li>
</ol>
<dl>
    <dt>defined title 1</dt>
    <dd>defined item 1</dd>
</dl>

• item 1
• item 2
  • child item 1
  • child item 2

1. item 1
2. item 2

defined title 1

defined item 1

Heading

Html:

<h2></h2>
    <h2 class="h3"></h2>

Sass:

$crispy__heading__font-sizes: (
        'h1': 40px,
        'h2': 36px,
        'h3': 32px,
        'h4': 28px,
        'h5': 24px,
        'h6': 20px
    ) !default;

Heading h1

Heading h2

Heading h3

Heading h4

Heading h5

Heading h6

Components

---

Button

Html:

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

Default

With Modifiers you can also change Size and width.

Default Info

Also with the Component Icon you can use SVG.

Button

Code

Html:

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

Group

Html:

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

Html:

<nav>
    <ul class="group group--horizontal group--separate">
        <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

Change Size of Icons with "text-size-*", you find them in the modifiers.

Html:

<svg class="icon text-size-small">
    <use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>

To change Color you can use "icon-color-*".

Html:

<svg class="icon icon-color-danger">
    <use xlink:href="symbol-defs.svg#icon-flask"></use>
</svg>

Panel

Html:

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

Progress

Html:

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

Modal

Html:

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

Table

Html:

<table class="table table--striped">
    <thead>
        <tr>
            <th></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
        </tr>
    </tbody>
</table>

name	age
Mr. Brown	43
Mr. Magenta	32
Mr. White	45

Media

<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>
<div class="video-responsive" style="height: 280px;">
    <iframe src="https://giphy.com/embed/13XW2MJE0XCoM0" width="480" height="361"></iframe>
</div>

Fields

Fields are Form-Elements.

Checkbox

Checkboxes

Radio

Select

Input / Textarea

Modifiers

---

Margin & Padding

Adding margin and padding-top, -left, -bottom and -right. For left and right steps and values are halved.

Sass:

$crispy__modifiers__spacing__value: 0.75em;
$crispy__modifiers__spacing__steps: 6;

Html:

<div class="margin-bottom-1">margin-bottom-1</div>

Also set padding and margin to 0,

<div class="marginless"</div>
<div class="paddingless"</div>

Typography

<div class="text-left"></div>
<div class="text-center"></div>
<div class="text-right"></div>
<div class="text-justify"></div>
<div class="text-italic"></div>
<div class="text-light"></div>
<div class="text-normal"></div>
<div class="text-medium"></div>
<div class="text-bold"></div>
<div class="text-capitalize"></div>
<div class="text-uppercase"></div>
<div class="text-lowercase"></div>
<div class="text-smaller"></div>
<div class="text-crossed"></div>
<div class="text-underline"></div>

Also there are classes for,

• text-size-* with $crispy__font-sizes for "font-size"
• text-color-* with $crispy__colors for "color"
• background-color-* with $crispy__font-sizes for "background-color"

Float

<div class="float-left"></div>
<div class="float-right"></div>
<div class="float-none"></div>
<div class="centered"></div>
<div class="clearfix"></div>

Position

<div class="relative"></div>
<div class="absolute"></div>
<div class="fixed"></div>

Border

<div class="bordered"></div>
<div class="rounded"></div>
<div class="borderless"></div>
<div class="radiusless"></div>

Visibility

<div class="hidden"></div>
<div class="visible"></div>
<div class="visible visible--inline"></div>
<div class="visible visible--inline-block"></div>

Width

Sass:

$crispy__width: (
    '25' : 25%,
    '50' : 50%,
    '75' : 75%,
    '100': 100%
)

Html:

<div class="panel width-25">width-25</div>
<div class="width-50">width-50</div>
<div class="width-75">width-75</div>
<div class="width-100">width-100</div>

---

Mixins

Triangle

Sass:

.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
    display: block;
}

.triangle-left {
    @include triangle('left', $crispy__color-primary);
}

.triangle-right {
    @include triangle('right', $crispy__color-primary);
}

.triangle-top {
    @include triangle('top', $crispy__color-primary);
}

.triangle-bottom {
    @include triangle('bottom', $crispy__color-primary);
}
    

Media Queries

These @mixins were used with the Breakpoints from http://reflexgrid.com/docs/. Reflex-Grid is also used as grid for this Site.

• xs 576px
• sm 768px
• md 992px
• lg 1200px
• xlg 1600px

Html:

<div class="sm">sm</div>
<div class="md">md</div>
<div class="md-only">md-only</div>
<div class="lg-only">lg-only</div>

Sass:

.sm, .md, .md-only, .lg-only {
    display: none;
}

.sm {
    @include crispy__media-sm() {
        display: block;
    }
}

.md {
    @include crispy__media-md() {
        display: block;
    }
}

.md-only {
    @include crispy__media-md-only() {
        display: block;
    }
}

.lg-only {
    @include crispy__media-lg-only() {
        display: block;
    }
}

Functions

---

stripUnit()

Sass:

stripUnit(10px);

Returns value without unit.

zIndex(name)

Sass:

zIndex('modal');

Returns value from $crispy__z-index.

Sass:

$crispy__z-index: (
    'overlay': 90,
    'modal'  : 100
);