Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions.

The problem of most frameworks is they trying to hard adding a lot of styles, which has to be customized and documented. Often these changes cause a loss of performance and raise the propability of errors.

It uses also the following libraries:

• normalize.css
• reflex-grid
• octicons

Coding Style

The boilerplate uses as coding style BEM, but as a more simpler idea of it. One of the benefits of BEM is that you create components and can reuse them. But one the other hand it can be really strange if you overthinking it.

Not Fancy but Small

Components are created to give you a structure and a basic set of styles and not to look fancy. The idea is to extend each component and save time to write a bunch of extra CSS code and therefore get more performance while minimize the causes of errors. Of Course is really Fancy to get more Performance and less Errors.

---

Getting Started

Installation

Main SCSS-file:

npm install crispy-boilerplate

After this include mixins you need:

@import
    "crispy";

After this include mixins you need:

@include crispy__*()

To overwrite defaults simple add your own config-file before importing crispy:

@import
    "config",
    "crispy";

Example

You find an example in "/src/example". The documentation is also there. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.

Site

Contains header, footer, partials that are used on a site or webapp. Header and footer are not classical components, there often more complex and have a special brand.

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.

---

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>

Default Info

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>

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

Checkbox

Radio

Select

Input / Textarea

---

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>

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>

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>

---

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