From c471a46de0dcbaae0c8b7090894afb0fca58b9cf Mon Sep 17 00:00:00 2001 From: HerrHase Date: Tue, 20 Feb 2018 17:36:36 +0100 Subject: [PATCH] extend readme.md move example beyond scss --- README.md | 93 +++++++------------ dest/index.html | 13 +++ package.json | 4 +- .../example/components/_button.scss | 0 src/{scss => }/example/components/_nav.scss | 0 src/{scss => example}/example.scss | 13 ++- src/{scss => }/example/site/_container.scss | 0 src/{scss => }/example/site/_footer.scss | 0 src/{scss => }/example/site/_header.scss | 0 src/{scss => }/example/templates/_home.scss | 0 src/scss/components/components.scss | 25 +++++ src/scss/{_crispy.scss => crispy.scss} | 0 src/scss/example/example.scss | 9 -- src/scss/helpers/helpers.scss | 14 +++ 14 files changed, 97 insertions(+), 74 deletions(-) rename src/{scss => }/example/components/_button.scss (100%) rename src/{scss => }/example/components/_nav.scss (100%) rename src/{scss => example}/example.scss (84%) rename src/{scss => }/example/site/_container.scss (100%) rename src/{scss => }/example/site/_footer.scss (100%) rename src/{scss => }/example/site/_header.scss (100%) rename src/{scss => }/example/templates/_home.scss (100%) rename src/scss/{_crispy.scss => crispy.scss} (100%) delete mode 100644 src/scss/example/example.scss diff --git a/README.md b/README.md index 168192c..0227f71 100644 --- a/README.md +++ b/README.md @@ -1,77 +1,50 @@ # cripsy-boilerplate -Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions. -This Boilerplate uses +Flat Sass Boilerplate to give you a amount of Basic Settings, Components, Helpers, +Mixins and Functions. It uses also the following Libraries, -* normalize.css / -* reflex-grid / +* normalize.css / (https://necolas.github.io/normalize.css/)[https://necolas.github.io/normalize.css/] +* reflex-grid / (http://reflexgrid.com/docs/)[http://reflexgrid.com/docs/] -# media queries +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. -The queries are only +## Coding Style -``` -@include crispy__media-xs() { - -} -``` - -``` -npm install crispy-boilerplate --save -``` - -## Components - -There a few Components, some are also provide a Closure to adding additional Styles. - -### align - -Additional Styles for modificators for align text, floating and centering elements. - -### body - -Styles for Body, including Format for Fonts and Colors. - -### button - -Styles for Buttons. - -### heading +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. -Styling h1-h6 and create also CSS-Classes with same name. +## Not Fancy but Small -### icon +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. -Styles to use SVG as Icons. +## Only Include if you need it -### list +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 -Additional Styles for Lists and modificators. - -### margin - -Additional Styles for modificators to margin-top and margin-bottom. - -### normalize - -Normalizing for a few Elements. - -### text-colors - -Creates text-colors modificators from a - -## Functions - -### pxToEm, pxToRem +## Getting Started +### Installation +``` +npm install crispy-boilerplate +``` -Function to convert from px to em or rem. +``` +@import "crispy"; +``` -## Mixins +``` -### clearfix +``` -Styles for clearfix. -### font-size +### npm +### Example -Add font-size with fallback. +You find a Working Example i diff --git a/dest/index.html b/dest/index.html index 0a21958..e5cf3da 100644 --- a/dest/index.html +++ b/dest/index.html @@ -129,12 +129,25 @@ 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" +

