Introduction

This Boilerplate has more simpler approach, it can be used as a base for Websites, Webapps and also Frameworks. Of Course there a so many Framework and Boilerplates.

But the most are trying to hard adding styles that are most time will be overwritten to make it work for you. This causes a loss in Performance and more Fighting with the Framework and the Documentation.

The Components are quite simple and not fancy, the have all fundamental styles to so the can be used.

The Helpers have Styles for single Elements and spend it saving for each element to invent a single class.

The Coding Style of this Framework is BEM, but also here a more simpler idea of it. BEM is a good and helpfull Coding Style, if you not overthinking it. It helps to create smaller compontents that you can reuse. Important for that, make them really small. More Information about BEM.

Example

This Site is also a Example to use the Boilerplate. You can find all Styles for this site in "/src/scss/example". You see also that there is a "templates" Directory. The Idea in BEM was always create all in Components. That is not always Practical.

Sometimes, the more Bigger Picture, on a Single Site or in App the Stylings that are so special that the belong only there, and are to big for a templates. For this use the "templates" Directory.

Get Started

npm install crispy-boilerplate

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

item 1
item 2

defined title 1: defined item 1

Components

Button

Html:

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

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

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>

Lorem Ipsum

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

error item 1

Textarea

Checkbox

checkbox 1

Radio

radio item 1
radio item 2

Select

Select Item

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

Float

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

margin-bottom-0x

margin-bottom-1x

margin-bottom-2x

margin-bottom-3x

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>

width-25

width-50

width-75

width-100

Text

<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-normal"></div>
<div class="text-bold"></div>
<div class="text-uppercase"></div>
<div class="text-lowercase"></div>
<div class="text-small"></div>
<div class="text-crossed"></div>

Also it will be create classes $crispy__font-sizes

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

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

md-only

lg-only

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

Introduction

Example

Get Started

Typography

Abbr

Html:

Blockquote

Html:

Paragraph

Html:

List

Html:

Components

Button

Html:

Group

Html:

Html:

Heading

Html:

Sass:

Heading h1

Heading h1

Heading h1

Heading h1

Heading h1

Heading h1

Hero

Html:

Icon

Html:

Modal

Html:

Panel

Html:

Table

Html:

Fields

Input

Textarea

Checkbox

Radio

Select

Functions

toEm() toRem()

Sass:

stripUnit()

Sass:

Helpers

Float

Margin

Media

Width

Text

Mixins

Media Queries

Html:

Sass:

Reflex Grid

toEm()
toRem()