From 6ab405d09eff40c3e5965daa2a2e1b7e0b52f54d Mon Sep 17 00:00:00 2001 From: HerrHase Date: Tue, 6 Mar 2018 21:49:39 +0100 Subject: [PATCH] update readme --- README.md | 36 +++++------ {dest => dist}/css/styles.css | 0 {dest => dist}/imprint.html | 0 {dest => dist}/index.html | 96 +++++++++++++----------------- {dest => dist}/js/app.js | 0 {dest => dist}/privacy-policy.html | 0 {dest => dist}/svg/icons.svg | 0 package.json | 12 ++-- 8 files changed, 62 insertions(+), 82 deletions(-) rename {dest => dist}/css/styles.css (100%) rename {dest => dist}/imprint.html (100%) rename {dest => dist}/index.html (90%) rename {dest => dist}/js/app.js (100%) rename {dest => dist}/privacy-policy.html (100%) rename {dest => dist}/svg/icons.svg (100%) diff --git a/README.md b/README.md index 1f7df4f..83deaed 100644 --- a/README.md +++ b/README.md @@ -1,32 +1,28 @@ # Cripsy-Boilerplate - Less is more -Flat Sass Boilerplate give you a amount of Basic Settings, Components, Helpers, -Mixins and Functions. It uses also the following Libraries, +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. Often these changes cause a loss of +performance and raise the propability of errors. + +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/) * 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 -Performance and more Fighting with the Framework and the Documentation. - [Documentation](https://crispy-boilerplate.org) ## Coding Style -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. +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. ## 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. +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. -## Only Include if you need it +## Include Components and Helpers are organizes as Mixins, that makes it a little easier to to add Styles you need. @@ -51,7 +47,7 @@ After this, include Mixins you need: @include crispy__*() ``` -To overwrite defaults simple adding your own config-file before import crispy: +To overwrite defaults simple add your own config-file before importing crispy: ``` @import @@ -61,16 +57,12 @@ To overwrite defaults simple adding your own config-file before import crispy: ### 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. +You find an example in "/src/example". The documentation is also there. 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 use on are site or webapp. Header, Footer are -not Classical Components, there often more Complex and have a special Brand. +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 the is -no benfit so reuse them as Components. +Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components. diff --git a/dest/css/styles.css b/dist/css/styles.css similarity index 100% rename from dest/css/styles.css rename to dist/css/styles.css diff --git a/dest/imprint.html b/dist/imprint.html similarity index 100% rename from dest/imprint.html rename to dist/imprint.html diff --git a/dest/index.html b/dist/index.html similarity index 90% rename from dest/index.html rename to dist/index.html index 09a6d20..62b255b 100644 --- a/dest/index.html +++ b/dist/index.html @@ -24,7 +24,7 @@
Crispy Boilerplate
- 0.9.7 + 0.9.8
@@ -46,9 +46,7 @@
-

- Introduction -

- This Boilerplate has more simpler approach, it can be used - as a base for Websites, Webapps and also Frameworks. Of Course there a - so many Framework and Boilerplates. + Flat Sass Boilerplate gives you an amount of basic settings, components, helpers, mixins and functions.

- But the most 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. + The problem of most frameworks is they trying to hard adding a lot of styles, + which has to be customized and documented. Often these changes cause a loss of + performance and raise the propability of errors.

- The Components are quite simple and not fancy, the have all - fundamental styles to so the can be used. + It uses also the following libraries:

+ + +

Coding Style

- The Helpers have Styles for single Elements and spend it saving - for each element to invent a single class. + 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

- The Coding Style of this Framework is BEM, but - also here a more simpler idea of it. BEM is a good and helpfull Coding Style, - if you not overthinking it. It helps to create smaller compontents that you can reuse. - Important for that, make them really small. More Information about BEM. + 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.

- +
-

- Example -

+

Getting Started

+

Installation

+

Main SCSS-file:

+ 
npm install crispy-boilerplate
+

After this include mixins you need:

+ 
@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

