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 complex for a component. For this use the "templates" Directory.

Sites also have partials like header and footer, they can put into the directory "site".

To Include the Framework simple import "cripsy", each component or helper is a mixin There are shortcuts for components and helpers to include all at once. Import Simple "crispy.scss",

Get Started 

npm install crispy-boilerplate

Import "crispy.scss"

Typography

a

Html:

<a href=""></a>

a-tag color 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

Components

button

Html:

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

code

Html:

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

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

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

Checkbox

error item 1

Radio



error item 1

Select

Input / Textarea

error item 1
error item 1
error item 1

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

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>
<div class="margin-bottom-4x">margin-bottom-4x</div>
<div class="margin-bottom-5x">margin-bottom-5x</div>
margin-bottom-0x
margin-bottom-1x
margin-bottom-2x
margin-bottom-3x
margin-bottom-4x
margin-bottom-5x

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

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

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

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

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