2.2 KiB
Cripsy-Boilerplate - Less is more
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:
- normalize.css / https://necolas.github.io/normalize.css/
- reflex-grid / http://reflexgrid.com/docs/
- opt / https://octicons.github.com
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 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.