mise à jour de gulp-css-minify et suppression des underscores

css/grillade-grid.css

@@ -0,0 +1 @@
+@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-1]{grid-template-columns:repeat(1,1fr)}[class*=grid-2]{grid-template-columns:repeat(2,1fr)}[class*=grid-3]{grid-template-columns:repeat(3,1fr)}[class*=grid-4]{grid-template-columns:repeat(4,1fr)}[class*=grid-5]{grid-template-columns:repeat(5,1fr)}[class*=grid-6]{grid-template-columns:repeat(6,1fr)}[class*=grid-7]{grid-template-columns:repeat(7,1fr)}[class*=grid-8]{grid-template-columns:repeat(8,1fr)}[class*=grid-9]{grid-template-columns:repeat(9,1fr)}[class*=grid-10]{grid-template-columns:repeat(10,1fr)}[class*=grid-11]{grid-template-columns:repeat(11,1fr)}[class*=grid-12]{grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}

css/grillade.css

@@ -1 +0,0 @@
-@media (min-width:480px){[class*=" grid-"],[class^=grid-]{display:-ms-grid;display:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-1]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=grid-2]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=grid-3]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=grid-4]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=grid-5]{-ms-grid-columns:(1fr) [5];grid-template-columns:repeat(5,1fr)}[class*=grid-6]{-ms-grid-columns:(1fr) [6];grid-template-columns:repeat(6,1fr)}[class*=grid-7]{-ms-grid-columns:(1fr) [7];grid-template-columns:repeat(7,1fr)}[class*=grid-8]{-ms-grid-columns:(1fr) [8];grid-template-columns:repeat(8,1fr)}[class*=grid-9]{-ms-grid-columns:(1fr) [9];grid-template-columns:repeat(9,1fr)}[class*=grid-10]{-ms-grid-columns:(1fr) [10];grid-template-columns:repeat(10,1fr)}[class*=grid-11]{-ms-grid-columns:(1fr) [11];grid-template-columns:repeat(11,1fr)}[class*=grid-12]{-ms-grid-columns:(1fr) [12];grid-template-columns:repeat(12,1fr)}[class*=col-1]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=row-1]{-ms-grid-row-span:1;-ms-grid-row:auto;grid-row:auto/span 1}[class*=col-2]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=row-2]{-ms-grid-row-span:2;-ms-grid-row:auto;grid-row:auto/span 2}[class*=col-3]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=row-3]{-ms-grid-row-span:3;-ms-grid-row:auto;grid-row:auto/span 3}[class*=col-4]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}[class*=row-4]{-ms-grid-row-span:4;-ms-grid-row:auto;grid-row:auto/span 4}[class*=col-5]{-ms-grid-column-span:5;-ms-grid-column:auto;grid-column:auto/span 5}[class*=row-5]{-ms-grid-row-span:5;-ms-grid-row:auto;grid-row:auto/span 5}[class*=col-6]{-ms-grid-column-span:6;-ms-grid-column:auto;grid-column:auto/span 6}[class*=row-6]{-ms-grid-row-span:6;-ms-grid-row:auto;grid-row:auto/span 6}[class*=col-7]{-ms-grid-column-span:7;-ms-grid-column:auto;grid-column:auto/span 7}[class*=row-7]{-ms-grid-row-span:7;-ms-grid-row:auto;grid-row:auto/span 7}[class*=col-8]{-ms-grid-column-span:8;-ms-grid-column:auto;grid-column:auto/span 8}[class*=row-8]{-ms-grid-row-span:8;-ms-grid-row:auto;grid-row:auto/span 8}[class*=col-9]{-ms-grid-column-span:9;-ms-grid-column:auto;grid-column:auto/span 9}[class*=row-9]{-ms-grid-row-span:9;-ms-grid-row:auto;grid-row:auto/span 9}[class*=col-10]{-ms-grid-column-span:10;-ms-grid-column:auto;grid-column:auto/span 10}[class*=row-10]{-ms-grid-row-span:10;-ms-grid-row:auto;grid-row:auto/span 10}[class*=col-11]{-ms-grid-column-span:11;-ms-grid-column:auto;grid-column:auto/span 11}[class*=row-11]{-ms-grid-row-span:11;-ms-grid-row:auto;grid-row:auto/span 11}[class*=col-12]{-ms-grid-column-span:12;-ms-grid-column:auto;grid-column:auto/span 12}[class*=row-12]{-ms-grid-row-span:12;-ms-grid-row:auto;grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{-ms-grid-columns:(1fr) [1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{-ms-grid-column-span:1;-ms-grid-column:auto;grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{-ms-grid-columns:(1fr) [2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{-ms-grid-column-span:2;-ms-grid-column:auto;grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{-ms-grid-columns:(1fr) [3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{-ms-grid-column-span:3;-ms-grid-column:auto;grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{-ms-grid-columns:(1fr) [4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{-ms-grid-column-span:4;-ms-grid-column:auto;grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}

css/grillade.scss

@@ -1,95 +0,0 @@
-/* --------------------------------------- */
-/* ==Grillade : ultra light Grid System    */
-/* --------------------------------------- */
-/* Doc : @TODO */
-// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
-// if you need complex Grid :
-//   1- use vanilla CSS Grid Layout spec (perfect for you)
-//   2- use Bootstrap (good luck)
-
-@if (not variable_exists(tiny)) or (not variable_exists(small))  or (not variable_exists(medium))
-  {
-  $tiny: 480px !global;
-  $small: 576px !global;
-  $medium: 768px !global;
-}
-
-[class*=" grid-"],
-[class^="grid-"] {
-  @media (min-width: $tiny) {
-    display: grid;
-    grid-auto-flow: dense;
-
-    // gutters
-    @if variable_exists(grid-gutters) {
-      $gutter: $grid-gutters !global;
-    }
-    @else {
-      $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
-    }
-    @each $affix, $size in $gutter {
-      &.has-gutter#{$affix} {
-        grid-gap: $size;
-      }
-    }
-  }
-}
-
-// grid constructor (.grid-2 to .grid-12)
-@for $i from 1 through 12 {
-  [class*="grid-#{$i}"] {
-    grid-template-columns: repeat(#{$i}, 1fr);
-  }
-}
-
-// grid items constructor (.col-1 to .col-12, .row-1 to .row-12)
-@for $i from 1 through 12 {
-  [class*="col-#{$i}"] {
-    grid-column: auto / span #{$i};
-  }
-
-  [class*="row-#{$i}"] {
-    grid-row: auto / span #{$i};
-  }
-}
-
-/* intermediate breakpoint */
-// -small-X suffix means "X columns when < small screen"
-// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< small) then 4 columns
-@media (min-width: $tiny) and (max-width: ($medium - 1)) {
-   @for $i from 1 through 4{
-    [class*="grid-"][class*="-small-#{$i}"] {
-      grid-template-columns: repeat(#{$i}, 1fr);
-    }
-
-    [class*="col-"][class*="-small-#{$i}"] {
-      grid-column: auto / span #{$i};
-    }
-  }
-  [class*="-small-all"] {
-    grid-column: 1 / -1;
-  }
-}
-
-// grid order
-.item-first {
-  order: -1;
-}
-
-.item-last {
-  order: 1;
-}
-
-// grid offset
-.grid-offset {
-  visibility: hidden;
-}
-
-// spanning all collumns or rows
-.col-all {
-  grid-column: 1 / -1;
-}
-
-.row-all {
-  grid-row: 1 / -1;
-}

css/knacss-unminified.css

@@ -1619,7 +1619,6 @@ ul.is-unstyled, ul.unstyled {
   }
   .media-figure--center {
     -ms-flex-item-align: center;
-        -ms-grid-row-align: center;
         align-self: center;
   }
   .media--reverse {
@@ -1637,7 +1636,6 @@ ul.is-unstyled, ul.unstyled {
 /* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
 @media (min-width: 480px) {
   .autogrid {
-    display: -ms-grid;
     display: grid;
     grid-auto-flow: column;
     grid-auto-column: 1fr;
@@ -2561,11 +2559,9 @@ button:focus {
 /* --------------------------------------- */
 /* ==Grillade : ultra light Grid System    */
 /* --------------------------------------- */
-/* Doc : @TODO */
 @media (min-width: 480px) {
   [class*=" grid-"],
   [class^="grid-"] {
-    display: -ms-grid;
     display: grid;
     grid-auto-flow: dense;
   }
@@ -2584,246 +2580,174 @@ button:focus {
 }
 
 [class*="grid-1"] {
-  -ms-grid-columns: (1fr)[1];
-      grid-template-columns: repeat(1, 1fr);
+  grid-template-columns: repeat(1, 1fr);
 }
 
 [class*="grid-2"] {
-  -ms-grid-columns: (1fr)[2];
-      grid-template-columns: repeat(2, 1fr);
+  grid-template-columns: repeat(2, 1fr);
 }
 
 [class*="grid-3"] {
-  -ms-grid-columns: (1fr)[3];
-      grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, 1fr);
 }
 
 [class*="grid-4"] {
-  -ms-grid-columns: (1fr)[4];
-      grid-template-columns: repeat(4, 1fr);
+  grid-template-columns: repeat(4, 1fr);
 }
 
 [class*="grid-5"] {
-  -ms-grid-columns: (1fr)[5];
-      grid-template-columns: repeat(5, 1fr);
+  grid-template-columns: repeat(5, 1fr);
 }
 
 [class*="grid-6"] {
-  -ms-grid-columns: (1fr)[6];
-      grid-template-columns: repeat(6, 1fr);
+  grid-template-columns: repeat(6, 1fr);
 }
 
 [class*="grid-7"] {
-  -ms-grid-columns: (1fr)[7];
-      grid-template-columns: repeat(7, 1fr);
+  grid-template-columns: repeat(7, 1fr);
 }
 
 [class*="grid-8"] {
-  -ms-grid-columns: (1fr)[8];
-      grid-template-columns: repeat(8, 1fr);
+  grid-template-columns: repeat(8, 1fr);
 }
 
 [class*="grid-9"] {
-  -ms-grid-columns: (1fr)[9];
-      grid-template-columns: repeat(9, 1fr);
+  grid-template-columns: repeat(9, 1fr);
 }
 
 [class*="grid-10"] {
-  -ms-grid-columns: (1fr)[10];
-      grid-template-columns: repeat(10, 1fr);
+  grid-template-columns: repeat(10, 1fr);
 }
 
 [class*="grid-11"] {
-  -ms-grid-columns: (1fr)[11];
-      grid-template-columns: repeat(11, 1fr);
+  grid-template-columns: repeat(11, 1fr);
 }
 
 [class*="grid-12"] {
-  -ms-grid-columns: (1fr)[12];
-      grid-template-columns: repeat(12, 1fr);
+  grid-template-columns: repeat(12, 1fr);
 }
 
 [class*="col-1"] {
-  -ms-grid-column-span: 1;
-  -ms-grid-column: auto;
-      grid-column: auto/span 1;
+  grid-column: auto/span 1;
 }
 
 [class*="row-1"] {
-  -ms-grid-row-span: 1;
-  -ms-grid-row: auto;
-      grid-row: auto/span 1;
+  grid-row: auto/span 1;
 }
 
 [class*="col-2"] {
-  -ms-grid-column-span: 2;
-  -ms-grid-column: auto;
-      grid-column: auto/span 2;
+  grid-column: auto/span 2;
 }
 
 [class*="row-2"] {
-  -ms-grid-row-span: 2;
-  -ms-grid-row: auto;
-      grid-row: auto/span 2;
+  grid-row: auto/span 2;
 }
 
 [class*="col-3"] {
-  -ms-grid-column-span: 3;
-  -ms-grid-column: auto;
-      grid-column: auto/span 3;
+  grid-column: auto/span 3;
 }
 
 [class*="row-3"] {
-  -ms-grid-row-span: 3;
-  -ms-grid-row: auto;
-      grid-row: auto/span 3;
+  grid-row: auto/span 3;
 }
 
 [class*="col-4"] {
-  -ms-grid-column-span: 4;
-  -ms-grid-column: auto;
-      grid-column: auto/span 4;
+  grid-column: auto/span 4;
 }
 
 [class*="row-4"] {
-  -ms-grid-row-span: 4;
-  -ms-grid-row: auto;
-      grid-row: auto/span 4;
+  grid-row: auto/span 4;
 }
 
 [class*="col-5"] {
-  -ms-grid-column-span: 5;
-  -ms-grid-column: auto;
-      grid-column: auto/span 5;
+  grid-column: auto/span 5;
 }
 
 [class*="row-5"] {
-  -ms-grid-row-span: 5;
-  -ms-grid-row: auto;
-      grid-row: auto/span 5;
+  grid-row: auto/span 5;
 }
 
 [class*="col-6"] {
-  -ms-grid-column-span: 6;
-  -ms-grid-column: auto;
-      grid-column: auto/span 6;
+  grid-column: auto/span 6;
 }
 
 [class*="row-6"] {
-  -ms-grid-row-span: 6;
-  -ms-grid-row: auto;
-      grid-row: auto/span 6;
+  grid-row: auto/span 6;
 }
 
 [class*="col-7"] {
-  -ms-grid-column-span: 7;
-  -ms-grid-column: auto;
-      grid-column: auto/span 7;
+  grid-column: auto/span 7;
 }
 
 [class*="row-7"] {
-  -ms-grid-row-span: 7;
-  -ms-grid-row: auto;
-      grid-row: auto/span 7;
+  grid-row: auto/span 7;
 }
 
 [class*="col-8"] {
-  -ms-grid-column-span: 8;
-  -ms-grid-column: auto;
-      grid-column: auto/span 8;
+  grid-column: auto/span 8;
 }
 
 [class*="row-8"] {
-  -ms-grid-row-span: 8;
-  -ms-grid-row: auto;
-      grid-row: auto/span 8;
+  grid-row: auto/span 8;
 }
 
 [class*="col-9"] {
-  -ms-grid-column-span: 9;
-  -ms-grid-column: auto;
-      grid-column: auto/span 9;
+  grid-column: auto/span 9;
 }
 
 [class*="row-9"] {
-  -ms-grid-row-span: 9;
-  -ms-grid-row: auto;
-      grid-row: auto/span 9;
+  grid-row: auto/span 9;
 }
 
 [class*="col-10"] {
-  -ms-grid-column-span: 10;
-  -ms-grid-column: auto;
-      grid-column: auto/span 10;
+  grid-column: auto/span 10;
 }
 
 [class*="row-10"] {
-  -ms-grid-row-span: 10;
-  -ms-grid-row: auto;
-      grid-row: auto/span 10;
+  grid-row: auto/span 10;
 }
 
 [class*="col-11"] {
-  -ms-grid-column-span: 11;
-  -ms-grid-column: auto;
-      grid-column: auto/span 11;
+  grid-column: auto/span 11;
 }
 
 [class*="row-11"] {
-  -ms-grid-row-span: 11;
-  -ms-grid-row: auto;
-      grid-row: auto/span 11;
+  grid-row: auto/span 11;
 }
 
 [class*="col-12"] {
-  -ms-grid-column-span: 12;
-  -ms-grid-column: auto;
-      grid-column: auto/span 12;
+  grid-column: auto/span 12;
 }
 
 [class*="row-12"] {
-  -ms-grid-row-span: 12;
-  -ms-grid-row: auto;
-      grid-row: auto/span 12;
+  grid-row: auto/span 12;
 }
 
 /* intermediate breakpoints */
 @media (min-width: 480px) and (max-width: 767px) {
   [class*="grid-"][class*="-small-1"] {
-    -ms-grid-columns: (1fr)[1];
-        grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(1, 1fr);
   }
   [class*="col-"][class*="-small-1"] {
-    -ms-grid-column-span: 1;
-    -ms-grid-column: auto;
-        grid-column: auto/span 1;
+    grid-column: auto/span 1;
   }
   [class*="grid-"][class*="-small-2"] {
-    -ms-grid-columns: (1fr)[2];
-        grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, 1fr);
   }
   [class*="col-"][class*="-small-2"] {
-    -ms-grid-column-span: 2;
-    -ms-grid-column: auto;
-        grid-column: auto/span 2;
+    grid-column: auto/span 2;
   }
   [class*="grid-"][class*="-small-3"] {
-    -ms-grid-columns: (1fr)[3];
-        grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, 1fr);
   }
   [class*="col-"][class*="-small-3"] {
-    -ms-grid-column-span: 3;
-    -ms-grid-column: auto;
-        grid-column: auto/span 3;
+    grid-column: auto/span 3;
   }
   [class*="grid-"][class*="-small-4"] {
-    -ms-grid-columns: (1fr)[4];
-        grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, 1fr);
   }
   [class*="col-"][class*="-small-4"] {
-    -ms-grid-column-span: 4;
-    -ms-grid-column: auto;
-        grid-column: auto/span 4;
+    grid-column: auto/span 4;
   }
   [class*="-small-all"] {
     grid-column: 1 / -1;

gulpfile.js

@@ -5,8 +5,7 @@ var gulp = require('gulp');
 var sass = require('gulp-sass');
 var concat = require('gulp-concat');
 var rename = require('gulp-rename');
-var minifycss = require('gulp-minify-css');
-// var sourcemaps = require('gulp-sourcemaps');
+var minifycss = require('gulp-clean-css');
 var autoprefixer = require('gulp-autoprefixer');
 
 
@@ -16,28 +15,24 @@ gulp.task('css', function () {
     .pipe(sass({
       outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
     }))
-    .pipe(autoprefixer({ grid: true }))
+    .pipe(autoprefixer())
     .pipe(rename('knacss-unminified.css'))
     .pipe(gulp.dest('./css/'))
     .pipe(rename('knacss.css'))
-    //.pipe(sourcemaps.init())
     .pipe(minifycss())
-    //.pipe(sourcemaps.write('.', {includeContent: false}))
     .pipe(gulp.dest('./css/'));
 });
 
 gulp.task('grillade', function() {
-  return gulp.src('./sass/components/_grillade.scss')
-    .pipe(gulp.dest('./css/'))
+  return gulp.src('./sass/components/grillade-grid.scss')
     .pipe(sass())
-    .pipe(autoprefixer({ grid: true }))
+    .pipe(autoprefixer())
     .pipe(minifycss())
     .pipe(gulp.dest('./css/'));
 });
 
-gulp.task('grillade-v6', function() {
-  return gulp.src('./sass/components/_grillade-v6.scss')
-    .pipe(gulp.dest('./css/'))
+gulp.task('grillade-flex', function() {
+  return gulp.src('./sass/components/grillade-flex.scss')
     .pipe(sass())
     .pipe(autoprefixer())
     .pipe(minifycss())

package.json

@@ -32,9 +32,8 @@
     "gulp-rename": "latest",
     "gulp-sass": "latest",
     "gulp-concat": "latest",
-    "gulp-minify-css": "latest",
-    "gulp-autoprefixer": "latest",
-    "gulp-sourcemaps": "latest"
+    "gulp-clean-css": "latest",
+    "gulp-autoprefixer": "latest"
   },
   "engines": {}
 }

sass/components/_grillade-flex.scss

@@ -1,145 +0,0 @@
-/* ---------------------------------- */
-/* ==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/components/_grillade-grid.scss

@@ -1,96 +0,0 @@
-/* --------------------------------------- */
-/* ==Grillade : ultra light Grid System    */
-/* --------------------------------------- */
-/* Doc : @TODO */
-// WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
-// if you need complex Grid :
-//   1- use vanilla CSS Grid Layout spec (perfect for you)
-//   2- use Bootstrap (good luck)
-
-@if (not variable_exists(tiny)) or (not variable_exists(small)) or (not variable_exists(medium)) or (not variable_exists(large))
-  {
-  $tiny: 480px !global;
-  $small: 576px !global;
-  $medium: 768px !global;
-  $large: 992px !global;
-}
-
-[class*=" grid-"],
-[class^="grid-"] {
-  @media (min-width: $tiny) {
-    display: grid;
-    grid-auto-flow: dense;
-
-    // gutters
-    @if variable_exists(grid-gutters) {
-      $gutter: $grid-gutters !global;
-    }
-    @else {
-      $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
-    }
-    @each $affix, $size in $gutter {
-      &.has-gutter#{$affix} {
-        grid-gap: $size;
-      }
-    }
-  }
-}
-
-// grid constructor (.grid-2 to .grid-12)
-@for $i from 1 through 12 {
-  [class*="grid-#{$i}"] {
-    grid-template-columns: repeat(#{$i}, 1fr);
-  }
-}
-
-// grid items constructor (.col-1 to .col-12, .row-1 to .row-12)
-@for $i from 1 through 12 {
-  [class*="col-#{$i}"] {
-    grid-column: auto / span #{$i};
-  }
-
-  [class*="row-#{$i}"] {
-    grid-row: auto / span #{$i};
-  }
-}
-
-/* intermediate breakpoints */
-// -small-X suffix means "X columns when < medium screen"
-// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
-@media (min-width: $tiny) and (max-width: ($medium - 1)) {
-   @for $i from 1 through 4{
-    [class*="grid-"][class*="-small-#{$i}"] {
-      grid-template-columns: repeat(#{$i}, 1fr);
-    }
-
-    [class*="col-"][class*="-small-#{$i}"] {
-      grid-column: auto / span #{$i};
-    }
-  }
-  [class*="-small-all"] {
-    grid-column: 1 / -1;
-  }
-}
-
-// grid order
-.item-first {
-  order: -1;
-}
-
-.item-last {
-  order: 1;
-}
-
-// grid offset
-.grid-offset {
-  visibility: hidden;
-}
-
-// spanning all collumns or rows
-.col-all {
-  grid-column: 1 / -1;
-}
-
-.row-all {
-  grid-row: 1 / -1;
-}

sass/components/grillade-grid.scss

@@ -1,7 +1,6 @@
 /* --------------------------------------- */
 /* ==Grillade : ultra light Grid System    */
 /* --------------------------------------- */
-/* Doc : @TODO */
 // WARNING: THIS IS NOT A COMPLETE GRID FRAMEWORK, just ultra light Grid System
 // if you need complex Grid :
 //   1- use vanilla CSS Grid Layout spec (perfect for you)

sass/knacss.scss

@@ -63,8 +63,9 @@
 @import "components/_badges.scss"; // badges styles
 @import "components/_alerts.scss"; // alerts styles
 
-// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "components/_grillade-flex.scss"
-@import "components/_grillade-grid.scss"; // grid system with Grid Layout
+// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "components/grillade-flex.scss"
+// Note that none of these file is prefixed by an underscore, in order to compile them.
+@import "components/grillade-grid.scss"; // grid system with Grid Layout