Old Grid System v6 (Flexbox) added for compatibility

css/grillade-v6.scss

@@ -0,0 +1,145 @@
+/* ---------------------------------- */
+/* ==Grillade v6                      */
+/* ---------------------------------- */
+/* IMPORTANT : this is the KNACSS v6 old Grid System based on Flexbox */
+/* You only need it for projects on older browsers (IE11-) */
+
+// Responsive breakpoints variables
+
+// Warning : you should use your own values, regardless of the devices
+// Best practise : (max-width: ($BP - 1)) and (min-width: $BP)
+
+$tiny: 480px !default; // or 'em' if you prefer, of course
+$small: 576px !default;
+$medium: 768px !default;
+$large: 992px !default;
+$extra-large: 1200px !default;
+
+// gutter values for grid layouts. Unit can be: %, px, em, rem
+$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
+// IEfixing, see
+// https://github.com/alsacreations/KNACSS/issues/133;
+$iefix: 0.01px;
+@media (min-width: $small) {
+  [class*=" grid-"],
+  [class^="grid-"] {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    & > * {
+      box-sizing: border-box;
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+}
+// Multi-line grid constructor
+// example : .grid-perso { @include grid(12, 3rem); }
+@mixin grid($grid-number: 1, $own-gutter: 0) {
+  & > * {
+    width: calc(100% / #{$grid-number} - #{$iefix});
+  }
+  @each $affix, $size in $grid-gutters {
+    &.has-gutter#{$affix} {
+      margin-right: -$size / 2;
+      margin-left: -$size / 2;
+
+      & > * {
+        width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
+        margin-right: $size / 2;
+        margin-left: $size / 2;
+      }
+    }
+  }
+  @if ($own-gutter != 0) {
+    margin-right: -$own-gutter / 2;
+    margin-left: -$own-gutter / 2;
+
+    & > * {
+      width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
+      margin-right: $own-gutter / 2;
+      margin-left: $own-gutter / 2;
+    }
+  }
+}
+// Mono-line grid constructor (.grid)
+@media (min-width: $small) {
+  .grid,
+  .grid--reverse {
+    display: flex;
+
+    & > * {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+      min-width: 0;
+      min-height: 0;
+    }
+    @each $affix, $size in $grid-gutters {
+      &.has-gutter#{$affix} > * + * {
+        margin-left: calc(#{$size} - #{$iefix});
+      }
+    }
+  }
+}
+// Constructing grids : will be compiled in CSS
+@media (min-width: $small) {
+  @for $i from 2 through 12 {
+    [class*="grid-#{$i}"] {
+      @include grid(#{$i}, 0);
+    }
+  }
+}
+
+// Grid offsets
+.push {
+  margin-left: auto !important;
+}
+
+.pull {
+  margin-right: auto !important;
+}
+
+// Grid order
+.item-first {
+  order: -1;
+}
+
+.item-last {
+  order: 1;
+}
+
+[class*="grid-"][class*="--reverse"] {
+  flex-direction: row-reverse;
+}
+// sizing individual children
+@media (min-width: $small) {
+  @each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
+    .#{$flow} {
+      flex: 0 0 auto;
+      width: calc(100% / #{$divider} - #{$iefix});
+    }
+    @each $affix, $size in $grid-gutters {
+      .has-gutter#{$affix} > .#{$flow} {
+        width: calc(100% / #{$divider} - #{$size} - #{$iefix});
+      }
+    }
+  }
+}
+/* Responsive Small Breakpoint */
+// -small-X suffix means "X columns on small-medium screen"
+// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
+@media (min-width: $small) and (max-width: ($medium - 1)) {
+  @for $i from 1 through 4 {
+    [class*="-small-#{$i}"] {
+      & > * {
+        width: calc(100% / #{$i} - #{$iefix});
+      }
+      @each $affix, $size in $grid-gutters {
+        &.has-gutter#{$affix} > * {
+          width: calc(100% / #{$i} - #{$size} - #{$iefix});
+        }
+      }
+    }
+  }
+}

css/knacss-unminified.css

@@ -2240,6 +2240,9 @@ button:focus {
 /* use .checkbox class on input type=checkbox */
 /* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
 .checkbox ~ label {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   cursor: pointer;
 }
 
@@ -2276,6 +2279,9 @@ button:focus {
 /* use .radio class on input type=radio */
 /* recommanded HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
 .radio ~ label {
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
   cursor: pointer;
 }
 

gulpfile.js

@@ -27,8 +27,7 @@ gulp.task('css', function () {
 });
 
 gulp.task('grillade', function() {
-  return gulp.src(['./sass/_config/_breakpoints.scss', './sass/components/grillade.scss'])
+  return gulp.src('./sass/components/grillade.scss')
-    .pipe(concat('grillade.scss'))
     .pipe(gulp.dest('./css/'))
     .pipe(sass())
     .pipe(autoprefixer({ grid: true }))
@@ -36,6 +35,15 @@ gulp.task('grillade', function() {
     .pipe(gulp.dest('./css/'));
 });
 
+gulp.task('grillade-v6', function() {
+  return gulp.src('./sass/components/grillade-v6.scss')
+    .pipe(gulp.dest('./css/'))
+    .pipe(sass())
+    .pipe(autoprefixer())
+    .pipe(minifycss())
+    .pipe(gulp.dest('./css/'));
+});
+
 // Watcher
 gulp.task('watch', function() {
   gulp.watch(['./sass/*.scss'], ['css']);

sass/components/grillade-v6.scss

@@ -0,0 +1,145 @@
+/* ---------------------------------- */
+/* ==Grillade v6                      */
+/* ---------------------------------- */
+/* IMPORTANT : this is the KNACSS v6 old Grid System based on Flexbox */
+/* You only need it for projects on older browsers (IE11-) */
+
+// Responsive breakpoints variables
+
+// Warning : you should use your own values, regardless of the devices
+// Best practise : (max-width: ($BP - 1)) and (min-width: $BP)
+
+$tiny: 480px !default; // or 'em' if you prefer, of course
+$small: 576px !default;
+$medium: 768px !default;
+$large: 992px !default;
+$extra-large: 1200px !default;
+
+// gutter values for grid layouts. Unit can be: %, px, em, rem
+$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
+// IEfixing, see
+// https://github.com/alsacreations/KNACSS/issues/133;
+$iefix: 0.01px;
+@media (min-width: $small) {
+  [class*=" grid-"],
+  [class^="grid-"] {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+
+    & > * {
+      box-sizing: border-box;
+      min-width: 0;
+      min-height: 0;
+    }
+  }
+}
+// Multi-line grid constructor
+// example : .grid-perso { @include grid(12, 3rem); }
+@mixin grid($grid-number: 1, $own-gutter: 0) {
+  & > * {
+    width: calc(100% / #{$grid-number} - #{$iefix});
+  }
+  @each $affix, $size in $grid-gutters {
+    &.has-gutter#{$affix} {
+      margin-right: -$size / 2;
+      margin-left: -$size / 2;
+
+      & > * {
+        width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
+        margin-right: $size / 2;
+        margin-left: $size / 2;
+      }
+    }
+  }
+  @if ($own-gutter != 0) {
+    margin-right: -$own-gutter / 2;
+    margin-left: -$own-gutter / 2;
+
+    & > * {
+      width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
+      margin-right: $own-gutter / 2;
+      margin-left: $own-gutter / 2;
+    }
+  }
+}
+// Mono-line grid constructor (.grid)
+@media (min-width: $small) {
+  .grid,
+  .grid--reverse {
+    display: flex;
+
+    & > * {
+      flex: 1 1 0%;
+      box-sizing: border-box;
+      min-width: 0;
+      min-height: 0;
+    }
+    @each $affix, $size in $grid-gutters {
+      &.has-gutter#{$affix} > * + * {
+        margin-left: calc(#{$size} - #{$iefix});
+      }
+    }
+  }
+}
+// Constructing grids : will be compiled in CSS
+@media (min-width: $small) {
+  @for $i from 2 through 12 {
+    [class*="grid-#{$i}"] {
+      @include grid(#{$i}, 0);
+    }
+  }
+}
+
+// Grid offsets
+.push {
+  margin-left: auto !important;
+}
+
+.pull {
+  margin-right: auto !important;
+}
+
+// Grid order
+.item-first {
+  order: -1;
+}
+
+.item-last {
+  order: 1;
+}
+
+[class*="grid-"][class*="--reverse"] {
+  flex-direction: row-reverse;
+}
+// sizing individual children
+@media (min-width: $small) {
+  @each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
+    .#{$flow} {
+      flex: 0 0 auto;
+      width: calc(100% / #{$divider} - #{$iefix});
+    }
+    @each $affix, $size in $grid-gutters {
+      .has-gutter#{$affix} > .#{$flow} {
+        width: calc(100% / #{$divider} - #{$size} - #{$iefix});
+      }
+    }
+  }
+}
+/* Responsive Small Breakpoint */
+// -small-X suffix means "X columns on small-medium screen"
+// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
+@media (min-width: $small) and (max-width: ($medium - 1)) {
+  @for $i from 1 through 4 {
+    [class*="-small-#{$i}"] {
+      & > * {
+        width: calc(100% / #{$i} - #{$iefix});
+      }
+      @each $affix, $size in $grid-gutters {
+        &.has-gutter#{$affix} > * {
+          width: calc(100% / #{$i} - #{$size} - #{$iefix});
+        }
+      }
+    }
+  }
+}

sass/knacss.scss

@@ -62,7 +62,9 @@
 @import "components/arrows.scss"; // arrows styles
 @import "components/badges.scss"; // badges styles
 @import "components/alerts.scss"; // alerts styles
-@import "components/grillade.scss"; // grids
+
+// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "components/grillade-v6.scss"
+@import "components/grillade.scss"; // grid system