- This Site is also a Example to use the Boilerplate. You can find all - Styles for this site in "/src/scss/example". You see also that there - is a "templates" Directory. The Idea in BEM was always - create all in Components. That is not always Practical. + You find an example in "/src/example". The documentation is also there. In the given example there are additional directories. These ones are part of a structure which might be helpful for you.

+

Site

- Sometimes, the more Bigger Picture, on a Single Site or in App the - Stylings that are so special that the belong only there and are to complex - for a component. For this use the "templates" Directory. + 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

- Sites also have partials like header and footer, they can put into the directory "site". -

- -

- -

- To Include the Framework simple import "cripsy", each component or helper is a mixin - - There are shortcuts for components and helpers to include all at once. - - Import Simple "crispy.scss", -

- - -
-

- Get Started -

- 
npm install crispy-boilerplate
-

- Import "crispy.scss" + Templates are for a single site or a group of sites, they are complex and there is no benefit so reuse them as components.

@@ -142,7 +131,6 @@ $crispy__color-text

-

abbr

Html:

diff --git a/dest/js/app.js b/dist/js/app.js similarity index 100% rename from dest/js/app.js rename to dist/js/app.js diff --git a/dest/privacy-policy.html b/dist/privacy-policy.html similarity index 100% rename from dest/privacy-policy.html rename to dist/privacy-policy.html diff --git a/dest/svg/icons.svg b/dist/svg/icons.svg similarity index 100% rename from dest/svg/icons.svg rename to dist/svg/icons.svg diff --git a/package.json b/package.json index 27dfdd3..b8d5321 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "crispy-boilerplate", - "version": "0.9.7", + "version": "0.9.8", "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions", "repository": { "type": "git", @@ -26,7 +26,7 @@ "webpack": "^3.11.0" }, "config": { - "dest_dir": "dest/", + "dist_dir": "dist/", "src_dir": "src/", "build_dir": "build/", "normalize": "node_modules/normalize.css", @@ -37,13 +37,13 @@ "css:build": "npm run css:clean && npm run css:scss && npm run css:postcss && npm run css:minify", "css:clean": "rimraf $npm_package_config_dist_dir/css/*", "css:scss": "node-sass --include-path $npm_package_config_normalize --include-path $npm_package_config_reflex_grid $npm_package_config_src_dir/example/example.scss $npm_package_config_build_dir/css/styles.css", - "css:postcss": "postcss $npm_package_config_dest_dir/css/*.css --use autoprefixer -d $npm_package_config_dest_dir/css/", - "css:minify": "cleancss $npm_package_config_build_dir/css/styles.css > $npm_package_config_dest_dir/css/styles.css", + "css:postcss": "postcss $npm_package_config_dist_dir/css/*.css --use autoprefixer -d $npm_package_config_dist_dir/css/", + "css:minify": "cleancss $npm_package_config_build_dir/css/styles.css > $npm_package_config_dist_dir/css/styles.css", "svg:build": "npm run svg:clean && npm run svg:copy && npm run svg:optimize && npm run svg:minify", - "svg:clean": "rimraf $npm_package_config_dest_dir/svg/* && rimraf $npm_package_config_build_dir/svg/*", + "svg:clean": "rimraf $npm_package_config_dist_dir/svg/* && rimraf $npm_package_config_build_dir/svg/*", "svg:copy": "copyfiles -f $npm_package_config_src_dir/icons/**/*.svg $npm_package_config_build_dir/svg", "svg:optimize": "svgo -f $npm_package_config_build_dir/svg -o $npm_package_config_build_dir/svg", - "svg:minify": "svg-sprite -s --symbol-sprite=$npm_package_config_dest_dir/svg/icons.svg --symbol-dest= $npm_package_config_build_dir/svg/*.svg", + "svg:minify": "svg-sprite -s --symbol-sprite=$npm_package_config_dist_dir/svg/icons.svg --symbol-dest= $npm_package_config_build_dir/svg/*.svg", "js:build": "npm run js:clean && npm run js:webpack", "js:clean": "rimraf $npm_package_config_dist_dir/js/*", "js:webpack": "npx webpack --config webpack.config.js"