refactoring

package.json

@@ -1,15 +1,27 @@
 {
   "name": "crispy-boilerplate",
-  "version": "0.9.3",
+  "version": "0.9.4",
   "description": "Flat Sass Boilerplate to give you a amount of Basic Settings, Mixins and Functions",
   "repository": {
     "type": "git",
-    "url": "git@github.com:nirgendswo/crispy-boilerplate.git"
+    "url": "git@github.com:HerrHase/crispy-boilerplate.git"
   },
   "author": "Björn Hase",
   "license": "MIT",
   "dependencies": {
     "normalize.css": "^7.0.0",
     "reflex-grid": "^2.0.1"
+  },
+  "config": {
+    "dest_dir": "dest/",
+    "src_dir": "src/",
+  },
+  "scripts": {
+    "preinstall": "npm install -g node-sass clean-css-cli postcss-cli autoprefixer",
+    "build": "npm run css:build",
+    "css:build": "npm run css:clean && npm run css:postcss && npm run css:minify",
+    "css:clean": "rimraf $npm_package_config_dist_dir/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_dest_dir/css/landingPage.css > $npm_package_config_dest_dir/css/landingPage.min.css"
   }
 }

src/scss/_base.scss

@@ -1,3 +1,10 @@
+@import
+    '../../normalize.css/normalize',
+    '../../reflex-grid/scss/reflex',
+    
+    'functions/functions',
+    'mixins/mixins';
+
 /**
  * base
  *
@@ -35,26 +42,72 @@ table {
     border-spacing: 0;
 }
 
+// paragraphs
 p {
     margin: 0 0 $crispy__margin 0;
 }
 
-ul, ol, dl {
-    margin: 0 0 $crispy__margin 0;
-}
-
-ul {
-    list-style-position: outside;
+// Semantic text elements
+a,
+ins,
+u {
+  text-decoration-skip: ink edges;
 }
 
 a {
     color: $crispy__color-primary;
 
+    &:hover {
+        color: $crispy__color-text;
+    }
+
     &:focus {
         outline: none;
     }
 }
 
+abbr[title] {
+    border-bottom: 1px dotted;
+    cursor: help;
+    text-decoration: none;
+}
+
+kbd {
+    // ?
+}
+
+mark {
+    padding: pxToEm(10px);
+
+}
+
+// blockquote
+blockquote {
+    border-left: 1px solid $crispy__color-text;
+    margin-left: 0;
+    padding: pxToEm(10px) pxToEm(20px);
+
+    p:last-child {
+        margin-bottom: 0;
+    }
+}
+
+// lists
+ul, ol, dl {
+    margin: 0 0 $crispy__margin 0;
+}
+
+ul {
+    list-style-position: outside;
+}
+
+// divider
+hr {
+    border: 0;
+    border-top: 1px solid $crispy__color-text;
+}
+
+// body
 body {
     font-family: $crispy__body__font-family;
     font-weight: normal;

src/scss/_config.scss

@@ -1,14 +1,19 @@
 /**
- * default
+ * config
  *
  *
+ * @author Björn Hase
+ *
  */
 
+// font
 $crispy__font-size: 16px !default;
 $crispy__golden-ratio: 1.618 !default;
 
+// margin
 $crispy__margin: pxToEm(20px) !default;
 
+// colors
 $cripsy__color-primary: #5ca4a9 !default;
 $cripsy__color-success: #6a8d73 !default;
 $cripsy__color-warning: #f4f1bb !default;
@@ -16,6 +21,7 @@ $cripsy__color-danger: #ed6a5a !default;
 $cripsy__color-text: #969696 !default;
 $crispy__color-background: #e6ebe0 !default;
 
+// body
 $crispy__body__font-family: Arial, Helvetica, Neue Helvetica, sans-serif !default;
 $crispy__body__line-height: $base__golden-ratio !default;
 $crispy__body__direction: ltr !default;

src/scss/_mixins.scss

