adding #11

adding #10

README.md

@@ -3,7 +3,7 @@
 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.
+if you used it for a Project. Often these changes cause a loss of performance and raise the probability of errors.
 
 [Documentation](https://crispy-boilerplate.readthedocs.io/en/latest/)
 

docs/index.rst

@@ -41,5 +41,3 @@ To overwrite defaults simple add your own config-file after importing crispy:
     "crispy",
     "config";
 ```
-
-## Typography

example/_components.scss

@@ -0,0 +1,3 @@
+@import
+    'components/button'
+    'components/nav';

example/_site.scss

@@ -0,0 +1,3 @@
+@import
+    'site/header'
+    'site/footer';

example/_templates.scss

@@ -0,0 +1,2 @@
+@import
+    'templates/home';

example/components/_button.scss

@@ -6,12 +6,9 @@
  *
  */
 
-
-@mixin example__button()
+@mixin components__button()
 {
     .button {
-        border: 1px solid darken($crispy__color-primary, 10%);
-        background-color: $crispy__color-primary;
-        color: white;
+
     }
 }

example/components/_nav.scss

@@ -6,10 +6,9 @@
  *
  */
 
-
-@mixin example__nav()
+@mixin components__nav()
 {
     .nav {
-        
+
     }
 }

example/example.scss

@@ -1,9 +1,9 @@
 @import
-    '../scss/crispy',
-
-    'site/container',
-    'components/button',
-    'templates/home';
+    'config',
+    'crispy',
+    'site',
+    'components',
+    'templates';
 
 // components
 @include crispy__button();
@@ -12,15 +12,14 @@
 
 // helpers
 @include crispy__float();
-@include crispy__margin();
+@include crispy__spacing();
 @include crispy__media();
 @include crispy__text();
 @include crispy__width();
 
 // example
-@include example__container();
-@include example__header();
-@include example__footer();
-@include example__button();
-@include example__nav();
-@include example__home();
+@include site__header();
+@include site__footer();
+@include components__button();
+@include components__nav();
+@include templates__home();

example/site/_footer.scss

@@ -6,8 +6,7 @@
  *
  */
 
-
-@mixin example__footer()
+@mixin site__footer()
 {
     .footer {
 

example/site/_header.scss

@@ -7,10 +7,10 @@
  */
 
 
-@mixin example__header() {
+@mixin site__header() {
     .header {
         &__title {
-            
+
         }
 
         &__logo {

example/templates/_home.scss

@@ -6,7 +6,7 @@
  *
  */
 
-@mixin example__home()
+@mixin templates__home()
 {
-    
+
 }

mix-manifest.json

@@ -0,0 +1,3 @@
+{
+    "/dist/crispy.min.css": "/dist/crispy.min.css"
+}

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "crispy-boilerplate",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1253,6 +1253,11 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "bootstrap": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-4.2.1.tgz",
+      "integrity": "sha512-tt/7vIv3Gm2mnd/WeDx36nfGGHleil0Wg8IeB7eMrVkY0fZ5iTaBisSh8oNANc2IBsCc6vCgCNTIM/IEN0+50Q=="
+    },
     "brace-expansion": {
       "version": "1.1.8",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.8.tgz",
@@ -1991,6 +1996,31 @@
         "sha.js": "^2.4.8"
       }
     },
+    "cross-env": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-5.2.0.tgz",
+      "integrity": "sha512-jtdNFfFW1hB7sMhr/H6rW1Z45LFqyI431m3qU6bFXcQ3Eh7LtBuG3h74o7ohHZ3crrRkkqHlo4jYHFPcjroANg==",
+      "dev": true,
+      "requires": {
+        "cross-spawn": "^6.0.5",
+        "is-windows": "^1.0.0"
+      },
+      "dependencies": {
+        "cross-spawn": {
+          "version": "6.0.5",
+          "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
+          "integrity": "sha512-eTVLrBSt7fjbDygz805pMnstIs2VTBNkRm0qxZd+M7A5XDdxVRWO5MxGBXZhjY4cqLYLdtrGqRf8mBPmzwSpWQ==",
+          "dev": true,
+          "requires": {
+            "nice-try": "^1.0.4",
+            "path-key": "^2.0.1",
+            "semver": "^5.5.0",
+            "shebang-command": "^1.2.0",
+            "which": "^1.2.9"
+          }
+        }
+      }
+    },
     "cross-spawn": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-3.0.1.tgz",
@@ -5974,6 +6004,12 @@
       "integrity": "sha1-yobR/ogoFpsBICCOPchCS524NCw=",
       "dev": true
     },
+    "nice-try": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz",
+      "integrity": "sha512-1nh45deeb5olNY7eX82BkPO7SSxR5SSYJiPTrTdFUVYwAl8CKMA5N9PjTYkHiRjisVcxcQ1HXdLhx2qxxJzLNQ==",
+      "dev": true
+    },
     "no-case": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz",
@@ -6799,6 +6835,17 @@
         }
       }
     },
+    "postcss-css-variables": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/postcss-css-variables/-/postcss-css-variables-0.11.0.tgz",
+      "integrity": "sha512-pjqWnJSy8zoentAhRIph/DiOX0EZmT/dpmVbpdSrCSdkdqstl2ViBlAfIIuHvHI+baTV8Gd+WzsVFjDZqVn4dg==",
+      "dev": true,
+      "requires": {
+        "escape-string-regexp": "^1.0.3",
+        "extend": "^3.0.1",
+        "postcss": "^6.0.8"
+      }
+    },
     "postcss-discard-comments": {
       "version": "2.0.4",
       "resolved": "http://registry.npmjs.org/postcss-discard-comments/-/postcss-discard-comments-2.0.4.tgz",
@@ -10686,7 +10733,8 @@
             "safe-buffer": {
               "version": "5.1.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "safer-buffer": {
               "version": "2.1.2",
@@ -10792,7 +10840,8 @@
             "yallist": {
               "version": "3.0.2",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             }
           }
         },
@@ -11584,7 +11633,8 @@
             "balanced-match": {
               "version": "1.0.0",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "brace-expansion": {
               "version": "1.1.11",
@@ -11609,7 +11659,8 @@
             "concat-map": {
               "version": "0.0.1",
               "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
             },
             "console-control-strings": {
               "version": "1.1.0",

package.json

@@ -1,17 +1,29 @@
 {
-  "name": "crispy-boilerplate",
-  "version": "1.1.0",
-  "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
-  "repository": {
-    "type": "git",
-    "url": "git@gitlab.tentakelfabrik.de:tentakelfabrik/crispy-boilerplate.git"
-  },
-  "author": "Björn Hase",
-  "license": "MIT",
-  "devDependencies": {
-    "laravel-mix": "^2.1.14"
-  },
-  "dependencies": {
-    "normalize-scss": "^7.0.1"
-  }
+    "name": "crispy-boilerplate",
+    "version": "1.2.0",
+    "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
+    "repository": {
+        "type": "git",
+        "url": "git@gitlab.tentakelfabrik.de:tentakelfabrik/crispy-boilerplate.git"
+    },
+    "scripts": {
+        "dev": "npm run development",
+        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "watch": "npm run development -- --watch",
+        "watch-poll": "npm run watch -- --watch-poll",
+        "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
+        "prod": "npm run production",
+        "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
+    },
+    "author": "Björn Hase",
+    "license": "MIT",
+    "devDependencies": {
+        "cross-env": "^5.2.0",
+        "laravel-mix": "^2.1.14",
+        "postcss-css-variables": "^0.11.0"
+    },
+    "dependencies": {
+        "bootstrap": "^4.2.1",
+        "normalize-scss": "^7.0.1"
+    }
 }

src/scss/_components.scss

@@ -0,0 +1,10 @@
+@import
+    'components/button',
+    'components/code',
+    'components/group',
+    'components/heading',
+    'components/hero',
+    'components/modal',
+    'components/panel',
+    'components/table',
+    'components/field';

src/scss/_config.scss

@@ -6,16 +6,15 @@
  *
  */
 
-// @TODO adding colors for link and hover
-
 // font
 $crispy__font-size: 16px !default;
 $crispy__golden-ratio: 1.618 !default;
 $crispy__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
 $crispy__direction: ltr !default;
 
-// margin
-$crispy__margin: 10px !default;
+// spacing
+$crispy__spacing: toEm(10px) !default;
+$crispy__spacing__steps: 5 !default;
 
 // colors
 $crispy__color-primary: #f0c209 !default;
@@ -27,6 +26,7 @@ $crispy__color-info: #0090d4 !default;
 $crispy__color-text: #363636 !default;
 $crispy__color-border: #d0d0d0 !default;
 $crispy__color-background: #ffffff !default;
+$crispy__color-hover: #ffffff !default;
 
 // breakpoints
 $crispy__xs: 576px !default;

src/scss/_core.scss

@@ -0,0 +1,140 @@
+/**
+ * normalize
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@import 'normalize';
+
+@mixin crispy__core() {
+    html {
+        font-size: 100%;
+    }
+
+    body,
+    html {
+        margin: 0;
+        height: 100%;
+    }
+
+    html,
+    legend {
+        box-sizing: border-box;
+    }
+
+    *,
+    *::after,
+    *::before {
+        box-sizing: inherit;
+    }
+
+    table {
+        border-collapse: collapse;
+        border-spacing: 0;
+    }
+
+    // paragraphs
+    p {
+        margin: toEm(0 0 $crispy__spacing 0);
+    }
+
+    // Semantic text elements
+    a,
+    ins,
+    u {
+        text-decoration-skip: ink edges;
+    }
+
+    a {
+        color: $crispy__color-primary;
+
+        &:hover {
+            color: $crispy__color-hover;
+        }
+
+        &:focus {
+            outline: none;
+        }
+    }
+
+    abbr[title] {
+        border-bottom: 1px dotted;
+        cursor: help;
+        text-decoration: none;
+    }
+
+    mark {
+        padding: toEm(5px);
+    }
+
+    // blockquote
+    blockquote {
+        border-left: 1px solid $crispy__color-secondary;
+        margin-left: 0;
+        padding: toEm(10px 20px);
+
+        p:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    // lists
+    dl,
+    ol,
+    ul {
+        padding: 0;
+        margin: toEm(0 0 $crispy__spacing $crispy__spacing);
+    }
+
+    ol ol,
+    ul ul {
+        margin-top: toEm(($crispy__spacing / 2));
+    }
+
+    ol {
+        list-style: decimal outside;
+    }
+
+    ul {
+        list-style: disc outside;
+    }
+
+    dd,
+    dt {
+        margin: 0;
+    }
+
+    dt {
+        font-weight: bold;
+    }
+
+    // media
+    figure {
+        margin: toEm(0 0 $crispy__spacing);
+    }
+
+    figcaption {
+        margin: toEm($crispy__spacing 0 0);
+    }
+
+    // divider
+    hr {
+        border: 0;
+        border-top: 1px solid $crispy__color-secondary;
+        margin: toEm($crispy__spacing 0);
+    }
+
+    // body
+    body {
+        font-family: $crispy__font-family;
+        font-weight: normal;
+        line-height: $crispy__golden-ratio;
+        color: $crispy__color-text;
+        background-color: $crispy__color-background;
+        direction: $crispy__direction;
+
+        @include crispy__font-size($crispy__font-size);
+    }
+}

src/scss/_functions.scss

@@ -0,0 +1,3 @@
+@import
+    'functions/units',
+    'functions/zIndex';

src/scss/_helpers.scss

@@ -0,0 +1,7 @@
+@import
+    'helpers/float',
+    'helpers/spacing',
+    'helpers/media',
+    'helpers/text',
+    'helpers/visibility',
+    'helpers/width';

src/scss/mixins/mixins.scss → src/scss/_mixins.scss

@@ -1,6 +1,6 @@
 @import
-    'fonts',
-    'media-queries';
+    'mixins/fonts',
+    'mixins/media-queries';
 
 /**
  * clearfix to end floating

src/scss/_normalize.scss

@@ -1,139 +0,0 @@
-/**
- * normalize
- *
- *
- * @author Björn Hase
- *
- */
-
-@import
-    'normalize';
-
-html {
-	font-size: 100%;
-}
-
-body,
-html {
-    margin: 0;
-	height: 100%;
-}
-
-html,
-legend {
-	box-sizing: border-box;
-}
-
-*,
-*::after,
-*::before {
-	box-sizing: inherit;
-}
-
-table {
-	border-collapse: collapse;
-	border-spacing: 0;
-}
-
-// paragraphs
-p {
-	margin: toEm(0 0 $crispy__margin 0);
-}
-
-// Semantic text elements
-a,
-ins,
-u {
-	text-decoration-skip: ink edges;
-}
-
-a {
-	color: $crispy__color-primary;
-
-	&:hover {
-		color: $crispy__color-hover;
-	}
-
-	&:focus {
-		outline: none;
-	}
-}
-
-abbr[title] {
-	border-bottom: 1px dotted;
-	cursor: help;
-	text-decoration: none;
-}
-
-mark {
-	padding: toEm(5px);
-}
-
-// blockquote
-blockquote {
-	border-left: 1px solid $crispy__color-secondary;
-	margin-left: 0;
-	padding: toEm(10px 20px);
-
-	p:last-child {
-		margin-bottom: 0;
-	}
-}
-
-// lists
-dl,
-ol,
-ul {
-	padding: 0;
-	margin: toEm(0 0 $crispy__margin $crispy__margin);
-}
-
-ol ol,
-ul ul {
-	margin-top: toEm(($crispy__margin / 2));
-}
-
-ol {
-	list-style: decimal outside;
-}
-
-ul {
-	list-style: disc outside;
-}
-
-dd,
-dt {
-	margin: 0;
-}
-
-dt {
-	font-weight: bold;
-}
-
-// media
-figure {
-	margin: toEm(0 0 $crispy__margin);
-}
-
-figcaption {
-	margin: toEm($crispy__margin 0 0);
-}
-
-// divider
-hr {
-	border: 0;
-	border-top: 1px solid $crispy__color-secondary;
-	margin: toEm($crispy__margin 0);
-}
-
-// body
-body {
-	font-family: $crispy__font-family;
-	font-weight: normal;
-	line-height: $crispy__golden-ratio;
-	color: $crispy__color-text;
-	background-color: $crispy__color-background;
-	direction: $crispy__direction;
-
-	@include crispy__font-size($crispy__font-size);
-}

src/scss/components/_button.scss

@@ -1,12 +1,11 @@
 /**
- * component: button
+ * components: button
  *
  *
  * @author Björn Hase
  *
  */
 
-
 $crispy__button__padding: toEm(10px 25px) !default;
 
 $crispy__button__up__margin: toEm(20px) !default;

src/scss/components/_code.scss

@@ -11,11 +11,10 @@
  *
  */
 
-
 $crispy__code__font-size: $crispy__font-size !default;
 $crispy__code__font-family: monospace, monospace !default;
 $crispy__code__padding: toEm(10px 20px) !default;
-$crispy__code__margin: toEm(0 0 $crispy__margin) !default;
+$crispy__code__margin: toEm(0 0 $crispy__spacing) !default;
 $crispy__code__border: 1px solid $crispy__color-border !default;
 $crispy__code__background-color: #f9f9f9 !default;
 

src/scss/components/field/field.scss → src/scss/components/_field.scss

@@ -1,22 +1,27 @@
 @import
-    'checkbox',
-    'label',
-    'panel',
-    'text',
-    'radio',
-    'select';
+    'field/checkbox',
+    'field/label',
+    'field/panel',
+    'field/text',
+    'field/radio',
+    'field/select';
 
 /**
  * component: field
  *
- * field is a wrapper for form elements
+ * <div class="field">
+ *     <label class="field__label">
+ *         text
+ *         <input type="text" class="field__text" />
+ *     <label>
+ * </div>
  *
  *
  * @author Björn Hase
  *
  */
 
-$crispy__field__margin: toEm(0 0 $crispy__margin 0) !default;
+$crispy__field__margin: toEm(0 0 $crispy__spacing 0) !default;
 
 $crispy__field__input__font-size: $crispy__font-size !default;
 $crispy__field__input__padding: toEm(6px 8px) !default;

src/scss/components/_group.scss

@@ -11,9 +11,8 @@
  *
  */
 
-
 $crispy__group__character: '/' !default;
-$crispy__group__character__margin: toEm(0 $crispy__margin 0) !default;
+$crispy__group__character__margin: toEm(0 $crispy__spacing 0) !default;
 
 @mixin crispy__group() {
     .group {

src/scss/components/_heading.scss

@@ -9,7 +9,6 @@
  *
  */
 
-
 $crispy__heading__font-sizes: (
     'h1': 40px,
     'h2': 36px,

src/scss/components/_hero.scss

@@ -2,7 +2,6 @@
  * component: hero
  *
  * background-size is as default: cover - Resize the background image to cover the entire container
- *
  * <div class="hero" style="width: value; height: value; background-image: url(path)"></div>
  *
  *

src/scss/components/_icon.scss

@@ -1,62 +0,0 @@
-/**
- * component: icon
- *
- * use svg as icon
- *
- * <svg class="icon">
- *
- * </svg>
- *
- *
- * @author Björn Hase
- *
- */
-
-
-$crispy__icon__vertical-align: text-bottom !default;
-
-$crispy__icon__sizes: (
-    'default': $crispy__font-size,
-    'small': 12px,
-    'large': 28px
-) !default;
-
-@mixin crispy__icon() {
-    .icon {
-        display: inline-block;
-        position: relative;
-        vertical-align: $crispy__icon__vertical-align;
-
-        @include crispy__icon-sizes($crispy__icon__sizes);
-    }
-}
-
-/**
- * adding sizes for icons from map
- *
- *
- * @param {map} $sizes
- *
- */
-@mixin crispy__icon-sizes($sizes) {
-     @each $name, $size in $sizes {
-        @if ($name == 'default') {
-             @include crispy__icon-size($size);
-        } @else {
-            &--#{$name} {
-                @include crispy__icon-size($size);
-            }
-        }
-    }
-}
-
-/**
- * add size for icon as width and height
- *
- *
- * @param {px} $size
- *
- */
-@mixin crispy__icon-size($size) {
-    width: $size;
-}

src/scss/components/_modal.scss

@@ -10,7 +10,7 @@
  */
 
 
-$crispy__modal__margin: toEm($crispy__margin * 2) !default;
+$crispy__modal__margin: toEm($crispy__spacing * 2) !default;
 $crispy__modal__z-index: zIndex('modal') !default;
 
 @mixin crispy__modal {

src/scss/components/_panel.scss

@@ -11,8 +11,7 @@
  *
  */
 
-
-$crispy__panel__padding: toEm($crispy__margin) !default;
+$crispy__panel__padding: toEm($crispy__spacing) !default;
 
 @mixin crispy__panel {
     .panel {

src/scss/components/_table.scss

@@ -20,7 +20,6 @@
  *
  */
 
-
 $crispy__table__padding: toEm(10px 8px) !default;
 
 $crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !default;

src/scss/components/components.scss

@@ -1,36 +0,0 @@
-@import
-    'button',
-    'code',
-    'group',
-    'heading',
-    'hero',
-    'icon',
-    'modal',
-    '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();
-}

src/scss/components/field/_panel.scss

@@ -13,7 +13,7 @@
  *
  */
 
-$crispy__field__panel__padding: toEm($crispy__margin) !default;
+$crispy__field__panel__padding: toEm($crispy__spacing) !default;
 $crispy__field__panel__color: white !default;
 $crispy__field__panel__background-color--valid: $crispy__color-success !default;
 $crispy__field__panel__background-color--error: $crispy__color-danger !default;

src/scss/components/field/_radio.scss

@@ -4,12 +4,12 @@
  * <div class="field">
  *     <input id="" type="text" class="field__radio" />
  *     <label for="" class="field__label">
- *         <svg class="icon field__radio__checked" viewBox="0 0 100 100">
- *             <use src="#"></use>
- *         </svg>
- *         <svg class="icon field__radio__checked" viewBox="0 0 100 100">
- *             <use src="#"></use>
- *         </svg>
+ *         <i class="icon field__radio__checked">
+ *
+ *         </i>
+ *         <i class="icon field__radio__checked">
+ *
+ *         </i>
  *    </label>
  * </div>
  *

src/scss/crispy.scss

@@ -1,8 +1,26 @@
 @import
-    'functions/functions',
-    'mixins/mixins',
-
+    'functions',
+    'mixins',
     'config',
-    'normalize',
-    'components/components',
-    'helpers/helpers';
+    'core',
+    'components',
+    'helpers';
+
+// components
+@include crispy__core();
+@include crispy__button();
+@include crispy__field();
+@include crispy__group();
+@include crispy__heading();
+@include crispy__hero();
+@include crispy__modal();
+@include crispy__panel();
+@include crispy__table();
+
+// helpers
+@include crispy__float();
+@include crispy__media();
+@include crispy__spacing();
+@include crispy__text();
+@include crispy__visibility();
+@include crispy__width();

src/scss/example.scss

@@ -0,0 +1,2 @@
+@import
+    'crispy';

src/scss/functions/_zIndex.scss

@@ -1,6 +1,7 @@
 /**
  * function: z-index
  *
+ * uses map $crispy__z-index to get value by key 
  *
  * @author Björn Hase
  *

src/scss/functions/functions.scss

@@ -1,3 +0,0 @@
-@import
-    'units',
-    'zIndex';

src/scss/helpers/_margin.scss

@@ -1,61 +0,0 @@
-/**
- * helper: margin
- *
- *
- *
- * @author Björn Hase
- *
- */
-
-$crispy__margin-top: toEm($crispy__margin) !default;
-$crispy__margin-bottom: toEm($crispy__margin) !default;
-
-@mixin crispy__margin() {
-    .margin-top-0x {
-        margin-top: 0;
-    }
-
-    .margin-top-1x {
-        margin-top: $crispy__margin-top;
-    }
-
-    .margin-top-2x {
-        margin-top: $crispy__margin-top * 2;
-    }
-
-    .margin-top-3x {
-        margin-top: $crispy__margin-top * 3;
-    }
-
-    .margin-top-4x {
-        margin-top: $crispy__margin-top * 4;
-    }
-
-    .margin-top-5x {
-        margin-top: $crispy__margin-top * 5;
-    }
-
-    .margin-bottom-0x {
-        margin-bottom: 0;
-    }
-
-    .margin-bottom-1x {
-        margin-bottom: $crispy__margin-bottom;
-    }
-
-    .margin-bottom-2x {
-        margin-bottom: $crispy__margin-bottom * 2;
-    }
-
-    .margin-bottom-3x {
-        margin-bottom: $crispy__margin-bottom * 3;
-    }
-
-    .margin-bottom-4x {
-        margin-bottom: $crispy__margin-bottom * 4;
-    }
-
-    .margin-bottom-5x {
-        margin-bottom: $crispy__margin-bottom * 5;
-    }
-}

src/scss/helpers/_media.scss

@@ -1,6 +1,6 @@
 /**
  * helper: media
- *  
+ *
  * for img & video
  *
  *

src/scss/helpers/_spacing.scss

@@ -0,0 +1,43 @@
+/**
+ * helper: spacing
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin crispy__spacing() {
+    @for $i from 0 through $crispy__spacing__steps {
+        .margin-top-#{($i + 1)}x {
+            margin-top: ($crispy__spacing * $i);
+        }
+
+        .margin-left-#{($i + 1)}x {
+            margin-left: ($crispy__spacing * $i);
+        }
+
+        .margin-bottom-#{($i + 1)}x {
+            margin-bottom: ($crispy__spacing * $i);
+        }
+
+        .margin-right-#{($i + 1)}x {
+            margin-right: ($crispy__spacing * ($i));
+        }
+
+        .padding-top-#{($i + 1)}x {
+            padding-top: ($crispy__spacing * $i);
+        }
+
+        .padding-left-#{($i + 1)}x {
+            padding-left: ($crispy__spacing * $i);
+        }
+
+        .padding-bottom-#{($i + 1)}x {
+            padding-bottom: ($crispy__spacing * $i);
+        }
+
+        .padding-right-#{($i + 1)}x {
+            padding-right: ($crispy__spacing * $i);
+        }
+    }
+}

src/scss/helpers/_text.scss

@@ -8,7 +8,6 @@
  *
  */
 
-
 $crispy__text-colors: $crispy__colors !default;
 $crispy__text-font-sizes: $crispy__font-sizes !default;
 

src/scss/helpers/helpers.scss

@@ -1,20 +0,0 @@
-@import
-    'float',
-    'margin',
-    '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();
-}

webpack.mix.js

@@ -11,9 +11,9 @@ let mix = require('laravel-mix');
  |
  */
 
-mix.sass([
-        'src/sass/crispy.scss',
-    ], 'dist/')
+ mix.sass('src/scss/example.scss', 'dist/crispy.min.css', {
+         includePaths: ["node_modules/normalize-scss/sass"]
+     })
     .options({
         postCss: [
             require('postcss-css-variables')()