Cripsy-Boilerplate

Flat Sass Boilerplate to give you a amount of Basic Settings, Components, Helpers, Mixins and Functions. It uses also the following Libraries,

normalize.css / https://necolas.github.io/normalize.css/
reflex-grid / http://reflexgrid.com/docs/
opt / https://octicons.github.com"

Many Boilerplates and also Frameworks, 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.

Coding Style

The Boilerplate uses as Coding Style http://getbem.com/, 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 that they look fancy. The Idea is to extend each Compontent and save up a Bunch of CSS Code, and so get more Performance and less Errors. Of Course is really Fancy to get more Performance and less Errors.

Only Include if you need it

Components and Helpers are organizes as Mixins, that makes it a little easier to add. Also it can be used to create multiples css files for each single site you need on a site oder

You can order them and structure the output of the CSS-files.

Getting Started

Installation

npm install crispy-boilerplate

Main SCSS-File:

@import
    "crispy";

After this, include Mixins you need:

@include crispy__*()

To overwrite defaults simple adding your own config-file before import crispy:

@import
    "config",
    "crispy";

npm

There are a few npm scripts in the package.json that you can you use to build your styles. Copy them and change the path. There is nothing special about them.

Example

You find an Example in "/src/example". It is also the site of the Documentation. In the Example there are additional Directories. These one are part of a Structure you might find helpful.

Site

Contains header, footer, Partials that use on are site or webapp. Header, 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 the is no benfit so reuse them as Components.

2.4 KiB Raw Blame History