@@ -1,65 +0,0 @@
-/**
- * add font-size in px as fallback
- * and in rem
- *
- *
- * @param {px} $font-size
- *
- */
-@mixin font-size($font-size) {
-    font-size: $font-size;
-    font-size: pxToRem($font-size);
-}
-
-/**
- * add modificators for font-size from a map
- *
- *
- * @param {map} $font-sizes
- *
- */
-@mixin font-sizes($font-sizes) {
-    @each $name, $font-size in $font-sizes {
-       @if ($name == 'default') {
-           @include font-size($font-size);
-       } @else {
-           &--#{$name} {
-               @include font-size($font-size);
-           }
-       }
-   }
-}
-
-/**
- * clearfix to end floating
- *
- *
- *
- */
-@mixin clearfix() {
-    &::before,
-    &::after {
-        display: table;
-        content: ' ';
-    }
-
-    &::after {
-        clear: both;
-    }
-}
-
-/**
- * clear default styles from list
- *
- *
- */
-@mixin crispy-boilerplate-list-clear() {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    li {
-        margin: 0;
-        padding: 0;
-    }
-}

src/scss/components/_button.scss

@@ -6,9 +6,36 @@
  *
  */
 
+$crispy__button__padding: pxToEm(5px) pxToEm(10px) !default;
+
 $crispy__button__up-margin: pxToEm(20px) !default;
 $crispy__button__up-padding: pxToEm(5px) !default;
 
