From 66c2fe0a3ba466b821ac469979f22fe22ae7e9f9 Mon Sep 17 00:00:00 2001 From: HerrHase Date: Tue, 20 Feb 2018 19:20:32 +0100 Subject: [PATCH] adding new points in readme.md --- README.md | 48 ++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 40 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 0227f71..c0a12a2 100644 --- a/README.md +++ b/README.md @@ -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.