|
|
@ -1,10 +1,11 @@ |
|
|
|
# cripsy-boilerplate |
|
|
|
# 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/)[https://necolas.github.io/normalize.css/] |
|
|
|
* reflex-grid / (http://reflexgrid.com/docs/)[http://reflexgrid.com/docs/] |
|
|
|
* normalize.css / [https://necolas.github.io/normalize.css/](https://necolas.github.io/normalize.css/) |
|
|
|
* reflex-grid / [http://reflexgrid.com/docs/](http://reflexgrid.com/docs/) |
|
|
|
* opt / [https://octicons.github.com"](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 |
|
|
@ -12,7 +13,7 @@ Performance and more Fighting with the Framework and the Documentation. |
|
|
|
|
|
|
|
## Coding Style |
|
|
|
|
|
|
|
The Boilerplate uses as Coding Style (http://getbem.com/)[BEM], but as a more |
|
|
|
The Boilerplate uses as Coding Style [http://getbem.com/](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. |
|
|
|
|
|
|
@ -21,7 +22,7 @@ can reuse them. But one the other hand it can be really Strange if you overthink |
|
|
|
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. |
|
|
|
Of Course is really Fancy to get more Performance and less Errors. |
|
|
|
|
|
|
|
## Only Include if you need it |
|
|
|
|
|
|
@ -29,22 +30,53 @@ 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"; |
|
|
|
@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 a Working Example i |
|
|
|
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. |