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 if you used it for a Project. Often these changes cause a loss of performance and raise the propability of errors.

Crispy Boilerplate uses also the following libraries:

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.

Include

Components and Helpers are organizes as Mixins, that makes it a little easier to to add Styles you need.

Getting Started

Installation

npm install crispy-boilerplate

Main SCSS-file:

@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", this is this documentation. 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>

Color of Text 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

item 1
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>
    <ul class="group">
        <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>
    <ul class="group group--horizontal group--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 text-size-small">
    <use xlink:href="symbol-defs.svg#icon-minus"></use>
</svg>

Panel

Html:

<div class="panel">
    <div class="panel__inner">
        Lorem Ipsum
    </div>
</div>

Lorem Ipsum

Modal

Html:

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

checkbox 1 checkbox 2

checkbox 1

error item 1

Radio

radio item 1
radio item 2

error item 1

Select

Select Item

error item 1

Input / Textarea

Text

error item 1

Text

error item 1

Textarea

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

margin-bottom-0

margin-bottom-1

margin-bottom-2

margin-bottom-3

margin-bottom-4

margin-bottom-5

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

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

Coding Style

Not Fancy but Small

Include

Getting Started

Installation

Example

Site

Templates

Typography

a

Html:

abbr

Html:

blockquote

Html:

hr

Html:

paragraph

Html:

mark

Html:

list

Html:

Components

Button

Html:

Code

Html:

Group

Html:

Html:

Heading

Html:

Sass:

Heading h1

Heading h1

Heading h1

Heading h1

Heading h1

Heading h1

Hero

Html:

Icon

Html:

Panel

Html:

Modal

Html:

Table

Html:

Checkbox

Radio

Select

Input / Textarea

Functions

toEm() toRem()

Sass:

stripUnit()

Sass:

Helpers

Float

Margin

Media

Text

Width

Mixins

Media Queries

Html:

Sass:

Reflex Grid

toEm()
toRem()