Introduction

Why? There are so many! Yes, of Course, but this is not a Framework, it is a Boilerplate, more simple. I have tried to build a minimalistic sass.

A few Years a have always created Styles to use in other Frameworks, crispy boilerplate is a a small toolkit from this helpers, styles that can be used to create. This is not beatiful or fancy it is a simple and basic toolkit to get a default style.

For me it was important to use no js, not that i hate js, no, the Problem of bigger Frameworks was but for the most webapps, it was always diffult to build a few things and not getting a conflict. So i desided it is simpler to get a good stable basis and build smaller parts

So this is a smaller approch, most projects i have then that big Frameworks were used, but i often felt that there was a Problem, often the fight against the framework, that result often in bigger and longer code. This is also a try to code get a smaller base to create more effecit No, it is a try, i can not promise you it will be done,

---

npm

---

Get Started

---

Typography

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.

Paragraph

Html:

<p></p>

Glossier viral occupy mixtape pok pok.

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

---

Components

Button

Html:

<button class="button"></button>
<button class="button button--wide"></button>

Default Info

Group

Html:

<nav class="group">
    <ul class="group__section">
        <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 class="group group--horizontal">
    <ul class="group__section group__section--separate">
        <li class="group__item">first item</li>
        <li class="group__item">second item</li>
        <li class="group__item">third item</li>
    </ul>
</nav>

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 h1

Heading h1

Heading h1

Heading h1

Heading h1

Hero

Html:

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

Icon

Html:

<svg class="icon icon--small" alt="beaker" viewBox="0 0 100 100">
    <use xlink:href="/svg/icons.svg#beaker" />
</svg>
<svg class="icon" alt="beaker" viewBox="0 0 100 100">
    <use xlink:href="/svg/icons.svg#beaker" />
</svg>
<svg class="icon icon--large" alt="beaker" viewBox="0 0 100 100">
    <use xlink:href="/svg/icons.svg#beaker" />
</svg>
<svg class="icon icon--danger" alt="alert" viewBox="0 0 100 100">
    <use xlink:href="/svg/icons.svg#alert" />
</svg>

Modal

Html:

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

Panel

Html:

<div class="panel">
    <div class="panel__inner">
        Lorem Ipsum
    </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

---

Fields

Input

Textarea

Checkbox

Radio

Select

---

Functions

toEm()
toRem()

Sass:

toEm(5px);
toEm(10px 10px 0 0);
toRem(10px 10px 0 0);

Returns em and rem, accepts px and unitless values.

stripUnit()

/functions

Sass:

toEm(10px);

Returns value without unit.

---

Helpers

Align

<div class="text-left"></div>
<div class="text-center"></div>
<div class="text-right"></div>
<div class="text-justify"></div>
<div class="float-left"></div>
<div class="float-center"></div>
<div class="float-none"></div>
<div class="center"></div>
<div class="clearfix"></div>

Margin

margin-top and -bottom from $crispy__margin as px.

<div class="panel margin-bottom-0x">margin-bottom-0x</div>
<div class="margin-bottom-1x">margin-bottom-1x</div>
<div class="margin-bottom-2x">margin-bottom-2x</div>
<div class="margin-bottom-3x">margin-bottom-3x</div>

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>

Width

<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

Media Queries

These @mixins were used with the Breakpoints from the Reflex Grid.

• 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;
    }
}

---

Reflex Grid

The Reflex Grid is from Lee Jordan. I have build a few helper for media-queries. Reflex Grid is lightweight, simple and uses a flexbox grid with cross browser support, an inline-block fallback.

Documentation: http://reflexgrid.com/docs/
Github: https://github.com/leejordan/reflex