adding #5

package.json

@@ -10,20 +10,19 @@
   "license": "MIT",
   "dependencies": {
     "cash-dom": "^1.3.7",
-    "normalize.css": "^8.0.0",
-    "reflex-grid": "^2.0.1"
+    "normalize.css": "^8.0.0"
   },
   "devDependencies": {
-    "autoprefixer": "^7.2.5",
-    "clean-css-cli": "^4.1.10",
+    "autoprefixer": "^7.2.6",
+    "clean-css-cli": "^4.2.1",
     "copyfiles": "^1.2.0",
-    "node-sass": "^4.7.2",
+    "node-sass": "^4.9.3",
     "postcss-cli": "^4.1.1",
     "rimraf": "^2.6.1",
-    "svg-sprite": "^1.3.7",
-    "svgo": "^1.0.3",
-    "uglifyjs-webpack-plugin": "^1.2.0",
-    "webpack": "^3.11.0"
+    "svg-sprite": "^1.4.0",
+    "svgo": "^1.0.5",
+    "uglifyjs-webpack-plugin": "^1.3.0",
+    "webpack": "^3.12.0"
   },
   "config": {
     "dist_dir": "dist/",

src/scss/_config.scss

@@ -26,6 +26,13 @@ $crispy__color-text: #363636 !default;
 $crispy__color-border: #d0d0d0 !default;
 $crispy__color-background: #ffffff !default;
 
+// breakpoints
+$crispy__xs: 576px !default;
+$crispy__sm: 768px !default;
+$crispy__md: 992px !default;
+$crispy__lg: 1200px !default;
+$crispy__xlg: 1600px !default;
+
 // colors as map
 $crispy__colors: (
     'primary': $crispy__color-primary,

src/scss/crispy.scss

@@ -1,6 +1,5 @@
 @import
     'normalize',
-    'reflex',
     'functions/functions',
     'mixins/mixins',
 

src/scss/mixins/_media-queries.scss

@@ -8,62 +8,62 @@
 
 
 @mixin crispy__media-xs() {
-    @media only screen and (min-width: $reflex-xs) {
+    @media only screen and (min-width:$crispy__xs) {
         @content;
     }
 }
 
 @mixin crispy__media-sm() {
-    @media only screen and (min-width: $reflex-sm) {
+    @media only screen and (min-width: $crispy__sm) {
         @content;
     }
 }
 
 @mixin crispy__media-md() {
-    @media only screen and (min-width: $reflex-md) {
+    @media only screen and (min-width: $crispy__md) {
         @content;
     }
 }
 
 @mixin crispy__media-lg() {
-    @media only screen and (min-width: $reflex-lg) {
+    @media only screen and (min-width: $crispy__lg) {
         @content;
     }
 }
 
 @mixin crispy__media-xlg() {
-    @media only screen and (min-width: $reflex-xlg) {
+    @media only screen and (min-width: $crispy__xlg) {
         @content;
     }
 }
 
 // only
 @mixin crispy__media-xs-only() {
-    @media only screen and (min-width: $reflex-xs) and (max-width: $reflex-sm - 1) {
+    @media only screen and (min-width: $crispy__xs) and (max-width: $crispy__sm - 1) {
         @content;
     }
 }
 
 @mixin crispy__media-sm-only() {
-    @media only screen and (min-width: $reflex-sm) and (max-width: $reflex-md - 1) {
+    @media only screen and (min-width: $crispy__sm) and (max-width: $crispy__md - 1) {
         @content;
     }
 }
 
 @mixin crispy__media-md-only() {
-    @media only screen and (min-width: $reflex-md) and (max-width: $reflex-lg - 1) {
+    @media only screen and (min-width: $crispy__md) and (max-width: $crispy__lg - 1) {
         @content;
     }
 }
 
 @mixin crispy__media-lg-only() {
-    @media only screen and (min-width: $reflex-lg) and (max-width: $reflex-xlg - 1) {
+    @media only screen and (min-width: $crispy__lg) and (max-width: $crispy__xlg - 1) {
         @content;
     }
 }
 
 @mixin crispy__media-xlg-only() {
-    @media only screen and (min-width: $reflex-xlg) {
+    @media only screen and (min-width: $crispy__xlg) {
         @content;
     }
 }