# Getting started!

## Installation

    npm install crispy-css

### SCSS

    @import
        "node_modules/crispy-css/src/crispy";

Now include Components and Helpers you need.

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

There are two additionals Versions of Crispy. There is crispy-minimal, that only includes Helpers and crispy-all that includes Helpers and all Components.

    @import
        "node_modules/crispy-css/src/crispy-all";

    @import
        "node_modules/crispy-css/src/crispy-minimal";

#### Configuration

##### Breakpoints

    $crispy__xs : 576px;
    $crispy__sm : 768px;
    $crispy__md : 992px;
    $crispy__lg : 1200px;
    $crispy__xlg: 1600px;

##### Fonts

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

##### Colors

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

##### Padding & Magin

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

##### Heading

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

##### Borders

    $crispy__border-radius: 3px !default;
    $crispy__border: 1px solid $crispy__color-border !default;

##### Z-Index

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

For Custom Variables add a File before importing Crispy.

    @import
        "config",
        "node_modules/crispy-css/src/crispy";

## Example

You find all of this Site in "/src/example". This is also an Example how you can use Crispy CSS and orginaize your Project.

### Site

Contains header, footer and some partials that are used on a Site or Webapp.

### 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.