+$crispy__button__sizes: (
+    'default': 18px,
+    'small': 14px,
+    'large': 28px
+) !default;
+
+$crispy__button__colors: (
+    'default': (
+        'color': $cripsy__color-text,
+        'background-color': $crispy__color-primary
+    ),
+    'success': (
+        'color': $cripsy__color-text,
+        'background-color': $crispy__color-primary
+    ),
+    'warning': (
+        'color': $cripsy__color-text,
+        'background-color': $crispy__color-primary
+    ),
+    'danger': (
+        'color': $cripsy__color-text,
+        'background-color': $crispy__color-primary
+    )
+) !default;
+
 @mixin crispy__button() {
     .button {
         position: relative;
@@ -17,6 +44,8 @@ $crispy__button__up-padding: pxToEm(5px) !default;
         vertical-align: middle;
         appearance: none;
 
+        padding: $crispy__button__padding;
+
         &--wide {
             width: 100%;
         }
@@ -37,6 +66,7 @@ $crispy__button__up-padding: pxToEm(5px) !default;
             bottom: 0;
         }
 
+
         &:hover {
             cursor: pointer;
             text-decoration: none;

src/scss/components/_heading.scss

@@ -1,7 +1,8 @@
 /**
  * heading
  *
- * create classes for heading similar to there name
+ * create classes for heading similar to there name,
+ * run map for sizes on each heading
  *
  *
  * @author Björn Hase

src/scss/components/_icon.scss

@@ -23,8 +23,10 @@ $crispy__icon__sizes: (
 ) !default;
 
 $crispy__icon__colors: (
-    'default': black,
-    'secondary': grey,
+    'default': $cripsy__color-text,
+    'success': $cripsy__color-success,
+    'warning': $cripsy__color-warning,
+    'danger': $cripsy__color-danger
 ) !default;
 
 @mixin crispy__icon() {

src/scss/components/_list.scss

@@ -1,35 +0,0 @@
-/**
- * list
- *
- * styles and mixins for ol and ul-element
- *
- *
- * @author Björn Hase
- *
- */
-
-@mixin crispy__list {
-    .list {
-        &--horizontal {
-            li {
-                float: left;
-            }
-        }
-
-        &--clear {
-            @include crispy__list-clear();
-        }
-    }
-
-    .d-list {
-        &--horizontal {
-            dt, dd {
-                float: left;
-            }
-
-            dd {
-                clear: left;
-            }
-        }
-    }
-}

src/scss/components/_table.scss

@@ -20,36 +20,39 @@
  *
  */
 
- $crispy__table__padding: pxToEm(10px) pxToEm(8px) !default;
-
- $crispy__table__color: $crispy__color-text !default;
- $crispy__table__border-color: lighten($crispy__color-text, 40%) !default;
- $crispy__table__striped__background-color: lighten($table__border-color, 4%) !default;
-
- @mixin crispy__table() {
-     .table {
-         width: 100%;
-
-         &--strippd {
-             tr {
-                 &:nth-child(even) {
-                     background-color: $crispy__table__striped__background-color;
-                 }
-             }
-         }
-
-         td {
-             color:  $crispy__table__color;
-         }
-
-         th, td {
- 			 padding:  $crispy__table__padding;
- 			 text-align: left;
- 			 border-bottom: 1px solid  $crispy__table__border-color;
-         }
-
-         th {
-             border-bottom-width: 2px;
-         }
- 	}
- }
+$crispy__table__padding: pxToEm(10px) pxToEm(8px) !default;
+
+$crispy__table__td__border: 1px solid lighten($crispy__color-text, 40%) !default;
+$crispy__table__th__border-width: 2px !default;
+
+$crispy__table__color: $crispy__color-text !default;
+$crispy__table__striped__background-color: lighten($table__border-color, 4%) !default;
+
+@mixin crispy__table() {
+    .table {
+        width: 100%;
+
+        &--striped {
+            tr {
+                &:nth-child(even) {
+                    background-color: $crispy__table__striped__background-color;
+                }
+            }
+        }
+
+        td {
+            color: $crispy__table__color;
+        }
+
+        td,
+        th {
+            padding: $crispy__table__padding;
+            text-align: left;
+            border-bottom: $crispy__table__td__border;
+        }
+
+        th {
+            border-bottom-width: $crispy__table__th__border-width;
+        }
+    }
+}

src/scss/crispy.scss

@@ -1,18 +1,7 @@
 @import
-    '../../normalize.css/normalize',
-
-    'functions/units',
-    'functions/zIndex',
-
-    'mixins',
-
-    'components/align',
-    'components/body',
+    'helpers/helpers',
+    
     'components/button',
-    'components/clearfix',
     'components/heading',
     'components/icon',
-    'components/list',
-    'components/margin',
-    'components/normalize',
-    'components/text-colors';
+    'components/table';

src/scss/example.scss

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

src/scss/functions/_functions.scss

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

src/scss/functions/_zIndex.scss

@@ -1,8 +1,6 @@
 /**
  * z-index
  *
- * handle z-index
- *
  *
  * @author Björn Hase
  *

src/scss/helper/_helpers.scss

@@ -0,0 +1,8 @@
+@import
+    'align',
+    'background-color',
+    'margin',
+    'media',
+    'text-color',
+    'typography',
+    'visibilty';

src/scss/helper/_margin.scss

@@ -8,10 +8,10 @@
  *
  */
 
-$margin-top: $crispy__margin !default;
-$margin-bottom: $crispy__margin !default;
+$crispy__margin-top: $crispy__margin !default;
+$crispy__margin-bottom: $crispy__margin !default;
 
-@mixin crispy-boilerplate-margin() {
+@mixin crispy__margin() {
     .margin-top-0x {
         margin-top: 0;
     }

src/scss/helper/_media.scss

@@ -1 +0,0 @@
-// reflex grid commands for reflex grid

src/scss/helper/_typography.scss

@@ -1,5 +0,0 @@
-/**
- *
- *
- *
- */

src/scss/helper/_visibilty.scss

@@ -1,7 +1,156 @@
-.hide {
-    display: none;
-}
+/**
+ * visibilty
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+@mixin crispy__visibilty() {
+    .hide {
+        display: none;
+    }
+
+    .hide {
+        &--xs {
+            @include crispy__media-xs() {
+                display: none;
+            }
+        }
+
+        &--sm {
+            @include crispy__media-sm() {
+                display: none;
+            }
+        }
+
+        &--md {
+            @include crispy__media-md() {
+                display: none;
+            }
+        }
+
+        &--lg {
+            @include crispy__media-lg() {
+                display: none;
+            }
+        }
+
+        &--xlg {
+            @include crispy__media-xlg() {
+                display: none;
+            }
+        }
+    }
+
+    .show {
+        display: block;
+
+        &--inline {
+            display: inline;
+        }
+
+        &--inline-block {
+            display: inline-block;
+        }
+    }
+
+    // block
+    .show {
+        &--xs {
+            @include crispy__media-xs() {
+                display: block;
+            }
+        }
+
+        &--sm {
+            @include crispy__media-sm() {
+                display: block;
+            }
+        }
+
+        &--md {
+            @include crispy__media-md() {
+                display: block;
+            }
+        }
+
+        &--lg {
+            @include crispy__media-lg() {
+                display: block;
+            }
+        }
+
+        &--xlg {
+            @include crispy__media-xlg() {
+                display: block;
+            }
+        }
+    }
+
+    // show inline
+    .show {
+        &--inline-xs {
+            @include crispy__media-xs() {
+                display: inline;
+            }
+        }
+
+        &--inline-sm {
+            @include crispy__media-sm() {
+                display: inline;
+            }
+        }
+
+        &--inline-md {
+            @include crispy__media-md() {
+                display: inline;
+            }
+        }
+
+        &--inline-lg {
+            @include crispy__media-lg() {
+                display: inline;
+            }
+        }
+
+        &--inline-xlg {
+            @include crispy__media-xlg() {
+                display: inline;
+            }
+        }
+    }
+
+    // show inline block
+    .show {
+        &--inline-block-xs {
+            @include crispy__media-xs() {
+                display: inline-block;
+            }
+        }
+
+        &--inline-block-sm {
+            @include crispy__media-sm() {
+                display: inline-block;
+            }
+        }
+
+        &--inline-block-md {
+            @include crispy__media-md() {
+                display: inline-block;
+            }
+        }
 
-.show {
+        &--inline-block-lg {
+            @include crispy__media-lg() {
+                display: inline-block;
+            }
+        }
 
+        &--inline-block-xlg {
+            @include crispy__media-xlg() {
+                display: inline-block;
+            }
+        }
+    }
 }

src/scss/helper/_visible.scss

@@ -1,235 +0,0 @@
-/**
- *
- *
- *
- *
- */
-
-
-.show {
-    display: block;
-}
-
-.hide {
-    display: none;
-
-    &--xs {
-        @include media-xs {
-            display: none;
-        }
-    }
-
-    &--sm {
-
-    }
-
-    &--md {
-
-    }
-
-    &--lg {
-
-    }
-}
-
-.lg-visible,
-.md-visible,
-.sm-visible,
-.xs-visible {
-    display: none !important;
-}
-
-.lg-visible-block,
-.lg-visible-inline,
-.lg-visible-inline-block,
-.md-visible-block,
-.md-visible-inline,
-.md-visible-inline-block,
-.sm-visible-block,
-.sm-visible-inline,
-.sm-visible-inline-block,
-.xs-visible-block,
-.xs-visible-inline,
-.xs-visible-inline-block {
-    display: none !important;
-}
-
-/**
- * show
- *
- *
- */
-
-@media (max-width: 767px) {
-    .xs-visible {
-        display: block !important;
-    }
-
-    table.xs-visible {
-        display: table !important;
-    }
-
-    tr.xs-visible {
-        display: table-row !important;
-    }
-
-    td.xs-visible,
-    th.xs-visible {
-        display: table-cell !important;
-    }
-}
-
-@media (max-width: 767px) {
-    .xs-visible-block {
-        display: block !important;
-    }
-}
-
-@media (max-width: 767px) {
-    .xs-visible-inline {
-        display: inline !important;
-    }
-}
-
-@media (max-width: 767px) {
-    .xs-visible-inline-block {
-        display: inline-block !important;
-    }
-}
-
-@media (min-width: 768px) and (max-width: 991px) {
-    .sm-visible {
-        display: block !important;
-    }
-
-    table.sm-visible {
-        display: table !important;
-    }
-
-    tr.sm-visible {
-        display: table-row !important;
-    }
-
-    td.sm-visible,
-    th.sm-visible {
-        display: table-cell !important;
-    }
-}
-
-@media (min-width: 768px) and (max-width: 991px) {
-    .sm-visible-block {
-        display: block !important;
-    }
-}
-
-@media (min-width: 768px) and (max-width: 991px) {
-    .sm-visible-inline {
-        display: inline !important;
-    }
-}
-
-@media (min-width: 768px) and (max-width: 991px) {
-    .sm-visible-inline-block {
-        display: inline-block !important;
-    }
-}
-
-@media (min-width: 992px) and (max-width: 1199px) {
-    .md-visible {
-        display: block !important;
-    }
-
-    table.md-visible {
-        display: table !important;
-    }
-
-    tr.md-visible {
-        display: table-row !important;
-    }
-
-    td.md-visible,
-    th.md-visible {
-        display: table-cell !important;
-    }
-}
-
-@media (min-width: 992px) and (max-width: 1199px) {
-    .md-visible-block {
-        display: block !important;
-    }
-}
-
-@media (min-width: 992px) and (max-width: 1199px) {
-    .md-visible-inline {
-        display: inline !important;
-    }
-}
-
-@media (min-width: 992px) and (max-width: 1199px) {
-    .md-visible-inline-block {
-        display: inline-block !important;
-    }
-}
-
-@media (min-width: 1200px) {
-    .lg-visible {
-        display: block !important;
-    }
-
-    table.lg-visible {
-        display: table !important;
-    }
-
-    tr.lg-visible {
-        display: table-row !important;
-    }
-
-    td.lg-visible,
-    th.lg-visible {
-        display: table-cell !important;
-    }
-}
-
-@media (min-width: 1200px) {
-    .lg-visible-block {
-        display: block !important;
-    }
-}
-
-@media (min-width: 1200px) {
-    .lg-visible-inline {
-        display: inline !important;
-    }
-}
-
-@media (min-width: 1200px) {
-    .lg-visible-inline-block {
-        display: inline-block !important;
-    }
-}
-
-/**
- *  hidden
- *
- *
- */
-@media (max-width: 767px) {
-    .xs-hidden {
-        display: none !important;
-    }
-}
-@media (min-width: 768px) and (max-width: 991px) {
-    .sm-hidden {
-        display: none !important;
-    }
-}
-@media (min-width: 992px) and (max-width: 1199px) {
-    .md-hidden {
-        display: none !important;
-    }
-}
-@media (min-width: 1200px) {
-    .lg-hidden {
-        display: none !important;
-    }
-}

src/scss/mixins/_fonts.scss

@@ -0,0 +1,38 @@
+/**
+ *
+ *
+ *
+ *
+ */
+
+/**
+ * add font-size in px as fallback
+ * and in rem
+ *
+ *
+ * @param {px} $font-size
+ *
+ */
+@mixin font-size($font-size) {
+    font-size: $font-size;
+    font-size: pxToRem($font-size);
+}
+
+/**
+ * add modificators for font-size from a map
+ *
+ *
+ * @param {map} $font-sizes
+ *
+ */
+@mixin font-sizes($font-sizes) {
+    @each $name, $font-size in $font-sizes {
+        @if ($name == 'default') {
+            @include font-size($font-size);
+        } @else {
+            &--#{$name} {
+                @include font-size($font-size);
+            }
+        }
+    }
+}

src/scss/mixins/_media-queries.scss

@@ -0,0 +1,69 @@
+/**
+ * media-queries
+ *
+ *
+ * @author Björn Hase
+ *
+ */
+
+
+@mixin crispy__media-xs() {
+    @media only screen and (min-width: $reflex-xs) {
+        $content;
+    }
+}
+
+@mixin crispy__media-sm() {
+    @media only screen and (min-width: $reflex-sm) {
+        $content;
+    }
+}
+
+@mixin crispy__media-md() {
+    @media only screen and (min-width: $reflex-md) {
+        $content;
+    }
+}
+
+@mixin crispy__media-lg() {
+    @media only screen and (min-width: $reflex-lg) {
+        $content;
+    }
+}
+
+@mixin crispy__media-xlg() {
+    @media only screen and (min-width: $reflex-xlg) {
+        $content;
+    }
+}
+
+// only
+@mixin crispy__media-xs-only() {
+    @media only screen and (min-width: $reflex-xs) and (max-width: $reflex-xs - 1) {
+        $content;
+    }
+}
+
+@mixin crispy__media-sm-only() {
+    @media only screen and (min-width: $reflex-sm) and (max-width: $reflex-md - 1) {
+        $content;
+    }
+}
+
+@mixin crispy__media-md-only() {
+    @media only screen and (min-width: $reflex-md) and (max-width: $reflex-md - 1) {
+        $content;
+    }
+}
+
+@mixin crispy__media-lg-only() {
+    @media only screen and (min-width: $reflex-lg) and (max-width: $reflex-lg - 1) {
+        $content;
+    }
+}
+
+@mixin crispy__media-xlg-only() {
+    @media only screen and (min-width: $reflex-xlg) and (max-width: $reflex-xlg - 1) {
+        $content;
+    }
+}

src/scss/mixins/_mixins.scss

@@ -0,0 +1,37 @@
+@import
+    'fonts',
+    'media-queries';
+
+/**
+ * clearfix to end floating
+ *
+ *
+ *
+ */
+@mixin crispy__clearfix() {
+    &::before,
+    &::after {
+        display: table;
+        content: ' ';
+    }
+
+    &::after {
+        clear: both;
+    }
+}
+
+/**
+ * clear default styles from list
+ *
+ *
+ */
+@mixin crispy__list-clear() {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    li {
+        margin: 0;
+        padding: 0;
+    }
+}