diff --git a/package.json b/package.json index 1cda916..27dfdd3 100644 --- a/package.json +++ b/package.json @@ -10,7 +10,7 @@ "license": "MIT", "dependencies": { "cash-dom": "^1.3.7", - "normalize.css": "^7.0.0", + "normalize.css": "^8.0.0", "reflex-grid": "^2.0.1" }, "devDependencies": { @@ -36,7 +36,7 @@ "build": "npm run css:build && npm run svg:build", "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/scss/example.scss $npm_package_config_build_dir/css/styles.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", "svg:build": "npm run svg:clean && npm run svg:copy && npm run svg:optimize && npm run svg:minify", diff --git a/src/scss/example/components/_button.scss b/src/example/components/_button.scss similarity index 100% rename from src/scss/example/components/_button.scss rename to src/example/components/_button.scss diff --git a/src/scss/example/components/_nav.scss b/src/example/components/_nav.scss similarity index 100% rename from src/scss/example/components/_nav.scss rename to src/example/components/_nav.scss diff --git a/src/scss/example.scss b/src/example/example.scss similarity index 84% rename from src/scss/example.scss rename to src/example/example.scss index 7afdc84..fb4ea98 100644 --- a/src/scss/example.scss +++ b/src/example/example.scss @@ -1,6 +1,14 @@ @import - 'crispy', - 'example/example'; + '../scss/crispy', + + 'site/container', + 'site/footer', + 'site/header', + + 'components/button', + 'components/nav', + + 'templates/home'; // components @include crispy__button(); @@ -12,7 +20,6 @@ @include crispy__modal(); @include crispy__panel(); @include crispy__table(); - @include crispy__field(); @include crispy__field__text(); @include crispy__field__checkbox(); diff --git a/src/scss/example/site/_container.scss b/src/example/site/_container.scss similarity index 100% rename from src/scss/example/site/_container.scss rename to src/example/site/_container.scss diff --git a/src/scss/example/site/_footer.scss b/src/example/site/_footer.scss similarity index 100% rename from src/scss/example/site/_footer.scss rename to src/example/site/_footer.scss diff --git a/src/scss/example/site/_header.scss b/src/example/site/_header.scss similarity index 100% rename from src/scss/example/site/_header.scss rename to src/example/site/_header.scss diff --git a/src/scss/example/templates/_home.scss b/src/example/templates/_home.scss similarity index 100% rename from src/scss/example/templates/_home.scss rename to src/example/templates/_home.scss diff --git a/src/scss/components/components.scss b/src/scss/components/components.scss index 76d1709..b525c08 100644 --- a/src/scss/components/components.scss +++ b/src/scss/components/components.scss @@ -9,3 +9,28 @@ 'panel', 'table', 'field/field'; + +/** + * shortcut to adding all components + * + * + */ +@mixin cripsy__components() +{ + @include crispy__button(); + @include crispy__code(); + @include crispy__group(); + @include crispy__heading(); + @include crispy__hero(); + @include crispy__icon(); + @include crispy__modal(); + @include crispy__panel(); + @include crispy__table(); + @include crispy__field(); + @include crispy__field__text(); + @include crispy__field__checkbox(); + @include crispy__field__radio(); + @include crispy__field__select(); + @include crispy__field__panel(); + @include crispy__field__label(); +} diff --git a/src/scss/_crispy.scss b/src/scss/crispy.scss similarity index 100% rename from src/scss/_crispy.scss rename to src/scss/crispy.scss diff --git a/src/scss/example/example.scss b/src/scss/example/example.scss deleted file mode 100644 index af6071b..0000000 --- a/src/scss/example/example.scss +++ /dev/null @@ -1,9 +0,0 @@ -@import - 'site/container', - 'site/footer', - 'site/header', - - 'components/button', - 'components/nav', - - 'templates/home'; diff --git a/src/scss/helpers/helpers.scss b/src/scss/helpers/helpers.scss index e057201..ef398bb 100644 --- a/src/scss/helpers/helpers.scss +++ b/src/scss/helpers/helpers.scss @@ -4,3 +4,17 @@ 'media', 'text', 'width'; + +/** + * shortcut to include all helpers + * + * + */ +@mixin crispy__helpers() +{ + @include crispy__float(); + @include crispy__margin(); + @include crispy__media(); + @include crispy__text(); + @include crispy__width(); +}