Merge branch 'v8'

# Conflicts:
#	README.md
#	changelog.md
#	css/knacss-unminified.css
#	css/knacss.css
#	package-lock.json
#	package.json

.browserslistrc

@@ -0,0 +1,2 @@
+>0.25%
+not op_mini all

css/grillade-grid.css

@@ -1 +1 @@
-@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}}@media (min-width:480px){.autogrid,.grid{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrid.has-gutter,.grid.has-gutter{grid-column-gap:1rem}.autogrid.has-gutter-l,.grid.has-gutter-l{grid-column-gap:2rem}.autogrid.has-gutter-xl,.grid.has-gutter-xl{grid-column-gap:4rem}}[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]{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]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{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]{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]{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]{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}
+@media (min-width:480px){[class*=" grillade-"],[class^=grillade-]{display:-ms-grid;display:grid}[class*=" grillade-"].has-gutter,[class^=grillade-].has-gutter{grid-gap:1rem}[class*=" grillade-"].has-gutter-l,[class^=grillade-].has-gutter-l{grid-gap:2rem}[class*=" grillade-"].has-gutter-xl,[class^=grillade-].has-gutter-xl{grid-gap:4rem}}@media (min-width:480px){.autogrillade,.grillade{display:-ms-grid;display:grid;grid-auto-flow:column;grid-auto-columns:1fr}.autogrillade.has-gutter,.grillade.has-gutter{grid-column-gap:1rem}.autogrillade.has-gutter-l,.grillade.has-gutter-l{grid-column-gap:2rem}.autogrillade.has-gutter-xl,.grillade.has-gutter-xl{grid-column-gap:4rem}}[class*=grillade-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=grillade-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=grillade-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=grillade-5]{-ms-grid-columns:(1fr)[5];grid-template-columns:repeat(5,1fr)}[class*=grillade-6]{-ms-grid-columns:(1fr)[6];grid-template-columns:repeat(6,1fr)}[class*=grillade-7]{-ms-grid-columns:(1fr)[7];grid-template-columns:repeat(7,1fr)}[class*=grillade-8]{-ms-grid-columns:(1fr)[8];grid-template-columns:repeat(8,1fr)}[class*=grillade-9]{-ms-grid-columns:(1fr)[9];grid-template-columns:repeat(9,1fr)}[class*=grillade-10]{-ms-grid-columns:(1fr)[10];grid-template-columns:repeat(10,1fr)}[class*=grillade-11]{-ms-grid-columns:(1fr)[11];grid-template-columns:repeat(11,1fr)}[class*=grillade-12]{-ms-grid-columns:(1fr)[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:991px){[class*=grillade-][class*=-medium-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-medium-1]{grid-column:auto/span 1}[class*=grillade-][class*=-medium-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-medium-2]{grid-column:auto/span 2}[class*=grillade-][class*=-medium-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-medium-3]{grid-column:auto/span 3}[class*=grillade-][class*=-medium-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-medium-4]{grid-column:auto/span 4}[class*=-medium-all]{grid-column:1/-1}}@media (min-width:480px) and (max-width:767px){[class*=grillade-][class*=-small-1]{-ms-grid-columns:(1fr)[1];grid-template-columns:repeat(1,1fr)}[class*=col-][class*=-small-1]{grid-column:auto/span 1}[class*=grillade-][class*=-small-2]{-ms-grid-columns:(1fr)[2];grid-template-columns:repeat(2,1fr)}[class*=col-][class*=-small-2]{grid-column:auto/span 2}[class*=grillade-][class*=-small-3]{-ms-grid-columns:(1fr)[3];grid-template-columns:repeat(3,1fr)}[class*=col-][class*=-small-3]{grid-column:auto/span 3}[class*=grillade-][class*=-small-4]{-ms-grid-columns:(1fr)[4];grid-template-columns:repeat(4,1fr)}[class*=col-][class*=-small-4]{grid-column:auto/span 4}[class*=-small-all]{grid-column:1/-1}}[class*=-start]{-webkit-box-pack:start;justify-content:start}[class*=-end]{-webkit-box-pack:end;justify-content:end}[class*=-center]{-webkit-box-pack:center;justify-content:center}[class*=-space-between]{-webkit-box-pack:justify;justify-content:space-between}[class*=-space-around]{justify-content:space-around}[class*=-space-evenly]{-webkit-box-pack:space-evenly;justify-content:space-evenly}.item-first{-webkit-box-ordinal-group:0;order:-1}.item-last{-webkit-box-ordinal-group:2;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}

gulpfile.js

@@ -9,44 +9,31 @@ var rename = require('gulp-rename');
 var cssnano = require('cssnano'); // minifies CSS
 var autoprefixer = require('autoprefixer');
 
-var unprefix = require("postcss-unprefix"); // deletes old prefixes
+var unprefix = require('postcss-unprefix'); // deletes old prefixes
 var flexbugs = require('postcss-flexbugs-fixes'); // flexbox fixes for IE
 var gaps = require('postcss-gap-properties'); // gaps polyfill
 
-var browsersList = [
-  '> 1%',
-  'last 2 versions',
-  'IE >= 10', 'Edge >= 16',
-  'Chrome >= 60',
-  'Firefox >= 50', 'Firefox ESR',
-  'Safari >= 10',
-  'ios_saf >= 10',
-  'Android >= 5'
-];
-
 var plugins = [
   unprefix(),
-    autoprefixer({
+  autoprefixer({
-      grid: true,
+    grid: true
-      browsers: browsersList
+  }),
-    }),
+  flexbugs(),
-    flexbugs(),
+  gaps()
-    gaps()
 ];
 
 var pluginsProd = [
   unprefix(),
-    autoprefixer({
+  autoprefixer({
-      grid: true,
+    grid: true
-      browsers: browsersList
+  }),
-    }),
+  flexbugs(),
-    flexbugs(),
+  gaps(),
-    gaps(),
+  cssnano()
-    cssnano()
 ];
 
 // tâche cssDev = compile vers knacss-unminified.css
-gulp.task('cssDev', function () {
+gulp.task('cssDev', () => {
   return gulp.src('./sass/knacss.scss')
     .pipe(sass({
       outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
@@ -57,31 +44,31 @@ gulp.task('cssDev', function () {
 });
 
 // tâche cssProd = compile vers knacss.css minifié
-gulp.task('cssProd', function () {
+gulp.task('cssProd', () => {
   return gulp.src('./sass/knacss.scss')
     .pipe(sass())
     .pipe(postcss(pluginsProd))
     .pipe(gulp.dest('./css/'));
 });
 
-gulp.task('grillade', function() {
+gulp.task('grillade', () => {
-  return gulp.src('./sass/_library/grillade-grid.scss')
+  return gulp.src('./sass/base/grillade-grid.scss')
     .pipe(sass())
     .pipe(postcss(pluginsProd))
     .pipe(gulp.dest('./css/'));
 });
 
-gulp.task('grillade-flex', function() {
+gulp.task('grillade-flex', () => {
-  return gulp.src('./sass/_library/grillade-flex.scss')
+  return gulp.src('./sass/base/grillade-flex.scss')
     .pipe(sass())
     .pipe(postcss(pluginsProd))
     .pipe(gulp.dest('./css/'));
 });
 
 // Watcher
-gulp.task('watch', function() {
+gulp.task('watch', () => {
-  gulp.watch(['./sass/*.scss'], ['cssDev']);
+  gulp.watch(['./sass/*.scss'], gulp.series('cssDev'));
 });
 
-
+// Tâche par défaut
-gulp.task('default', ['cssDev', 'cssProd', 'grillade', 'grillade-flex']);
+gulp.task('default', gulp.series('cssDev', 'cssProd', 'grillade', 'grillade-flex'));

sass/_library/_base.scss

@@ -1,274 +0,0 @@
-/* ----------------------------- */
-/* ==Base (basic styles)         */
-/* ----------------------------- */
-
-/* disable animations styles when reduced rotion is enabled */
-@media (prefers-reduced-motion: reduce) {
-  * {
-    animation: none !important;
-    transition: none !important;
-  }
-}
-
-/* switching to border-box model for all elements */
-html {
-  box-sizing: border-box;
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: inherit;
-  /* avoid min-width: auto on flex and grid children */
-  min-width: 0;
-  min-height: 0;
-}
-
-html {
-  /* set base font-size to equiv "10px", which is adapted to rem unit */
-  font-size: 62.5%;
-  /* IE9-IE11 math fixing. See http://bit.ly/1g4X0bX */
-  font-size: calc(1em * 0.625);
-}
-
-body {
-  margin: 0;
-  @include font-size(base);
-  background-color: $background-base;
-  color: $color-base;
-  font-family: $font-family-base;
-  line-height: $line-height-base;
-}
-
-/* Links */
-a {
-  color: $link-color;
-  text-decoration: $link-decoration;
-
-  &:focus,
-  &:hover,
-  &:active {
-    color: $link-color-hover;
-    text-decoration: $link-decoration-hover;
-  }
-}
-
-/* Headings */
-h1, .h1-like {
-  @include font-size(h1);
-  @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
-    font-family: $font-family-headings;
-  }
-  font-weight: $weight-medium;
-}
-
-h2, .h2-like {
-  @include font-size(h2);
-  @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
-    font-family: $font-family-headings;
-  }
-  font-weight: $weight-medium;
-}
-
-h3, .h3-like {
-  @include font-size(h3);
-  font-weight: $weight-medium;
-}
-
-h4, .h4-like {
-  @include font-size(h4);
-  font-weight: $weight-medium;
-}
-
-h5, .h5-like {
-  @include font-size(h5);
-  font-weight: $weight-medium;
-}
-
-h6, .h6-like {
-  @include font-size(h6);
-  font-weight: $weight-medium;
-}
-
-/* Vertical rythm */
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-dd {
-  margin-top: 0;
-  margin-bottom: $headings-margin-bottom;
-}
-
-p,
-address,
-ol,
-ul,
-dl,
-blockquote,
-pre {
-  margin-top: 0;
-  margin-bottom: $paragraph-margin-bottom;
-}
-
-/* Avoid margins on nested elements */
-li p,
-li .p-like,
-li ul,
-li ol,
-ol ol,
-ul ul {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/* Max values */
-img,
-table,
-td,
-blockquote,
-code,
-pre,
-textarea,
-input,
-video,
-svg {
-  max-width: 100%;
-}
-
-img {
-  height: auto;
-}
-
-/* Styling elements */
-ul,
-ol {
-  padding-left: 2em;
-}
-
-img {
-  vertical-align: middle;
-}
-
-em,
-.italic,
-address,
-cite,
-i,
-var {
-  font-style: italic;
-}
-
-code,
-kbd,
-mark {
-  border-radius: 2px;
-}
-
-kbd {
-  padding: 0 2px;
-  border: 1px solid #999;
-}
-
-pre {
-  tab-size: 2;
-}
-
-code {
-  padding: 2px 4px;
-  background: rgba(0, 0, 0, 0.04);
-  color: #b11;
-}
-
-pre code {
-  padding: 0;
-  background: none;
-  color: inherit;
-  border-radius: 0;
-}
-
-mark {
-  padding: 2px 4px;
-}
-
-sup,
-sub {
-  vertical-align: 0;
-}
-
-sup {
-  bottom: 1ex;
-}
-
-sub {
-  top: 0.5ex;
-}
-
-blockquote {
-  position: relative;
-  padding-left: 3em;
-  min-height: 2em;
-}
-
-blockquote::before {
-  content: "\201C";
-  position: absolute;
-  left: 0;
-  top: 0;
-  font-family: georgia, serif;
-  font-size: 5em;
-  height: .4em;
-  line-height: .9;
-  color: $quote-color;
-}
-
-blockquote > footer {
-  margin-top: .75em;
-  font-size: 0.9em;
-  color: rgba(0, 0, 0, .7);
-
-  &::before {
-    content: "\2014 \0020";
-  }
-}
-
-q {
-  font-style: normal;
-}
-
-q,
-.q {
-  quotes: "“" "”" "‘" "’";
-
-  &:lang(fr) {
-    quotes: "«\00a0" "\00a0»" "“" "”";
-  }
-}
-
-hr {
-  display: block;
-  clear: both;
-  height: 1px;
-  margin: 1em 0 2em;
-  padding: 0;
-  border: 0;
-  color: #ccc;
-  background-color: #ccc;
-}
-
-blockquote,
-figure {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-code,
-pre,
-samp,
-kbd {
-  white-space: pre-wrap;
-  font-family: $font-family-monospace;
-  line-height: normal;
-}

sass/_vendor/_reboot.scss

@@ -1,334 +0,0 @@
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-html {
-  font-family: sans-serif;
-  line-height: 1.15;
-  -webkit-text-size-adjust: 100%;
-  -ms-text-size-adjust: 100%;
-  -ms-overflow-style: scrollbar;
-  -webkit-tap-highlight-color: transparent;
-}
-
-@-ms-viewport {
-  width: device-width;
-}
-
-article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
-  display: block;
-}
-
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  font-size: 1rem;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #212529;
-  text-align: left;
-  background-color: #fff;
-}
-
-[tabindex="-1"]:focus {
-  outline: none !important;
-}
-
-hr {
-  box-sizing: content-box;
-  height: 0;
-  overflow: visible;
-}
-
-h1, h2, h3, h4, h5, h6 {
-  margin-top: 0;
-  margin-bottom: 0.5rem;
-}
-
-p {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-abbr[title],
-abbr[data-original-title] {
-  text-decoration: underline;
-  -webkit-text-decoration: underline dotted;
-          text-decoration: underline dotted;
-  cursor: help;
-  border-bottom: 0;
-}
-
-address {
-  margin-bottom: 1rem;
-  font-style: normal;
-  line-height: inherit;
-}
-
-ol,
-ul,
-dl {
-  margin-top: 0;
-  margin-bottom: 1rem;
-}
-
-ol ol,
-ul ul,
-ol ul,
-ul ol {
-  margin-bottom: 0;
-}
-
-dt {
-  font-weight: 700;
-}
-
-dd {
-  margin-bottom: .5rem;
-  margin-left: 0;
-}
-
-blockquote {
-  margin: 0 0 1rem;
-}
-
-dfn {
-  font-style: italic;
-}
-
-b,
-strong {
-  font-weight: bold;
-}
-
-small {
-  font-size: 80%;
-}
-
-sub,
-sup {
-  position: relative;
-  font-size: 75%;
-  line-height: 0;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -.25em;
-}
-
-sup {
-  top: -.5em;
-}
-
-a {
-  color: #007bff;
-  text-decoration: none;
-  background-color: transparent;
-  -webkit-text-decoration-skip: objects;
-}
-
-a:hover {
-  color: #0056b3;
-  text-decoration: underline;
-}
-
-a:not([href]):not([tabindex]) {
-  color: inherit;
-  text-decoration: none;
-}
-
-a:not([href]):not([tabindex]):focus, a:not([href]):not([tabindex]):hover {
-  color: inherit;
-  text-decoration: none;
-}
-
-a:not([href]):not([tabindex]):focus {
-  outline: 0;
-}
-
-pre,
-code,
-kbd,
-samp {
-  font-family: monospace, monospace;
-  font-size: 1em;
-}
-
-pre {
-  margin-top: 0;
-  margin-bottom: 1rem;
-  overflow: auto;
-  -ms-overflow-style: scrollbar;
-}
-
-figure {
-  margin: 0 0 1rem;
-}
-
-img {
-  vertical-align: middle;
-  border-style: none;
-}
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-a,
-area,
-button,
-[role="button"],
-input:not([type="range"]),
-label,
-select,
-summary,
-textarea {
-  -ms-touch-action: manipulation;
-      touch-action: manipulation;
-}
-
-table {
-  border-collapse: collapse;
-}
-
-caption {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-  color: #868e96;
-  text-align: left;
-  caption-side: bottom;
-}
-
-th {
-  text-align: inherit;
-}
-
-label {
-  display: inline-block;
-  margin-bottom: .5rem;
-}
-
-button {
-  border-radius: 0;
-}
-
-button:focus {
-  outline: 1px dotted;
-  outline: 5px auto -webkit-focus-ring-color;
-}
-
-input,
-button,
-select,
-optgroup,
-textarea {
-  margin: 0;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-}
-
-button,
-input {
-  overflow: visible;
-}
-
-button,
-select {
-  text-transform: none;
-}
-
-button,
-html [type="button"],
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button;
-}
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  padding: 0;
-  border-style: none;
-}
-
-input[type="radio"],
-input[type="checkbox"] {
-  box-sizing: border-box;
-  padding: 0;
-}
-
-input[type="date"],
-input[type="time"],
-input[type="datetime-local"],
-input[type="month"] {
-  -webkit-appearance: listbox;
-}
-
-textarea {
-  overflow: auto;
-  resize: vertical;
-}
-
-fieldset {
-  min-width: 0;
-  padding: 0;
-  margin: 0;
-  border: 0;
-}
-
-legend {
-  display: block;
-  width: 100%;
-  max-width: 100%;
-  padding: 0;
-  margin-bottom: .5rem;
-  font-size: 1.5rem;
-  line-height: inherit;
-  color: inherit;
-  white-space: normal;
-}
-
-progress {
-  vertical-align: baseline;
-}
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-[type="search"] {
-  outline-offset: -2px;
-  -webkit-appearance: none;
-}
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-::-webkit-file-upload-button {
-  font: inherit;
-  -webkit-appearance: button;
-}
-
-output {
-  display: inline-block;
-}
-
-summary {
-  display: list-item;
-}
-
-template {
-  display: none;
-}
-
-[hidden] {
-  display: none !important;
-}

sass/abstracts/_mixins.scss

@@ -1,3 +1,15 @@
+// Visually-hidden mixin
+@mixin visually-hidden {
+  position: absolute !important;
+  border: 0 !important;
+  height: 1px !important;
+  width: 1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+}
+
+
 // font-size Mixin
 // compiles to font-size mobile + font-size desktop on small-plus devices
 // ex. h2 { @include font-size(h2);}

sass/abstracts/_variables.scss

@@ -73,7 +73,16 @@ $weight-medium  : 500 !default;
 $weight-bold    : 700 !default;
 
 // Activate hyphenation on small screens
-$hyphens: false !default;
+$hyphens: true !default;
+
+// Activate Utility classes
+$utilities: true !default;
+
+// Activate WordPress reset and styles
+$wordpress: false !default;
+
+// Activate IE10-IE11 fixes and old grid system
+$ie: true !default;
 
 // ------------
 // Spacing zone

sass/base/_reset.scss

@@ -0,0 +1,518 @@
+/* ----------------------------- */
+/* ==Reset (global)              */
+/* ----------------------------- */
+
+/**
+ * disable animations styles when reduced motion is enabled
+ */
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/**
+ * 1. switch to border-box model for all elements
+ * 2. avoid min-width: auto and min-height: auto on flex and grid children
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box; /* 1 */
+  min-width: 0; /* 2 */
+  min-height: 0; /* 2 */
+}
+
+/**
+ * 1. remove the grey highlight on links in iOS 
+ * 2. prevent orientation font changes in iOS
+ * 3. set base font-size to equiv "10px", which is adapted to rem unit
+ */
+
+html {
+  -webkit-tap-highlight-color: transparent; /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
+  font-size: calc(1em * 0.625); /* 3 */
+}
+
+body {
+  margin: 0;
+  @include font-size(base);
+  background-color: $background-base;
+  color: $color-base;
+  font-family: $font-family-base;
+  line-height: $line-height-base;
+}
+
+/**
+ * links
+ */
+
+a {
+  color: $link-color;
+  text-decoration: $link-decoration;
+
+  &:focus,
+  &:hover,
+  &:active {
+    color: $link-color-hover;
+    text-decoration: $link-decoration-hover;
+  }
+}
+
+/**
+ * headings
+ */
+
+h1, .h1-like {
+  @include font-size(h1);
+  @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
+    font-family: $font-family-headings;
+  }
+  font-weight: $weight-medium;
+}
+
+h2, .h2-like {
+  @include font-size(h2);
+  @if variable_exists(font-family-headings) and $font-family-headings != $font-family-base{
+    font-family: $font-family-headings;
+  }
+  font-weight: $weight-medium;
+}
+
+h3, .h3-like {
+  @include font-size(h3);
+  font-weight: $weight-medium;
+}
+
+h4, .h4-like {
+  @include font-size(h4);
+  font-weight: $weight-medium;
+}
+
+h5, .h5-like {
+  @include font-size(h5);
+  font-weight: $weight-medium;
+}
+
+h6, .h6-like {
+  @include font-size(h6);
+  font-weight: $weight-medium;
+}
+
+/**
+ * vertical rythm
+ */
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+dd {
+  margin-top: 0;
+  margin-bottom: $headings-margin-bottom;
+}
+
+p,
+address,
+ol,
+ul,
+dl,
+blockquote,
+pre {
+  margin-top: 0;
+  margin-bottom: $paragraph-margin-bottom;
+}
+
+/**
+ * avoid margin on nested elements
+ */
+
+li p,
+li .p-like,
+li ul,
+li ol,
+ol ol,
+ul ul {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/* ----------------------------- */
+/* ==Reset (common styling)      */
+/* ----------------------------- */
+
+a,
+area,
+button,
+[role="button"],
+.btn,
+.button,
+[type="button"]
+input:not([type="range"]),
+label,
+select,
+summary,
+textarea {
+  -ms-touch-action: manipulation;
+      touch-action: manipulation;
+}
+
+img,
+table,
+td,
+blockquote,
+code,
+pre,
+textarea,
+input,
+video,
+svg {
+  max-width: 100%;
+}
+
+img {
+  height: auto;
+  vertical-align: middle;
+  border-style: none;
+}
+
+/**
+ * fill color matching to text color
+ */
+
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+ul,
+ol {
+  padding-left: 2em;
+}
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+em,
+.italic,
+address,
+cite,
+i,
+var {
+  font-style: italic;
+}
+
+/* ----------------------------- */
+/* ==Reset (buttons)             */
+/* ----------------------------- */
+
+input,
+button,
+select,
+optgroup,
+textarea {
+  margin: 0;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+}
+
+/**
+* 1. show overflow in IE/Edge
+*/
+
+button,
+input {
+  overflow: visible; /* 1 */
+}
+
+/**
+* 1. remove the inheritance of text transform in Firefox
+*/
+
+button,
+select {
+  text-transform: none; /* 1 */
+}
+
+/**
+ * 1. correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button; /* 1 */
+}
+
+/**
+ * 1. remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none; /* 1 */
+  padding: 0;
+}
+
+/**
+ * 1. restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText; /* 1 */
+}
+
+/* ----------------------------- */
+/* ==Reset (forms)               */
+/* ----------------------------- */
+
+form,
+fieldset {
+  border: none;
+}
+
+fieldset {
+  padding: $spacer-medium;
+}
+
+legend {
+  padding: 0 $spacer-tiny;
+  border: 0;
+  white-space: normal;
+}
+
+label {
+  display: inline-block;
+  cursor: pointer;
+}
+
+textarea {
+  overflow: auto;
+  min-height: 5em;
+  vertical-align: top;
+  resize: vertical;
+  white-space: pre-wrap;
+}
+
+progress {
+  display: inline-block;
+  width: 100%;
+  vertical-align: baseline;
+}
+
+/* ----------------------------- */
+/* ==Reset (inputs)              */
+/* ----------------------------- */
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+[type="search"] {
+  outline-offset: -2px;
+  -webkit-appearance: none;
+}
+
+::-webkit-search-cancel-button,
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+  font: inherit;
+  -webkit-appearance: button;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+/* ----------------------------- */
+/* ==Reset (misc styling)        */
+/* ----------------------------- */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+  white-space: pre-wrap;
+  line-height: normal;
+}
+
+pre {
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+  tab-size: 2;
+}
+
+code,
+kbd,
+mark {
+  border-radius: 2px;
+}
+
+kbd {
+  padding: 0 2px;
+  border: 1px solid #999;
+}
+
+code {
+  padding: 2px 4px;
+  background: rgba(0, 0, 0, 0.04);
+  color: #b11;
+}
+
+pre code {
+  padding: 0;
+  background: none;
+  color: inherit;
+  border-radius: 0;
+}
+
+mark {
+  padding: 2px 4px;
+}
+
+sup,
+sub {
+  vertical-align: 0;
+}
+
+sup {
+  bottom: 1ex;
+}
+
+sub {
+  top: 0.5ex;
+}
+
+/**
+ * quotes, blockquote and hr styling
+ */
+
+blockquote {
+  position: relative;
+  padding-left: 3em;
+  min-height: 2em;
+}
+
+blockquote::before {
+  content: "\201C";
+  position: absolute;
+  left: 0;
+  top: 0;
+  font-family: georgia, serif;
+  font-size: 5em;
+  height: .4em;
+  line-height: .9;
+  color: $quote-color;
+}
+
+blockquote > footer {
+  margin-top: .75em;
+  font-size: 0.9em;
+  color: rgba(0, 0, 0, .7);
+
+  &::before {
+    content: "\2014 \0020";
+  }
+}
+
+q {
+  font-style: normal;
+}
+
+q,
+.q {
+  quotes: "“" "”" "‘" "’";
+
+  &:lang(fr) {
+    quotes: "«\00a0" "\00a0»" "“" "”";
+  }
+}
+
+hr {
+  display: block;
+  clear: both;
+  height: 1px;
+  margin: 1em 0 2em;
+  padding: 0;
+  border: 0;
+  color: #ccc;
+  background-color: #ccc;
+}
+
+blockquote,
+figure {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+@if variable-exists(hyphens) and $hyphens==true {
+  @media (max-width: ($small - 1)) {
+    body,
+    div,
+    p,
+    textarea,
+    table,
+    td,
+    th,
+    code,
+    pre,
+    samp {
+      word-wrap: break-word;
+      overflow-wrap: break-word;
+    }
+  }
+}
+
+
+@if variable-exists(ie) and $ie==true {
+  
+  /* ----------------------------- */
+  /* ==Reset (IE rules)            */
+  /* ----------------------------- */
+
+  @-ms-viewport {
+    width: device-width;
+  }
+
+  article, aside, dialog, figcaption, figure, footer, header, hgroup, main, nav, section {
+    display: block;
+  }
+
+  /**
+  * hide overflow in IE
+  */
+
+  svg:not(:root) {
+    overflow: hidden;
+  }
+
+}
+

sass/base/_utilities.scss

@@ -74,23 +74,6 @@
   text-align: center;
 }
 
-@if variable-exists(hyphens) and $hyphens==true {
-  @media (max-width: ($small - 1)) {
-    div,
-    textarea,
-    table,
-    td,
-    th,
-    code,
-    pre,
-    samp {
-      word-wrap: break-word;
-      overflow-wrap: break-word;
-      hyphens: auto;
-    }
-  }
-}
-
 /* blocks that need to be placed under floats */
 
 .clear,
@@ -131,10 +114,8 @@
 /* Global Micro Layout */
 /* ------------------- */
 
-/* module, gains superpower "BFC" Block Formating Context */
+/* "BFC" Block Formating Context */
 
-.mod,
-.u-mod,
 .bfc,
 .u-bfc {
   overflow: hidden;
@@ -188,14 +169,14 @@ img.u-fr {
 }
 
 /* hidden but not for an assistive technology like a screen reader, Yahoo! method */
+// mixin in `abstracts/_mixins.scss`
 .visually-hidden {
-  position: absolute !important;
+  @include visually-hidden;
-  border: 0 !important;
+}
-  height: 1px !important;
+@include respond-to("small") {
-  width: 1px !important;
+  .small-visually-hidden {
-  padding: 0 !important;
+    @include visually-hidden;
-  overflow: hidden !important;
+  }
-  clip: rect(0, 0, 0, 0) !important;
 }
 
 .is-disabled,
@@ -216,9 +197,6 @@ ul {
   }
 }
 
-.color--inverse {
-  color: $white;
-}
 
 /* Width Helpers */
 /* ------------- */

sass/base/grillade-flex.scss

@@ -22,8 +22,8 @@ $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
 // https://github.com/alsacreations/KNACSS/issues/133;
 $iefix: 0.01px;
 @media (min-width: $small) {
-  [class*=" grid-"],
+  [class*=" grillade-"],
-  [class^="grid-"] {
+  [class^="grillade-"] {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
@@ -66,8 +66,8 @@ $iefix: 0.01px;
 }
 // Mono-line grid constructor (.grid)
 @media (min-width: $small) {
-  .grid,
+  .grillade,
-  .grid--reverse {
+  .grillade--reverse {
     display: flex;
 
     & > * {
@@ -86,7 +86,7 @@ $iefix: 0.01px;
 // Constructing grids : will be compiled in CSS
 @media (min-width: $small) {
   @for $i from 2 through $cols {
-    [class*="grid-#{$i}"] {
+    [class*="grillade-#{$i}"] {
       @include grid(#{$i}, 0);
     }
   }
@@ -110,7 +110,7 @@ $iefix: 0.01px;
   order: 1;
 }
 
-[class*="grid-"][class*="--reverse"] {
+[class*="grillade-"][class*="--reverse"] {
   flex-direction: row-reverse;
 }
 // sizing individual children

sass/base/grillade-grid.scss

@@ -8,16 +8,16 @@
 
 // use these variables only for a standalone Grillade
 // in KNACSS, you shall modify variables file instead
-$tiny: 480px !default;
+$tiny    : 480px !default;
-$medium: 768px !default;
+$medium  : 768px !default;
-$cols: 12 !default;
+$large   : 992px !default;
+$cols    : 12 !default;
 
 // classic Grid
-[class*=" grid-"],
+[class*=" grillade-"],
-[class^="grid-"] {
+[class^="grillade-"] {
   @media (min-width: $tiny) {
     display: grid;
-    grid-auto-flow: dense;
 
     // gutters
     @if variable_exists(grid-gutters) {
@@ -35,8 +35,8 @@ $cols: 12 !default;
 }
 
 // autogrid
-.autogrid,
+.autogrillade,
-.grid {
+.grillade {
   @media (min-width: $tiny) {
     display: grid;
     grid-auto-flow: column;
@@ -57,9 +57,9 @@ $cols: 12 !default;
   }
 }
 
-// grid constructor (.grid-2 to .grid-$cols)
+// grid constructor (.grillade-2 to .grillade-$cols)
 @for $i from 2 through $cols {
-  [class*="grid-#{$i}"] {
+  [class*="grillade-#{$i}"] {
     grid-template-columns: repeat(#{$i}, 1fr);
   }
 }
@@ -75,12 +75,31 @@ $cols: 12 !default;
   }
 }
 
-/* intermediate breakpoints */
+/* medium intermediate breakpoints */
+// -medium-X suffix means "X columns when < large screen"
+// example : .grillade-4-medium-2 will be 1 column (< tiny) then 2 columns (< large) then 4 columns
+@media (min-width: $tiny) and (max-width: ($large - 1)) {
+  @for $i from 1 through 4 {
+    [class*="grillade-"][class*="-medium-#{$i}"] {
+      grid-template-columns: repeat(#{$i}, 1fr);
+    }
+
+    [class*="col-"][class*="-medium-#{$i}"] {
+      grid-column: auto / span #{$i};
+    }
+  }
+
+  [class*="-medium-all"] {
+    grid-column: 1 / -1;
+  }
+}
+
+/* small 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
+// example : .grillade-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{
+  @for $i from 1 through 4 {
-    [class*="grid-"][class*="-small-#{$i}"] {
+    [class*="grillade-"][class*="-small-#{$i}"] {
       grid-template-columns: repeat(#{$i}, 1fr);
     }
 
@@ -94,6 +113,31 @@ $cols: 12 !default;
   }
 }
 
+// grid overall alignment
+[class*="-start"] {
+  justify-content: start;
+}
+
+[class*="-end"] {
+  justify-content: end;
+}
+
+[class*="-center"] {
+  justify-content: center;
+}
+
+[class*="-space-between"] {
+  justify-content: space-between;
+}
+
+[class*="-space-around"] {
+  justify-content: space-around;
+}
+
+[class*="-space-evenly"] {
+  justify-content: space-evenly;
+}
+
 // grid order
 .item-first {
   order: -1;

sass/components/_buttons.scss

@@ -1,6 +1,7 @@
 /* ----------------------------- */
-/* ==Buttons                     */
+/* ==Buttons styling             */
 /* ----------------------------- */
+
 /* preferably use <button> for buttons !*/
 /* use .btn-- or .button-- classes for variants */
 
@@ -19,9 +20,6 @@
   border: none;
   border-radius: $border-radius;
   background-color: $color-muted;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: 1;
 }
 
 .btn,

sass/components/_forms.scss

@@ -1,28 +1,6 @@
 /* ----------------------------- */
-/* ==Forms                       */
+/* ==Forms styling               */
 /* ----------------------------- */
-/* thanks to HTML5boilerplate and https://shoelace.style/ */
-
-/* forms items */
-form,
-fieldset {
-  border: none;
-}
-
-fieldset {
-  padding: $spacer-medium;
-
-  & legend {
-    padding: 0 $spacer-tiny;
-    border: 0;
-    white-space: normal;
-  }
-}
-
-label {
-  display: inline-block;
-  cursor: pointer;
-}
 
 [type="color"],
 [type="date"],
@@ -107,8 +85,3 @@ input::placeholder,
 textarea::placeholder {
   color: #777;
 }
-
-progress {
-  width: 100%;
-  vertical-align: middle;
-}

sass/knacss.scss

@@ -9,8 +9,8 @@
 
 /*
 1- Reboot (basic reset)
-2- Libraries  :
+2- Base  :
-  - Base
+  - Reset
   - Print
   - Layout (alignment, modules, positionning)
   - Utilities (width and spacers helpers)
@@ -30,35 +30,36 @@
   - Alerts
 */
 
-@import "_vendor/reboot"; // Bootstrap reboot (basic reset) (CSS file renamed and imported as if it was a partial because of libsass)
-
 // WARNING : you should comment the following @import (variables)
-// and move variables file from knacss folder to your own project folder!
+// and move variables file from KNACSS folder to your own project folder!
-@import "_config/variables";
+@import "abstracts/variables";
 
-@import "_config/mixins";
+@import "abstracts/mixins";
 
 // Core Libraries
-@import "_library/base";         // basic styles
+@import "base/reset";        // basic styles
-@import "_library/print";        // print quick reset
+@import "base/print";        // print quick reset
-@import "_library/layout";       // alignment, modules, positionning
+@import "base/layout";       // alignment, modules, positionning
-@import "_library/utilities";    // width and spacer helpers
-@import "_library/responsive";   // Responsive Web Design helpers
-// @import "_library/wordpress"; // WordPress reset and basic styles
 
-// New Grid System by default (Grid Layout). If you prefer old "Flexbox" Grid System, replace file with "_library/grillade-flex"
+// New Grid System by default (Grid Layout). 
+// If you prefer old "Flexbox" Grid System, replace file with "base/grillade-flex"
 // Note that none of these files are prefixed by an underscore, in order to compile them.
-@import "_library/grillade-grid"; // grid system with Grid Layout
+@import "base/grillade-grid"; // grid system with Grid Layout
 
 // Components
+@import "components/alerts";     // alerts styles
+@import "components/arrows";     // arrows styles
+@import "components/badges";     // badges styles
+@import "components/buttons";    // buttons styles
+@import "components/checkbox";   // checkbox, radio, switch styles
+@import "components/forms";      // forms consistency and styles
 @import "components/media";      // media object
 @import "components/skip-links"; // skip links
 @import "components/tables";     // data tables consistency
-@import "components/forms";      // forms consistency and styles
-@import "components/buttons";    // buttons styles
-@import "components/checkbox";   // checkbox, radio, switch styles
 @import "components/tabs";       // tabs styles
-@import "components/arrows";     // arrows styles
+@import "components/tags";       // tags styles
-@import "components/tags";        // tags styles
+
-@import "components/badges";     // badges styles
+// Utilities
-@import "components/alerts";     // alerts styles
+@import "base/utilities";    // width and spacer helpers
+@import "base/responsive";   // Responsive Web Design helpers
+// @import "base/wordpress"; // WordPress reset and basic styles