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,

Typography

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

Strong

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.

abbr

Html:

<abbr title=""></abbr>

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

Lists

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

item 1
item 2

defined title 1: defined item 1

Buttons

<button class="button button--danger"></button>
<button class="button button--success"></button>
<button class="button button--warning"></button>
<button class="button button--danger"></button>
<button class="button button--up"></button>
<button class="button button--down"></button>

Table

<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

Helpers

Media

<img class="img-responsive" src="https://picsum.photos/400" />
<img class="img-fit-cover" style="width: 100%; height: 200px;" src="https://picsum.photos/400"/>
<img class="img-fit-contain" style="width: 100%; height: 200px;" src="https://picsum.photos/400"/>

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

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

Media Queries

For Media Queries uses the Breakpoints from the Reflex Grid.

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

You can uses a Mixin to add styles to an Breakpoint.If you want that a style only belong to one Breakpoints "-only", otherwise it is Mobile First.

Sass:

@include crispy__media-md() {
    <!-- your code -->
}

@include crispy__media-md-only() {
    <!-- your code -->
}