Update README.md

Fix font-size: bigger; to larger
2023-01-09 19:06:15 +01:00 · 2023-01-09 19:06:01 +01:00 · 2022-05-24 16:51:04 +02:00 · 2022-02-25 08:06:11 +01:00 · 2022-02-24 16:16:45 +01:00 · 2022-02-24 16:10:04 +01:00
58 changed files with 7265 additions and 14854 deletions
--- a/.browserslistrc
+++ b/.browserslistrc
@ -0,0 +1,2 @@
+>1.5%
+not op_mini all
--- a/.editorconfig
+++ b/.editorconfig
--- a/.gitattributes
+++ b/.gitattributes
--- a/.gitignore
+++ b/.gitignore
@ -93,6 +93,7 @@ DocProject/Help/*.hhp
 DocProject/Help/Html2
 DocProject/Help/html

+
 # Click-Once directory
 publish

@ -167,8 +168,10 @@ pip-log.txt
 # parce qu'on s'en fout
 *.log

-# parce que trop lourd
+# parce que trop lourd, ...
 node_modules/
+package-lock.json
+yarn.lock

 # parce que certaines personnes utilisent de vrais IDEs
 .idea
--- a/.sass-lint.yml
+++ b/.sass-lint.yml
@ -1,91 +0,0 @@
-options:
-  formatter: stylish
-files:
-  include: '**/*.s+(a|c)ss'
-rules:
-  # Extends
-  extends-before-mixins: 1
-  extends-before-declarations: 1
-  placeholder-in-extend: 1
-
-  # Mixins
-  mixins-before-declarations: 1
-
-  # Line Spacing
-  one-declaration-per-line: 1
-  empty-line-between-blocks: 1
-  single-line-per-selector: 1
-
-  # Disallows
-  no-attribute-selectors: 0
-  no-color-hex: 0
-  no-color-keywords: 0 # Modified, was 1
-  no-color-literals: 0 # Modified, was 1
-  no-combinators: 0
-  no-css-comments: 0 # Modified, was 1
-  no-debug: 1
-  no-disallowed-properties: 0
-  no-duplicate-properties: 1
-  no-empty-rulesets: 1
-  no-extends: 0
-  no-ids: 1
-  no-important: 0 # Modified, was 1
-  no-invalid-hex: 1
-  no-mergeable-selectors: 1
-  no-misspelled-properties: 1
-  no-qualifying-elements: 1
-  no-trailing-whitespace: 1
-  no-trailing-zero: 1
-  no-transition-all: 1
-  no-universal-selectors: 0
-  no-url-protocols: 1
-  no-vendor-prefixes: 1
-  no-warn: 1
-  property-units: 0
-
-  # Nesting
-  force-attribute-nesting: 1
-  force-element-nesting: 1
-  force-pseudo-nesting: 1
-
-  # Name Formats
-  class-name-format: 1
-  function-name-format: 1
-  id-name-format: 0
-  mixin-name-format: 1
-  placeholder-name-format: 1
-  variable-name-format: 1
-
-  # Style Guide
-  attribute-quotes: 1
-  bem-depth: 0
-  border-zero: 0 # Modified, was 1
-  brace-style: 1
-  clean-import-paths: 0 # 1 forbids leading underscores and extensions (.scss)
-  empty-args: 1
-  hex-length: 1
-  hex-notation: 1
-  indentation: 1
-  leading-zero: 0 # Modified, was 1
-  nesting-depth: 1
-  property-sort-order: 0 # Modified, was 1 @TODO Est-ce possible de customiser pour respecter la convention Alsa ?
-  pseudo-element: 1
-  quotes: 0 # 1 warns that strings should use single quotes
-  shorthand-values: 1
-  url-quotes: 1
-  variable-for-property: 1
-  zero-unit: 1
-
-  # Inner Spacing
-  space-after-comma: 1
-  space-before-colon: 1
-  space-after-colon: 1
-  space-before-brace: 1
-  space-before-bang: 1
-  space-after-bang: 1
-  space-between-parens: 1
-  space-around-operator: 1
-
-  # Final Items
-  trailing-semicolon: 1
-  final-newline: 1
--- a/0
+++ b/0
--- a/README.md
+++ b/README.md
@ -1,68 +1,14 @@
 # KNACSS

-<http://www.knacss.com>
+**Né en 2012 et après plus de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations est officiellement obsolète, n'est plus maintenu et ne sera plus mis à jour.**

-KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign, grille de mise en forme).
+## Documentation version v8 (v8 = Reborn)

-Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé pour être couplé avec des préprocesseurs tel que Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projet web quel que soit son type ou son envergure.
+- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
+- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)

-## Documentation
+## Documentation anciennes versions (v7)

- [**Documentation et Guide de styles**](https://www.knacss.com/doc.html)
- [**Pense-bête en PDF**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
- Site web de présentation de KNACSS : <http://knacss.com>
+- [**Documentation KNACSS v7**](https://www.knacss.com/doc-old.html)
+- [**Pense-bête PDF KNACSS v7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)

-## Fonctionnalités
-
- reset
- typographie
- Responsive
- grille de mise en forme
- composants (formulaires, tableaux, boutons, flèches, onglets, checkbox, radio et bouton "switch" stylés)
- variables et mixin Sass
-
-## Compatibilité
-
-KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs desktop et mobiles à partir d'IE10 inclus. Pour les détails, se référer à la documentation.
-
-## Installation
-
-Voir la documentation.
-
-## Mise à jour depuis une version précédente de KNACSS
-
-La version `7.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes.
-
-Voici les principales modifications dont il faudra tenir compte lors d'une mise à jour&nbsp;:
-
-### Modifications majeures entre la v7 et la v6
-
- architecture globale revisitée (vendor, config, library, components)
- variables de projet modifiées et renommées
- refonte complète du système de grille (dorénavant basé sur Grid Layout)
- déplacement des variables de gouttières de grillade.scss vers variables.scss
- déplacement des variables de breakpoints de breakpoints.scss vers variables.scss
-
-Pour tous détails, voir le fichier Changelog.
-
-### Modifications majeures entre la v6 et la v5
-
- la grille de mise en forme a été entièrement modifiée. Détails de modifications: <https://github.com/alsacreations/KNACSS/issues/207>
- les positionnements tabulaires. `.row`, `.col` et `.line`, devenus inutiles et confusants depuis Flexbox, ont été supprimés
- de nouvelles valeurs de breakpoints ont été définies. Détails: <https://github.com/alsacreations/KNACSS/issues/210>
- suppression de l'outil *include-media* (crée des bugs d'encodage, nécessite un temps d'apprentissage, et n'apporte pas grand chose au final)
-
-### Modifications majeures entre la v5 et la v4
-
- suppression de la version LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge)
- suppression des fallbacks pour IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-`
- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
- ajout de la library include-media (<http://include-media.com/>)
- grille "grillade" à présent en mobile first
-
-### Modifications majeures entre la v4 et la v3
-
- La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.left`, `.start`, `.fl`, `.table-`, `.flex-start`, `.flex-end`)&nbsp;: `.left` ne correspond plus à un `float: left` mais à un `margin-right: auto`, il faut dorénavant employer `.fl` pour obtenir un flottant à gauche;  `.right` ne correspond plus à un `float: right` mais à un `margin-left: auto`, il faut dorénavant employer `.fr` pour obtenir un flottant à droite; `.start` et `.end` n'existent plus
- Les noms des conteneurs de grille ont changé et nécessitent systématiquement un trait d'union : ancien nommage : `.grid2`, `.grid1-3`;  nouveau nommage : `.grid-2`, `.grid-1-3`
- Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes). Nouveau nommage : `.flex-container, .flex-container-h`, `.flex-container-v`, `.flex-item-fluid`, `.flex-item-center`, `.flex-item-first, .flex-item-medium, .flex-item-last`
--- a/bower.json
+++ b/bower.json
@ -1,31 +0,0 @@
-{
-  "name": "KNACSS",
-  "version": "7.1.3",
-  "homepage": "http://www.knacss.com/",
-  "authors": [
-    "Raphaël GOETTER, Alsacreations"
-  ],
-  "description": "KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. It relies on common best practices and experience on the topic.",
-  "main": "css/knacss.css",
-  "keywords": [
-    "css",
-    "framework",
-    "reset",
-    "responsive",
-    "less",
-    "sass",
-    "rwd",
-    "boilerplate",
-    "workflow"
-  ],
-  "license": "WTFPL",
-  "ignore": [
-    "**/.*",
-    "node_modules",
-    "bower_components",
-    "test",
-    "less/knackLESS.zip",
-    "tests",
-    "README.md"
-  ]
-}
--- a/changelog.md
+++ b/changelog.md
@ -1,11 +1,39 @@
 # Changelog

-## Changelog v7.1.3 (12 février 2020)
+- 24 janvier 2022 (8.2.1) : corrections des radio / checkbox
+- 19 janvier 2022 (8.2) : refonte des variables d'espacement
+- 5 janvier 2022 (8.1) : refonte des variables de couleur
+- 9 juillet 2021 (8.0.5) : suppression min-height: 0 par défaut
+- 26 avril 2021 : taille de base 100% (et non plus 62.5%) et corrections Grillade
+- 5 mars 2021 : les classes utilitaires font à présent partie du Core
+- 26 novembre 2020 : Documentation + V1.0.0
+- 22 octobre 2020 : grosse remise à jour. V0.9.0
+- 12 octobre 2020 : début de refonte classes utilitaires
+- 11 août 2020 : refonte des composants principaux
+- 19 mai 2020 : fichier de composant `button.scss` et mixin Sass
+- 29 février 2020 : feuille de style accessibilité
+- 13 février 2020 : on repart de zéro...

- correctif :
-  - ce présent tag `7.1.3` corrige le tag précédent
-  - tag erroné : `7.1.2` (correspondant partiellement à la branche `v8` en développement) = ne pas utiliser !
-  - précédent tag correct : `7.1.0`
+## Changelog 2020
+
+Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn, correspondant à la Branche et version 8.
+
+## Changelog v8.0.0 (xxx 2019)
+
+- Architecture : mise à jour du reset, suppression des reset vendors (Reboot de Boostrap)
+- Architecture : renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss`
+- Architecture : modification de l'ordre d'import des fichiers : les utilitaires sont importées à la fin à présent
+- Compatibilité : support passé de IE10 à IE11 (browserlist)
+- Compatibilité : Browserslist devenu `.browserslistrc` et mise à jour du support à `>0.25% not op_mini all`
+- Compatibilité : fichier gulpfile.js dorénavant compatible Gulp 4
+- Compatibilité : versions exactes des dépendances dans package.json (pour éviter "latest")
+- Grillade :renommage des classes `grid-` en `grillade-` pour éviter tout conflit
+- Grillade : ajout du constructeur `medium-X` en plus de `small-X`
+- Grillade : ajout des constructeus `-start`, `-end`, `-center`, `-space-between`, `-space-around`, `-space-evenly` pour l'alignement général de la grille
+- Divers : ajout d'une variable pour supporter ou non IE11 : `$ie: true !default;`.
+- Divers :ajout d'une variable pour supporter ou non WordPress : `$wordpress: false !default;`.
+- Divers :`visually-hidden` devient un mixin
+- Divers :corrections typo

 ## Changelog v7.1.2 (30 janvier 2019)

@ -57,7 +85,7 @@
 ## Changelog v7.0.1 (22 décembre 2017)

 - meilleure gestion des hyphens
- mise en commentaire du fix SVG pour IE11
+- mise en commentaire du fix SVG our IE11

 ## Changelog v7.0.0 (août - novembre 2017)

@ -69,7 +97,7 @@
  - regroupement des styles des tableaux
  - renommage des variables couleur de projets
  - renommage des variables de composants
-  - renommage des variables d'espacement (`$tiny-value` -> `$spacer-tiny`)
+  - renommage des variables d'espacement (`$tiny-value` -> `$spacer-micro`)
  - automatisation des classes utilitaires via Sass
  - suppression du namespace "kna-"
 - refonte :
@ -185,7 +213,7 @@
 ## Changelog v4.4.2 (24 décembre 2015)

 - correction d'un bug responsive des classes `.flex-item-double`
- création de la feuille de style dédiée aux grilles : *grillade.css* pour ceux qui souhaitent se contenter des grilles de KNACSS
+- création de la feuille de style dédiée aux grilles : _grillade.css_ pour ceux qui souhaitent se contenter des grilles de KNACSS

 ## Changelog v4.4.0 (12 décembre 2015)

@ -295,7 +323,7 @@ Nouveaux noms :

 ## Vite fait

- grosse remise à jour, orientée vers les technos modernes (flexbox, rem, calc,  ...) et moins de "bidouille"
+- grosse remise à jour, orientée vers les technos modernes (flexbox, rem, calc, ...) et moins de "bidouille"
 - fin du support d'IE6-IE8 Si vous souhaitez utiliser KNACSS sur d'anciens navigateurs, préférez la [Version 3](https://github.com/raphaelgoetter/KNACSS/tree/3.1.0)
 - ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
 - un grand merci à @7studio pour ses conseils et observations sur la version beta de KNACSS 4.0
--- a/css/grillade-flex.css
+++ b/css/grillade-flex.css
--- a/css/grillade-grid.css
+++ b/css/grillade-grid.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}}@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}
--- a/css/grillade/grillade.css
+++ b/css/grillade/grillade.css
--- a/css/knacss-full/knacss.css
+++ b/css/knacss-full/knacss.css
--- a/css/knacss-mini/knacss.css
+++ b/css/knacss-mini/knacss.css
--- a/css/knacss-unminified.css
+++ b/css/knacss-unminified.css
--- a/css/knacss.css
+++ b/css/knacss.css
--- a/gulpfile.js
+++ b/gulpfile.js
@ -1,87 +1,55 @@
-// Requires
-var gulp = require('gulp');
-
-// Include plugins
-var postcss = require('gulp-postcss');
+const gulp = require('gulp');
 var sass = require('gulp-sass');
-var rename = require('gulp-rename');
-
-var cssnano = require('cssnano'); // minifies CSS
+var postcss = require('gulp-postcss');
+var CombineMQ = require('postcss-combine-media-query');
 var autoprefixer = require('autoprefixer');
+var CSSnano = require('cssnano');

-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({
-      grid: true,
-      browsers: browsersList
-    }),
-    flexbugs(),
-    gaps()
-];
-
-var pluginsProd = [
-  unprefix(),
-    autoprefixer({
-      grid: true,
-      browsers: browsersList
-    }),
-    flexbugs(),
-    gaps(),
-    cssnano()
-];
-
-// tâche cssDev = compile vers knacss-unminified.css
-gulp.task('cssDev', function () {
-  return gulp.src('./sass/knacss.scss')
-    .pipe(sass({
-      outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
-    }))
-    .pipe(postcss(plugins))
-    .pipe(rename('knacss-unminified.css'))
-    .pipe(gulp.dest('./css/'));
+gulp.task('css:full', () => {
+  return gulp.src('sass/knacss.scss')
+    .pipe(sass(
+      {
+      outputStyle: 'expanded'
+      }))
+    .pipe(
+      postcss([
+        autoprefixer, // ajoute les préfixes vendeurs
+      ]))
+    .pipe(gulp.dest('css/knacss-full'));
 });

-// tâche cssProd = compile vers knacss.css minifié
-gulp.task('cssProd', function () {
-  return gulp.src('./sass/knacss.scss')
-    .pipe(sass())
-    .pipe(postcss(pluginsProd))
-    .pipe(gulp.dest('./css/'));
+gulp.task('css:mini', () => {
+  return gulp.src('sass/knacss.scss')
+    .pipe(sass(
+      {
+      outputStyle: 'compact'
+      }))
+    .pipe(
+      postcss([
+        CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
+        autoprefixer, // ajoute les préfixes vendeurs
+        CSSnano // minification 
+      ]))
+    .pipe(gulp.dest('css/knacss-mini'));
 });

-gulp.task('grillade', function() {
-  return gulp.src('./sass/_library/grillade-grid.scss')
-    .pipe(sass())
-    .pipe(postcss(pluginsProd))
-    .pipe(gulp.dest('./css/'));
+gulp.task('css:grillade', () => {
+  return gulp.src('sass/utils/grillade.scss')
+    .pipe(sass(
+      {
+      outputStyle: 'compact'
+      }))
+    .pipe(
+      postcss([
+        CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
+        autoprefixer, // ajoute les préfixes vendeurs
+        CSSnano // minification 
+      ]))
+    .pipe(gulp.dest('css/grillade'));
 });

-gulp.task('grillade-flex', function() {
-  return gulp.src('./sass/_library/grillade-flex.scss')
-    .pipe(sass())
-    .pipe(postcss(pluginsProd))
-    .pipe(gulp.dest('./css/'));
-});
+// Tâche BUILD : tapez "gulp" ou "gulp build"
+gulp.task('build', gulp.series('css:full', 'css:mini', 'css:grillade'));

-// Watcher
-gulp.task('watch', function() {
-  gulp.watch(['./sass/*.scss'], ['cssDev']);
-});
-
-
-gulp.task('default', ['cssDev', 'cssProd', 'grillade', 'grillade-flex']);
+// Tâche par défaut
+gulp.task('default', gulp.series('build'));
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -1,9 +1,9 @@
 {
  "name": "knacss",
-  "version": "7.1.3",
+  "version": "8.2.1",
  "homepage": "http://www.knacss.com/",
  "bugs": "https://github.com/alsacreations/KNACSS/issues",
-  "author": "Raphaël GOETTER, Alsacreations",
+  "author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
  "contributors": [
    "Raphaël GOETTER, Alsacreations"
  ],
@ -24,17 +24,14 @@
    "url": "https://github.com/alsacreations/KNACSS"
  },
  "license": "WTFPL",
-  "dependencies": {},
  "devDependencies": {
-    "autoprefixer": "^9.7.4",
-    "cssnano": "latest",
-    "gulp": "^3.x",
-    "gulp-postcss": "latest",
-    "gulp-rename": "^2.0.0",
-    "gulp-sass": "latest",
-    "postcss-flexbugs-fixes": "^4.2.0",
-    "postcss-gap-properties": "latest",
-    "postcss-unprefix": "latest"
+    "gulp": "^4.0.2",
+    "gulp-postcss": "^8.0.0",
+    "gulp-sass": "^4.1.0"
  },
-  "engines": {}
+  "dependencies": {
+    "autoprefixer": "^9.7.1",
+    "postcss-combine-media-query": "^1.0.1",
+    "cssnano": "^4.1.10"
+  }
 }
--- a/sass/_config/_mixins.scss
+++ b/sass/_config/_mixins.scss
@ -1,58 +0,0 @@
-// font-size Mixin
-// compiles to font-size mobile + font-size desktop on small-plus devices
-// ex. h2 { @include font-size(h2);}
-@mixin font-size($elem) {
-  $q: map-get($font-sizes, $elem);
-  $mob: map-get($q, "mobile");
-  $desk: map-get($q, "desktop");
-  font-size: $mob;
-  @include respond-to("small-up") {
-    font-size: $desk;
-  }
-}
-
-// Grid Mixin
-// arguments are : columns number, gutter, min-breakpoint
-// ex. .ingrid { @include grid(4, 1rem, 640px); }
-@mixin grid($number:1, $gutter:0, $breakpoint:0) {
-  @supports (display: grid) {
-    @media (min-width: $breakpoint) {
-      display: grid;
-      grid-template-columns: repeat($number, 1fr);
-      grid-gap: $gutter;
-    }
-  }
-}
-
-// Additionnal "utility" breakpoints aliases
-// ex. @include respond-to("medium-up") {...}
-$bp-aliases: (
-  'tiny'   : (max-width: #{$tiny - 1}),
-  'small'  : (max-width: #{$small - 1}),
-  'medium' : (max-width: #{$medium - 1}),
-  'large' : (max-width: #{$large - 1}),
-  'extra-large'  : (max-width: #{$extra-large - 1}),
-  'tiny-up'   : (min-width: #{$tiny}),
-  'small-up'  : (min-width: #{$small}),
-  'medium-up' : (min-width: #{$medium}),
-  'large-up' : (min-width: #{$large}),
-  'extra-large-up' : (min-width: #{$extra-large}),
-  'retina' : (min-resolution: 2dppx)
-);
-
-// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
-@mixin respond-to($name) {
-  // If the key exists in the map
-  @if map-has-key($bp-aliases, $name) {
-    // Prints a media query based on the value
-    @media #{inspect(map-get($bp-aliases, $name))} {
-      @content;
-    }
-  }
-
-  // If the key doesn't exist in the map
-  @else {
-    @warn "Unfortunately, no value could be retrieved from `#{$breakpoint}`. "
-        + "Please make sure it is defined in `$breakpoints` map.";
-  }
-}
--- a/sass/_config/_variables.scss
+++ b/sass/_config/_variables.scss
@ -1,224 +0,0 @@
-// Config file and project variables
-
-// ----------------
-// Breakpoints zone
-// ----------------
-
-// Warning: you should use your own values, regardless of the devices
-// Best practice is Mobile First: (min-width: $breakpoint)
-$tiny        : 480px !default; // or 'em' if you prefer, of course
-$small       : 576px !default;
-$medium      : 768px !default;
-$large       : 992px !default;
-$extra-large : 1200px !default;
-
-// ----------
-// Fonts zone
-// ----------
-
-// Font families
-$font-family-base      : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !default; // system font stack
-$font-family-headings  : sans-serif !default; // font for h1, h2.. h6
-$font-family-monospace : consolas, courier, monospace !default; // font for code and samples
-
-// Font sizes (1.6rem value is "16px" equivalent)
-$font-size-base : 1.6rem !default;
-
-$font-sizes: (
-  base: (
-    mobile  : 1.4rem,
-    desktop : $font-size-base
-  ),
-  h1: (
-    mobile  : 2.8rem,
-    desktop : 3.2rem
-  ),
-  h2: (
-    mobile  : 2.4rem,
-    desktop : 2.8rem
-  ),
-  h3: (
-    mobile  : 2.0rem,
-    desktop : 2.4rem
-  ),
-  h4: (
-    mobile  : 1.8rem,
-    desktop : 2.0rem
-  ),
-  h5: (
-    mobile  : 1.6rem,
-    desktop : 1.8rem
-  ),
-  h6: (
-    mobile  : 1.4rem,
-    desktop : 1.6rem
-  )
-) !default;
-
-// Line heights
-$line-height-s    : 1.3 !default;
-$line-height-base : 1.5 !default;
-$line-height-l    : 1.7 !default;
-
-// Default margin-bottom
-$margin-bottom-base     : 1rem !default;
-$headings-margin-bottom : $margin-bottom-base /2 !default;
-$paragraph-margin-bottom: $margin-bottom-base !default;
-
-// Font weights
-$weight-light   : 200 !default;
-$weight-book    : 300 !default;
-$weight-regular : 400 !default;
-$weight-medium  : 500 !default;
-$weight-bold    : 700 !default;
-
-// Activate hyphenation on small screens
-$hyphens: false !default;
-
-// ------------
-// Spacing zone
-// ------------
-
-// Number of grid-columns
-$cols: 12 !default;
-
-// Gutter
-$gutter: null;
-
-// Grid gutters (for .has-gutter-* classes)
-$grid-gutters: (
-  '': 1rem,
-  '-l': 2rem,
-  '-xl': 4rem
-) !default;
-
-// Spacings
-$spacer-tiny             : .5rem  !default;
-$spacer-tiny-plus        : .7rem !default;
-$spacer-small            : 1rem !default;
-$spacer-small-plus       : 1.5rem !default;
-$spacer-medium           : 2rem !default;
-$spacer-medium-plus      : 3rem !default;
-$spacer-large            : 4rem !default;
-$spacer-large-plus       : 6rem !default;
-$spacer-extra-large      : 8rem !default;
-$spacer-extra-large-plus : 12rem !default;
-$spacer-ultra-large      : 16rem !default;
-$spacer-ultra-large-plus : 20rem !default;
-
-// z-indexes
-$zindex-navigation   : 1000 !default;
-$zindex-dropdown     : 2000 !default;
-$zindex-popover      : 3000 !default;
-$zindex-tooltip      : 4000 !default;
-$zindex-modal        : 5000 !default;
-$zindex-notification : 6000 !default;
-$zindex-debug        : 7000 !default;
-
-// ----------
-// Color zone
-// ----------
-
-// Color names
-$white    : #fff !default;
-$gray-100 : #f8f9fa !default;
-$gray-200 : #e7e9ed !default;
-$gray-300 : #dee2e6 !default;
-$gray-400 : #ced4da !default;
-$gray-500 : #acb3c2 !default;
-$gray-600 : #727e96 !default;
-$gray-700 : #454d5d !default;
-$gray-800 : #333 !default;
-$gray-900 : #212529 !default;
-$black    : #000 !default;
-
-$blue-300   : #5BC0DE !default;
-$blue-500   : #0275D8 !default;
-$green-500  : #5CB85C !default;
-$orange-500 : #F0AD4E !default;
-$red-500    : #D9534F !default;
-
-// Semantic colors
-$color-brand    : $green-500 !default;
-$color-primary  : $blue-500 !default;
-$color-success  : $green-500 !default;
-$color-info     : $blue-300 !default;
-$color-warning  : $orange-500 !default;
-$color-danger   : $red-500 !default;
-$color-inverse  : $gray-800 !default;
-$color-ghost    : transparent !default;
-$color-muted    : $gray-200 !default;
-
-$color-base      : $gray-900 !default;
-$background-base : $white !default;
-
-$forms-color     : $gray-800 !default;
-
-// ---------------
-// Components zone
-// ---------------
-
-// Component: links
-$link-color            : $gray-800 !default;
-$link-color-hover      : darken($link-color, 15%) !default;
-$link-decoration       : underline !default;
-$link-decoration-hover : underline !default;
-
-// Global border-radius
-$border-radius: 0 !default;
-
-// Component: quotes
-$quote-color     : $gray-200 !default;
-
-// Component: arrows
-$arrow-color     : $black !default;
-
-// Components: checkboxes, radios, switches
-$checkbox-color: $white !default;
-$checkbox-background: $gray-800 !default;
-$checkbox-size: 2rem !default;
-$checkbox-border-radius: 4px !default;
-$radio-color: $gray-800 !default;
-$radio-background: $white !default;
-$switch-color: $white !default;
-$switch-background: $gray-800 !default;
-$switch-size: 2rem !default;
-$switch-border-radius: 3em !default;
-
-// Component: tables
-$table-border               : $gray-500 !default;
-$table-caption-color        : $gray-800 !default;
-$table-background           : transparent !default;
-$table-head-color           : $color-base !default;
-$table-head-background      : transparent !default;
-$table-footer-color         : $color-base !default;
-$table-footer-background    : transparent !default;
-
-// Components: buttons, badges, alerts color variants list
-// Convention is: name - background-color - color - border
-$variants-list: (
-  (primary,    $color-primary,    $white,    none),
-  (success,    $color-success,    $white,    none),
-  (info,       $color-info,       $black,    none),
-  (warning,    $color-warning,    $black,    none),
-  (danger,     $color-danger,     $white,    none),
-  (inverse,    $color-inverse,    $white,    none),
-  (ghost,      $color-ghost,      $white,    0 0 0 1px $white inset)
-) !default;
-
-// Component: tabs
-$tabs-border            : $gray-200 !default;
-$tabs-active-border     : $gray-800 !default;
-$tabs-color             : $color-base !default;
-$tabs-active-color      : $gray-800 !default;
-$tabs-background        : transparent !default;
-$tabs-active-background : transparent !default;
-$tabs-border-radius     : 0 !default;
-
-// Component: nav burger button
-$burger-color             : $gray-800 !default;
-$burger-background        : transparent !default;
-$burger-hover-background  : transparent !default;
-$burger-size              : 2.6rem !default;
-$burger-weight            : 5px !default; // size of stripes
-$burger-padding           : 0 !default;
--- a/sass/_library/_base.scss
+++ b/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;
-}
--- a/sass/_library/_layout.scss
+++ b/sass/_library/_layout.scss
@ -1,65 +0,0 @@
-/* ----------------------------- */
-/* ==Global Micro Layout         */
-/* ----------------------------- */
-
-/* Flexbox layout is KNACSS choice
-http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
-*/
-
-.flex-container,
-.d-flex {
-  display: flex;
-  flex-wrap: wrap;
-}
-
-.flex-container--row,
-.flex-row {
-  @extend .flex-container;
-  flex-direction: row;
-}
-
-.flex-container--column,
-.flex-column {
-  @extend .flex-container;
-  flex-direction: column;
-}
-
-.flex-container--row-reverse,
-.flex-row-reverse {
-  @extend .flex-container;
-  flex-direction: row-reverse;
-  justify-content: flex-end;
-}
-
-.flex-container--column-reverse,
-.flex-column-reverse {
-  @extend .flex-container;
-  flex-direction: column-reverse;
-  justify-content: flex-end;
-}
-
-.flex-item-fluid,
-.item-fluid {
-  flex: 1 1 0%;
-}
-
-.flex-item-first,
-.item-first {
-  order: -1;
-}
-
-.flex-item-medium,
-.item-medium {
-  order: 0;
-}
-
-.flex-item-last,
-.item-last {
-  order: 1;
-}
-
-.flex-item-center,
-.item-center,
-.mr-auto {
-  margin: auto;
-}
--- a/sass/_library/_responsive.scss
+++ b/sass/_library/_responsive.scss
@ -1,284 +0,0 @@
-/* -------------------------- */
-/* ==Responsive helpers       */
-/* -------------------------- */
-
-/* large screens */
-/* ------------- */
-
-@media (min-width: $large) {
-
-  /* layouts for large screens */
-  .large-hidden {
-    display: none !important;
-  }
-
-  .large-visible {
-    display: block !important;
-  }
-
-  .large-no-float {
-    float: none;
-  }
-
-  .large-inbl {
-    display: inline-block;
-    float: none;
-    vertical-align: top;
-  }
-
-  /* widths for large screens */
-  .large-w25 {
-    width: 25% !important;
-  }
-
-  .large-w33 {
-    width: 33.333333% !important;
-  }
-
-  .large-w50 {
-    width: 50% !important;
-  }
-
-  .large-w66 {
-    width: 66.666666% !important;
-  }
-
-  .large-w75 {
-    width: 75% !important;
-  }
-
-  .large-w100,
-  .large-wauto {
-    display: block !important;
-    float: none !important;
-    clear: none !important;
-    width: auto !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    border: 0;
-  }
-
-  /* margins for large screens */
-  .large-man,
-  .large-ma0 {
-    margin: 0 !important;
-  }
-}
-
-/* medium screens */
-/* -------------- */
-
-@media (min-width: $medium) and (max-width: ($large - 1)) {
-
-  /* layouts for medium screens */
-  .medium-hidden {
-    display: none !important;
-  }
-
-  .medium-visible {
-    display: block !important;
-  }
-
-  .medium-no-float {
-    float: none;
-  }
-
-  .medium-inbl {
-    display: inline-block;
-    float: none;
-    vertical-align: top;
-  }
-
-  /* widths for medium screens */
-  .medium-w25 {
-    width: 25% !important;
-  }
-
-  .medium-w33 {
-    width: 33.333333% !important;
-  }
-
-  .medium-w50 {
-    width: 50% !important;
-  }
-
-  .medium-w66 {
-    width: 66.666666% !important;
-  }
-
-  .medium-w75 {
-    width: 75% !important;
-  }
-
-  .medium-w100,
-  .medium-wauto {
-    display: block !important;
-    float: none !important;
-    clear: none !important;
-    width: auto !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    border: 0;
-  }
-
-  /* margins for medium screens */
-  .medium-man,
-  .medium-ma0 {
-    margin: 0 !important;
-  }
-}
-
-/* small screens */
-/* ------------- */
-
-@media (min-width: $small) and (max-width: ($medium - 1)) {
-
-  /* layouts for small screens */
-  .small-hidden {
-    display: none !important;
-  }
-
-  .small-visible {
-    display: block !important;
-  }
-
-  .small-no-float {
-    float: none;
-  }
-
-  .small-inbl {
-    display: inline-block;
-    float: none;
-    vertical-align: top;
-  }
-
-  /* widths for small screens */
-  .small-w25 {
-    width: 25% !important;
-  }
-
-  .small-w33 {
-    width: 33.333333% !important;
-  }
-
-  .small-w50 {
-    width: 50% !important;
-  }
-
-  .small-w66 {
-    width: 66.666666% !important;
-  }
-
-  .small-w75 {
-    width: 75% !important;
-  }
-
-  .small-w100,
-  .small-wauto {
-    display: block !important;
-    float: none !important;
-    clear: none !important;
-    width: auto !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    border: 0;
-  }
-
-  /* margins for small screens */
-  .small-man,
-  .small-ma0 {
-    margin: 0 !important;
-  }
-
-  .small-pan,
-  .small-pa0 {
-    padding: 0 !important;
-  }
-
-}
-
-/* tiny screens */
-/* ------------ */
-
-@media (max-width: $small - 1) {
-
-  /* quick small resolution reset */
-  .mod,
-  .col,
-  fieldset {
-    display: block !important;
-    float: none !important;
-    clear: none !important;
-    width: auto !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    border: 0;
-  }
-
-  .flex-container {
-    flex-direction: column;
-  }
-
-  /* layouts for tiny screens */
-  .tiny-hidden {
-    display: none !important;
-  }
-
-  .tiny-visible {
-    display: block !important;
-  }
-
-  .tiny-no-float {
-    float: none;
-  }
-
-  .tiny-inbl {
-    display: inline-block;
-    float: none;
-    vertical-align: top;
-  }
-
-  /* widths for tiny screens */
-  .tiny-w25 {
-    width: 25% !important;
-  }
-
-  .tiny-w33 {
-    width: 33.333333% !important;
-  }
-
-  .tiny-w50 {
-    width: 50% !important;
-  }
-
-  .tiny-w66 {
-    width: 66.666666% !important;
-  }
-
-  .tiny-w75 {
-    width: 75% !important;
-  }
-
-  .tiny-w100,
-  .tiny-wauto {
-    display: block !important;
-    float: none !important;
-    clear: none !important;
-    width: auto !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    border: 0;
-  }
-
-  /* margins for tiny screens */
-  .tiny-man,
-  .tiny-ma0 {
-    margin: 0 !important;
-  }
-
-  .tiny-pan,
-  .tiny-pa0 {
-    padding: 0 !important;
-  }
-
-}
--- a/sass/_library/_utilities.scss
+++ b/sass/_library/_utilities.scss
@ -1,462 +0,0 @@
-/* ---------------------------------- */
-/* ==Helpers                          */
-/* ---------------------------------- */
-
-/* Typo Helpers  */
-/* ------------- */
-
-.u-bold {
-  font-weight: $weight-bold;
-}
-
-.u-italic {
-  font-style: italic;
-}
-
-.u-normal {
-  font-weight: normal;
-  font-style: normal;
-}
-
-.u-uppercase {
-  text-transform: uppercase;
-}
-
-.u-lowercase {
-  text-transform: lowercase;
-}
-
-.u-smaller {
-  font-size: 0.6em;
-}
-
-.u-small {
-  font-size: 0.8em;
-}
-
-.u-big {
-  font-size: 1.2em;
-}
-
-.u-bigger {
-  font-size: 1.5em;
-}
-
-.u-biggest {
-  font-size: 2em;
-}
-
-.u-txt-wrap {
-  word-wrap: break-word;
-  overflow-wrap: break-word;
-  hyphens: auto;
-}
-
-.u-txt-ellipsis {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-}
-
-/* text and contents alignment */
-
-.txtleft,
-.u-txt-left {
-  text-align: left;
-}
-
-.txtright,
-.u-txt-right {
-  text-align: right;
-}
-
-.txtcenter,
-.u-txt-center {
-  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,
-.u-clear {
-  clear: both;
-}
-
-/* blocks that must contain floats */
-
-.clearfix,
-.u-clearfix {
-  &::after {
-    content: "";
-    display: table;
-    clear: both;
-    border-collapse: collapse;
-  }
-}
-
-/* simple blocks alignment */
-
-.left,
-.u-left {
-  margin-right: auto;
-}
-
-.right,
-.u-right {
-  margin-left: auto;
-}
-
-.center,
-.u-center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* Global Micro Layout */
-/* ------------------- */
-
-/* module, gains superpower "BFC" Block Formating Context */
-
-.mod,
-.u-mod,
-.bfc,
-.u-bfc {
-  overflow: hidden;
-}
-
-/* floating elements */
-
-.fl,
-.u-fl {
-  float: left;
-}
-
-img.fl,
-img.u-fl {
-  margin-right: $spacer-small;
-}
-
-.fr,
-.u-fr {
-  float: right;
-}
-
-img.fr,
-img.u-fr {
-  margin-left: $spacer-small;
-}
-
-img.fl,
-img.fr,
-img.u-fl,
-img.u-fr {
-  margin-bottom: $spacer-tiny;
-}
-
-/* inline-block */
-
-.inbl,
-.u-inbl {
-  display: inline-block;
-  vertical-align: top;
-}
-
-/* State Helpers */
-/* ------------- */
-
-/* invisible for all */
-.is-hidden,
-.js-hidden,
-[hidden] {
-  display: none;
-}
-
-/* hidden but not for an assistive technology like a screen reader, Yahoo! method */
-.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;
-}
-
-.is-disabled,
-.js-disabled,
-[disabled],
-.is-disabled ~ label,
-[disabled] ~ label {
-  opacity: 0.5;
-  cursor: not-allowed !important;
-  filter: grayscale(1);
-}
-
-ul {
-  &.is-unstyled,
-  &.unstyled {
-    list-style: none;
-    padding-left: 0;
-  }
-}
-
-.color--inverse {
-  color: $white;
-}
-
-/* Width Helpers */
-/* ------------- */
-
-/* blocks widths (percentage and pixels) */
-$i: 100;
-
-@while $i > 0 {
-    .w#{$i} {
-      width: $i * 1%;
-    }
-    $i: $i - 5;
-}
-.w66 {
-  width: calc(100% / 3 * 2);
-}
-.w33 {
-  width: calc(100% / 3);
-}
-
-$i: 1000;
-
-.wauto {
-  width: auto;
-}
-
-.w960p {
-  width: 960px;
-}
-
-.mw960p {
-  max-width: 960px;
-}
-
-.w1140p {
-  width: 1140px;
-}
-
-.mw1140p {
-  max-width: 1140px;
-}
-
-@while $i > 0 {
-    .w#{$i}p {
-      width: $i * 1px;
-    }
-    $i: $i - 50;
-}
-
-/* Spacing Helpers */
-/* --------------- */
-
-.man,
-.ma0 {
-  margin: 0;
-}
-
-.pan,
-.pa0 {
-  padding: 0;
-}
-
-.mas {
-  margin: $spacer-small;
-}
-
-.mam {
-  margin: $spacer-medium;
-}
-
-.mal {
-  margin: $spacer-large;
-}
-
-.pas {
-  padding: $spacer-small;
-}
-
-.pam {
-  padding: $spacer-medium;
-}
-
-.pal {
-  padding: $spacer-large;
-}
-
-.mtn,
-.mt0 {
-  margin-top: 0;
-}
-
-.mts {
-  margin-top: $spacer-small;
-}
-
-.mtm {
-  margin-top: $spacer-medium;
-}
-
-.mtl {
-  margin-top: $spacer-large;
-}
-
-.mrn,
-.mr0 {
-  margin-right: 0;
-}
-
-.mrs {
-  margin-right: $spacer-small;
-}
-
-.mrm {
-  margin-right: $spacer-medium;
-}
-
-.mrl {
-  margin-right: $spacer-large;
-}
-
-.mbn,
-.mb0 {
-  margin-bottom: 0;
-}
-
-.mbs {
-  margin-bottom: $spacer-small;
-}
-
-.mbm {
-  margin-bottom: $spacer-medium;
-}
-
-.mbl {
-  margin-bottom: $spacer-large;
-}
-
-.mln,
-.ml0 {
-  margin-left: 0;
-}
-
-.mls {
-  margin-left: $spacer-small;
-}
-
-.mlm {
-  margin-left: $spacer-medium;
-}
-
-.mll {
-  margin-left: $spacer-large;
-}
-
-.mauto {
-  margin: auto;
-}
-
-.mtauto {
-  margin-top: auto;
-}
-
-.mrauto {
-  margin-right: auto;
-}
-
-.mbauto {
-  margin-bottom: auto;
-}
-
-.mlauto {
-  margin-left: auto;
-}
-
-.ptn,
-.pt0 {
-  padding-top: 0;
-}
-
-.pts {
-  padding-top: $spacer-small;
-}
-
-.ptm {
-  padding-top: $spacer-medium;
-}
-
-.ptl {
-  padding-top: $spacer-large;
-}
-
-.prn,
-.pr0 {
-  padding-right: 0;
-}
-
-.prs {
-  padding-right: $spacer-small;
-}
-
-.prm {
-  padding-right: $spacer-medium;
-}
-
-.prl {
-  padding-right: $spacer-large;
-}
-
-.pbn,
-.pb0 {
-  padding-bottom: 0;
-}
-
-.pbs {
-  padding-bottom: $spacer-small;
-}
-
-.pbm {
-  padding-bottom: $spacer-medium;
-}
-
-.pbl {
-  padding-bottom: $spacer-large;
-}
-
-.pln,
-.pl0 {
-  padding-left: 0;
-}
-
-.pls {
-  padding-left: $spacer-small;
-}
-
-.plm {
-  padding-left: $spacer-medium;
-}
-
-.pll {
-  padding-left: $spacer-large;
-}
--- a/sass/_library/_wordpress.scss
+++ b/sass/_library/_wordpress.scss
@ -1,248 +0,0 @@
-/* ----------------------------- */
-/* ==WordPress reset             */
-/* ----------------------------- */
-
-/*
-Author: Geoffrey Crofte, Alsacréations
-Contributors: Automattic, Geoffrey Crofte
-Description: Reset styles for WordPress usage of KNACSS
-*/
-
-// current menu elements
-.current_page_item > a {
-}
-.current-menu-item > a {
-}
-.current_page_ancestor > a {
-}
-
-// blocks of content navigation
-.comment-navigation,
-.paging-navigation,
-.post-navigation {
-  overflow: hidden;
-  margin: 0 0 1.5em;
-
-  & .nav-previous {
-    float: left;
-    width: 50%;
-  }
-
-  & .nav-next {
-    float: right;
-    width: 50%;
-    text-align: right;
-  }
-}
-
-// class in img elements
-.alignnone {
-  margin: .25em 1.5em 1.5em 0;
-}
-
-.aligncenter {
-  clear: both;
-  display: block;
-  margin: 1.5em auto;
-}
-
-.alignleft {
-  float: left;
-  margin: 0 1.5em .25em 0;
-}
-
-.alignright {
-  float: right;
-  margin: 0 0 .25em 1.5em;
-}
-
-.entry-content,
-.comment-content {
-  clear: both;
-
-  &::after,
-  &::before {
-    content: "";
-    display: table;
-  }
-}
-
-.widget + .widget {
-  margin: 1.5em 0 0;
-}
-
-// usage example:
-.widget select {
-  max-width: 100%;
-}
-
-/* === 5.1 Posts - post_class === */
-
-// featured content
-.sticky {
-}
-
-// attachment post
-.attachment {
-}
-
-// format of post
-.format- {
-  &aside {
-  }
-  &gallery {
-  }
-  &link {
-  }
-  &image {
-  }
-  &quote {
-  }
-  &status {
-  }
-  &video {
-  }
-  &chat {
-  }
-}
-
-// class for a tag
-.tag- {
-  &name-of-tag {
-  }
-}
-
-// class for category
-.category- {
-  &name-of-category {
-  }
-}
-
-/* === 5.2 Pages - body_class === */
-
-// front page
-.home {
-  // if display posts
-  &.blog {
-  }
-
-  // if static page
-  &.page {
-  }
-}
-
-// page displays posts
-.blog {
-  // if is frontpage
-  &.home {
-  }
-
-  // if static page
-  &.page {
-  }
-}
-
-// simple page
-.page {
-}
-
-// page of single post
-.single {
-}
-
-// page of archives
-.archive {
-}
-
-// page of search
-.search {
-  // if has results
-  .search-results {
-  }
-
-  // if has no results
-  .search-no-results {
-  }
-}
-
-// page 404
-.error404 {
-}
-
-// user logged in
-.logged-in {
-}
-
-// text direction if right-to-left
-// prefer rtl.css: http://codex.wordpress.org/Right-to-Left_Language_Support
-.rtl {
-}
-
-/* === 5.3 Posts and Pages - Contents === */
-
-.hentry {
-  margin: 0 0 1.5em;
-}
-
-.page-content,
-.entry-content,
-.entry-summary {
-  margin: 1.5em 0 0;
-}
-
-.page-links {
-  clear: both;
-  margin: 0 0 1.5em;
-}
-
-.comment-content a {
-  word-wrap: break-word;
-}
-
-.bypostauthor {
-  // some make-the-logo-bigger styles
-}
-
-img.wp-smiley {
-  margin-bottom: 0;
-  margin-top: 0;
-  padding: 0;
-  border: none;
-}
-
-.wp-caption {
-  max-width: 100%;
-  margin-bottom: 1.5em;
-}
-
-.wp-caption img {
-  display: block;
-  margin: 0 auto;
-}
-
-.wp-caption-text {
-  margin: 1em 0;
-  text-align: center;
-}
-
-.gallery {
-  margin-bottom: 1.5em;
-}
-
-.gallery-item {
-  display: inline-block;
-  width: 100%;
-  text-align: center;
-  vertical-align: top;
-
-  @for $i from 2 through 9 {
-    .gallery-columns-#{$i} & {
-      $w: floor(10000 / $i) / 100;
-      max-width: unquote($w + '%');
-		}
-	}
-}
-
-.gallery-caption {
-  display: block;
-}
--- a/sass/_library/grillade-flex.scss
+++ b/sass/_library/grillade-flex.scss
@ -1,146 +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 practice : (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;
-$cols: 12 !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 $cols {
-    [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});
-        }
-      }
-    }
-  }
-}
--- a/sass/_library/grillade-grid.scss
+++ b/sass/_library/grillade-grid.scss
@ -1,118 +0,0 @@
-/* --------------------------------------- */
-/* ==Grillade : ultra light Grid System    */
-/* --------------------------------------- */
-// 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)
-
-// use these variables only for a standalone Grillade
-// in KNACSS, you shall modify variables file instead
-$tiny: 480px !default;
-$medium: 768px !default;
-$cols: 12 !default;
-
-// classic Grid
-[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;
-      }
-    }
-  }
-}
-
-// autogrid
-.autogrid,
-.grid {
-  @media (min-width: $tiny) {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: 1fr;
-
-    // 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-column-gap: $size;
-      }
-    }
-  }
-}
-
-// grid constructor (.grid-2 to .grid-$cols)
-@for $i from 2 through $cols {
-  [class*="grid-#{$i}"] {
-    grid-template-columns: repeat(#{$i}, 1fr);
-  }
-}
-
-// grid items constructor (.col-1 to .col-$cols, .row-1 to .row-$cols)
-@for $i from 1 through $cols {
-  [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 columns or rows
-.col-all {
-  grid-column: 1 / -1;
-}
-
-.row-all {
-  grid-row: 1 / -1;
-}
--- a/sass/_vendor/_reboot.scss
+++ b/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;
-}
--- a/sass/abstracts/_mixins-sass.scss
+++ b/sass/abstracts/_mixins-sass.scss
@ -0,0 +1,40 @@
+// Respond-to mixin
+// ex. @include respond-to("medium-up") {...}
+
+$bp-aliases: (
+  "small": (
+    max-width: #{$small - 1},
+  ),
+  "medium": (
+    max-width: #{$medium - 1},
+  ),
+  "large": (
+    max-width: #{$large - 1},
+  ),
+  "small-up": (
+    min-width: #{$small},
+  ),
+  "medium-up": (
+    min-width: #{$medium},
+  ),
+  "large-up": (
+    min-width: #{$large},
+  ),
+);
+
+// Source : https://www.sitepoint.com/managing-responsive-breakpoints-sass/
+@mixin respond-to($name) {
+  // If the key exists in the map
+  @if map-has-key($bp-aliases, $name) {
+    // Prints a media query based on the value
+    @media #{inspect(map-get($bp-aliases, $name))} {
+      @content;
+    }
+  }
+
+  // If the key doesn't exist in the map
+  @else {
+    @warn "Unfortunately, no value could be retrieved from `#{$name}`. "
+    +"Please make sure it is defined in `$bp-aliases` map.";
+  }
+}
--- a/sass/abstracts/_variables-sass.scss
+++ b/sass/abstracts/_variables-sass.scss
@ -0,0 +1,230 @@
+// ----------------
+// Config Sass et variables
+// ----------------
+
+// ----------------
+// Valeurs de Breakpoints
+// ----------------
+
+// Hypothèse : smartphone portrait/paysage < 576px < gros smartphone paysage + tablette portrait < 992px < tablette paysage < 1330px < laptop et plus
+$breakpoints: (
+  sm: 576px,
+  md: 992px,
+  lg: 1400px,
+) !default;
+
+$small: map-get($breakpoints, sm) !default;
+$medium: map-get($breakpoints, md) !default;
+$large: map-get($breakpoints, lg) !default;
+
+// ----------------
+// Spacers
+// ----------------
+
+$spacer: 1rem;
+$spacers: (
+  "0": 0, // none
+  "1": 1px, // mono
+  "2": 0.125rem, // nano
+  "4": 0.25rem, // micro
+  "8": 0.5rem, // mini
+  "12": 0.75rem, // small
+  "16": 1rem, // medium
+  "20": 1.25rem, // large
+  "24": 1.5rem, // wide
+  "36": 2.25rem, // ultra
+  "auto": auto,
+);
+
+$spacer-none: map-get($spacers, "0");
+$spacer-mono: map-get($spacers, "1");
+$spacer-nano: map-get($spacers, "2");
+$spacer-micro: map-get($spacers, "4");
+$spacer-mini: map-get($spacers, "8");
+$spacer-small: map-get($spacers, "12");
+$spacer-medium: map-get($spacers, "16");
+$spacer-large: map-get($spacers, "20");
+$spacer-wide: map-get($spacers, "24");
+$spacer-ultra: map-get($spacers, "36");
+
+// ----------------
+// Grid layout
+// ----------------
+
+$grid-columns: 6 !default;
+
+$gaps: (
+  "0": 0,
+  "5": 0.313rem,
+  "10": 0.625rem,
+  "16": 1rem,
+  "20": 1.25rem,
+  "36": 2.25rem,
+) !default;
+
+// ----------------
+// Fonts
+// ----------------
+
+// Familles de fonts
+$font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+$font-family-headings: $font-family-base;
+$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+$line-height-base: 1.5;
+
+// Font sizes
+$font-size: (
+  "10": 0.625rem,
+  "11": 0.6875rem,
+  "12": 0.75rem,
+  "14": 0.875rem,
+  "16": 1rem,
+  "18": 1.125rem,
+  "20": 1.25rem,
+  "24": 1.5rem,
+  "30": 1.875rem,
+  "36": 2.25rem,
+  "base": 1rem,
+  "inherit": inherit,
+);
+
+$font-size-html: 100%;
+$font-size-base: 1rem;
+
+// Graisses des Fonts
+$weight-light: 200;
+$weight-book: 300;
+$weight-regular: 400;
+$weight-medium: 500;
+$weight-bold: 700;
+
+// ----------------
+// Couleurs
+// ----------------
+
+// Variables niveaux de gris
+
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$white: #FFFFFF;
+$black: #0F0F0F;
+
+
+// Variables couleurs globales
+
+$body-color: $gray-900;
+$body-bg: $white;
+
+$primary: #6fa939; // Couleur dominante. Elle peut s'appliquer à la fois à des surfaces ou à des contenus.
+$primary-accent: #4e920f; // Modifieur de couleur dominante (survol, bordure)
+$on-primary: $white; // Contenus (texte, lien, icône) affichés par-dessus une couche $primary
+
+$secondary: #008cba; // Couleur d'accentuation. Elle s'applique généralement aux liens, mais peut s'appliquer à la fois à des surfaces ou à des contenus.
+$secondary-accent: #027da7; // Modifieur de couleur d'accentuation (survol, bordure)
+$on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
+
+// Variables couleurs statuts
+
+$success-bg: #dff0d9;
+$success-border: #d6e9c6;
+$success: #3c763d;
+$success-hover: #275c28;
+
+$info-bg: #d9edf7;
+$info-border: #bce8f1;
+$info: #0d7192;
+$info-hover: #005e7d;
+
+$warning-bg: #fcf8e3;
+$warning-border: #faebcc;
+$warning: #8a6d3b;
+$warning-hover: #654f29;
+
+$error-bg: #fff2f2;
+$error-border: #ebccd1;
+$error: #e3224a;
+$error-hover: #a00d10;
+
+
+// Links
+$link-decoration: underline;
+$link-decoration-hover: underline;
+
+// Border radius
+$radius-none: 0;
+$radius-small: 0.5rem;
+$radius-medium: 1rem;
+$radius-large: 20rem;
+$radius-circle: 50%;
+
+// ----------------
+// Liste des propriétés utilitaires (note display: grid se trouve dans Grillade)
+// ----------------
+$utils: ((hidden, display, none),
+  (block, display, block),
+  (inline, display, inline),
+  (inline-block, display, inline-block),
+  (flex, display, flex),
+  (flex-row, flex-direction, row),
+  (flex-col, flex-direction, column),
+  (flex-wrap, flex-wrap, wrap),
+  (flex-no-wrap, flex-wrap, nowrap),
+  (flex-shrink, flex-shrink, 1),
+  (flex-no-shrink, flex-shrink, 0),
+  (flex-grow, flex-grow, 1),
+  (flex-no-grow, flex-grow, 0),
+  (float-left, float, left),
+  (float-right, float, right),
+  (float-none, float, none),
+  (text-bold, font-weight, bold),
+  (text-italic, font-style, italic),
+  (text-uppercase, text-transform, uppercase),
+  (text-lowercase, text-transform, lowercase),
+  (text-smaller, font-size, smaller),
+  (text-larger, font-size, larger),
+  (text-left, text-align, left),
+  (text-center, text-align, center),
+  (text-right, text-align, right),
+  (text-justify, text-align, justify),
+  (text-wrap, overflow-wrap, break-word),
+  (justify-start, justify-content, flex-start),
+  (justify-end, justify-content, flex-end),
+  (justify-center, justify-content, center),
+  (justify-between, justify-content, space-between),
+  (justify-around, justify-content, space-around),
+  (justify-evenly, justify-content, space-evenly),
+  (justify-items-start, justify-items, start),
+  (justify-items-end, justify-items, end),
+  (justify-items-center, justify-items, center),
+  (align-start, align-content, start),
+  (align-end, align-content, end),
+  (align-center, align-content, center),
+  (align-between, align-content, space-between),
+  (align-around, align-content, space-around),
+  (align-evenly, align-content, space-evenly),
+  (align-items-start, align-items, flex-start),
+  (align-items-end, align-items, flex-end),
+  (align-items-center, align-items, center),
+  (place-center, place-content, center),
+  (justify-self-auto, justify-self, auto),
+  (justify-self-start, justify-self, start),
+  (justify-self-end, justify-self, end),
+  (justify-self-center, justify-self, center),
+  (justify-self-stretch, justify-self, stretch),
+  (align-self-auto, align-self, auto),
+  (align-self-start, align-self, flex-start),
+  (align-self-end, align-self, flex-end),
+  (align-self-center, align-self, center),
+  (align-self-stretch, align-self, stretch),
+  (align-top, vertical-align, top),
+  (align-bottom, vertical-align, bottom),
+  (align-middle, vertical-align, middle),
+  (item-first, order, -100),
+  (item-last, order, 100)) !default;
--- a/sass/base/_layout.scss
+++ b/sass/base/_layout.scss
@ -0,0 +1,41 @@
+/* ----------------------------  */
+/* ==Layout classes              */
+/* ----------------------------- */
+
+/* Global container */
+.layout-maxed {
+  display: grid;
+
+  @each $key,
+  $value in $breakpoints {
+    @media (min-width: #{$value}) {
+      grid-template-columns:
+        minmax($spacer-small, 1fr)
+        minmax(auto, $value)
+        minmax($spacer-small, 1fr);
+    }
+  }
+}
+
+/* Center all children */
+.layout-maxed > * {
+  grid-column: 2;
+}
+
+/* Hero box  */
+.layout-hero {
+  grid-column: 1 / -1;
+  display: grid;
+  grid-template-columns: inherit;
+}
+
+.layout-hero > * {
+  grid-column: 2;
+}
+
+/* Hero image */
+.layout-hero-img {
+  grid-column: 1 / -1;
+  justify-self: center;
+  max-width: 100%;
+}
--- a/sass/base/_reset-accessibility.scss
+++ b/sass/base/_reset-accessibility.scss
@ -0,0 +1,65 @@
+/* 
+ * Hidden but not for an assistive technology like a screen reader, Yahoo! method 
+ */
+
+.visually-hidden,
+.sr-only {
+  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;
+}
+
+/*
+ * Disable animations styles when reduced motion is enabled
+ */
+
+@media (prefers-reduced-motion: reduce) {
+  * {
+    animation: none !important;
+    transition: none !important;
+  }
+}
+
+/*
+ * Change the cursor on busy elements in all browsers.
+ */
+
+[aria-busy="true"] {
+  cursor: progress;
+}
+
+/*
+ * Change the cursor on control elements in all browsers.
+ */
+
+[aria-controls] {
+  cursor: pointer;
+}
+
+/*
+ * Change the cursor on disabled, not-editable, or otherwise
+ * inoperable elements in all browsers.
+ */
+
+[aria-disabled="true"],
+[disabled] {
+  cursor: not-allowed;
+}
+
+/*
+ * Change the display on visually hidden accessible elements
+ * in all browsers.
+ */
+
+[aria-hidden="false"][hidden] {
+  display: initial;
+}
+
+[aria-hidden="false"][hidden]:not(:focus) {
+  clip: rect(0, 0, 0, 0);
+  position: absolute;
+}
--- a/sass/base/_reset-base.scss
+++ b/sass/base/_reset-base.scss
@ -0,0 +1,257 @@
+/* ----------------------------- */
+/* ==Reset (base)                */
+/* ----------------------------- */
+
+/*
+ * 1. Switch to border-box model for all elements
+ * 2. Avoid min-width: auto on flex and grid items
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  /* 1 */
+  min-width: 0;
+  /* 2 */
+}
+
+/*
+ * 1. Remove the grey highlight on links in iOS 
+ * 2. Prevent orientation font changes in iOS
+ * 3. Breaks words to prevent overflow in all browsers
+ */
+
+html {
+  font-size: $font-size-html;
+  -webkit-tap-highlight-color: transparent;
+  /* 1 */
+  -webkit-text-size-adjust: 100%;
+  /* 2 */
+  overflow-wrap: break-word;
+  /* 3 */
+}
+
+body {
+  margin: 0;
+  font-family: $font-family-base;
+  font-size: $font-size-base;
+  line-height: $line-height-base;
+  background-color: $body-bg;
+  color: $body-color;
+}
+
+/*
+ * Headings
+ */
+
+h1,
+.h1-like,
+h2,
+.h2-like,
+h3,
+.h3-like,
+h4,
+.h4-like,
+h5,
+.h5-like,
+h6,
+.h6-like {
+  color: $gray-900;
+}
+
+/*
+ * Links
+ */
+
+a {
+  color: $gray-600;
+  text-decoration: $link-decoration;
+}
+
+a:focus,
+a:hover,
+a:active {
+  color: $gray-900;
+  text-decoration: $link-decoration-hover;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none;
+  /* 1 */
+  text-decoration: underline;
+  /* 2 */
+  text-decoration: underline dotted;
+  /* 2 */
+}
+
+/*
+ * Vertical rythm
+ */
+
+h1,
+.h1-like,
+h2,
+.h2-like {
+  margin-top: 0;
+  margin-bottom: $spacer-medium;
+}
+
+p,
+address,
+ol,
+ul,
+dl,
+blockquote,
+pre,
+h3,
+.h3-like,
+h4,
+.h4-like,
+h5,
+.h5-like,
+h6,
+.h6-like,
+dt,
+dd {
+  margin-top: 0;
+  margin-bottom: $spacer-small;
+}
+
+/*
+ * Nested elements
+ */
+
+ol ol,
+ol ul,
+ul ol,
+ul ul,
+li ul,
+li ol,
+nav ul,
+nav ol,
+li p,
+li .p-like {
+  margin-top: 0;
+  margin-bottom: 0;
+}
+
+/*
+ * Lists
+ */
+
+ul,
+ol {
+  padding-left: $spacer-medium;
+}
+
+nav ul,
+nav ol {
+  list-style: none;
+  padding: 0;
+}
+
+/*
+ * Embed content
+ */
+
+audio,
+canvas,
+iframe,
+img,
+svg,
+video {
+  vertical-align: middle;
+}
+
+img,
+table,
+td,
+blockquote,
+pre,
+code,
+input,
+textarea,
+select,
+video,
+svg,
+iframe {
+  max-width: 100%;
+}
+
+iframe,
+img,
+input,
+select,
+textarea {
+  height: auto;
+}
+
+img {
+  border-style: none;
+}
+
+/**
+ * Remove the border on iframes in all browsers
+ */
+
+iframe {
+  border-style: none;
+}
+
+/*
+ * Fill color matching to text color
+ */
+
+svg:not([fill]) {
+  fill: currentColor;
+}
+
+/*
+ * Hide the overflow in IE
+ */
+
+svg:not(:root) {
+  overflow: hidden;
+}
+
+/*
+ * Tables
+ */
+
+table {
+  border-collapse: collapse;
+}
+
+/*
+ * Rulers
+ */
+
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+  border: 0;
+  border-top: 1px solid;
+  margin: $spacer-medium 0;
+  clear: both;
+  color: inherit;
+}
+
+/*
+ * table styles
+ */
+
+table {
+  width: 100%;
+  max-width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+  vertical-align: top;
+  margin-bottom: $spacer-medium;
+}
--- a/sass/base/_reset-forms.scss
+++ b/sass/base/_reset-forms.scss
@ -0,0 +1,224 @@
+/* ----------------------------- */
+/* ==Reset (forms)               */
+/* ----------------------------- */
+
+/*
+ * Remove the tapping delay on clickable elements in all browsers .
+ */
+
+a,
+area,
+button,
+input,
+label,
+select,
+summary,
+textarea,
+[tabindex] {
+  -ms-touch-action: manipulation;
+  touch-action: manipulation;
+}
+
+/*
+ * 1. Change the inconsistent appearance in all browsers.
+ * 2. Add typography inheritance in all browsers.
+ */
+
+button,
+input,
+select,
+textarea {
+  margin: 0;
+  background-color: transparent; /* 1 */
+  color: inherit; /* 1 */
+  font-family: inherit; /* 2 */
+  font-size: inherit; /* 2 */
+  line-height: inherit; /* 2 */
+  letter-spacing: inherit; /* 2 */
+  vertical-align: middle;
+}
+
+/*
+ * Basic User Interface reset
+ */
+
+button,
+input:not([type="radio"]):not([type="checkbox"]),
+select,
+textarea {
+  border: 0;
+}
+
+/*
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre,
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+pre {
+  tab-size: 2;
+  white-space: pre-wrap;
+  line-height: normal;
+  overflow: auto;
+  -ms-overflow-style: scrollbar;
+}
+
+/*
+ * Show overflow in IE/Edge
+ */
+
+button,
+input {
+  overflow: visible;
+}
+
+/* 
+ * Remove the inheritance of text transform in Firefox
+ */
+
+button,
+select {
+  text-transform: none;
+}
+
+/*
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+form,
+fieldset {
+  border: none;
+}
+
+fieldset {
+  margin: 0;
+  padding: $spacer-medium;
+}
+
+legend {
+  display: table;
+  max-width: 100%;
+  padding: 0 $spacer-micro;
+  border: 0;
+  color: inherit;
+  white-space: normal;
+}
+
+label {
+  display: inline-block;
+  cursor: pointer;
+}
+
+textarea {
+  overflow: auto;
+  vertical-align: top;
+  resize: vertical;
+  white-space: pre-wrap;
+}
+
+progress {
+  display: inline-block;
+  width: 100%;
+  vertical-align: baseline;
+}
+
+output {
+  display: inline-block;
+}
+
+summary {
+  display: list-item;
+}
+
+template {
+  display: none;
+}
+
+/* ----------------------------- */
+/* Form oddities                 */
+/* ----------------------------- */
+
+/*
+ * 1. Correct the odd appearance in Chrome, Edge, and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/*
+ * Correct the cursor style of increment and decrement buttons in Safari.
+ */
+
+::-webkit-inner-spin-button,
+::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/*
+ * Correct the text style of placeholders in Chrome, Edge, and Safari.
+ */
+
+::-webkit-input-placeholder {
+  color: inherit;
+  opacity: 0.54;
+}
+
+/*
+ * Remove the inner padding in Chrome, Edge, and Safari on macOS.
+ */
+
+::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/*
+ * 1. Correct the inability to style upload buttons in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/*
+ * Remove the inner border and padding of focus outlines in Firefox.
+ */
+
+::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/*
+ * Restore the focus outline styles unset by the previous rule in Firefox.
+ */
+
+:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/*
+ * Remove the additional :invalid styles in Firefox.
+ */
+
+:-moz-ui-invalid {
+  box-shadow: none;
+}
--- a/sass/base/_reset-print.scss
+++ b/sass/base/_reset-print.scss
@ -89,10 +89,8 @@
  }
  */

-  a[href^="javascript:"],
-  a[href^="#"] {
-    &::after {
-      content: "";
-    }
+  a[href^="javascript:"]::after,
+  a[href^="#"]::after {
+    content: "";
  }
 }
--- a/sass/components/_alerts.scss
+++ b/sass/components/_alerts.scss
@ -1,55 +0,0 @@
-/* ----------------------------- */
-/* ==Alerts                      */
-/* ----------------------------- */
-/* use .alert-- classes for variants */
-
-.alert {
-  padding: $spacer-small $spacer-small;
-  margin-top: 0.75em;
-  margin-bottom: 0;
-  color: $color-base;
-  border-radius: $border-radius;
-  background-color: $color-muted;
-
-  & a {
-    color: inherit;
-    text-decoration: underline;
-  }
-}
-
-.alert {
-  @each $name, $background-color, $color, $border in $variants-list {
-    &--#{$name} {
-      @extend .alert;
-      background-color: $background-color;
-      color: $color;
-      box-shadow: $border;
-    }
-  }
-}
-
-// alert state variants
-.alert {
-  &--small {
-    font-size: $font-size-base - 0.4rem;
-  }
-
-  &--big {
-    font-size: $font-size-base + 0.4rem;
-  }
-
-  &--block {
-    width: 100% !important;
-    display: block;
-  }
-
-  &.disabled,
-  &--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:empty {
-    display: none;
-  }
-}
--- a/sass/components/_arrows.scss
+++ b/sass/components/_arrows.scss
@ -1,34 +0,0 @@
-/* ----------------------------- */
-/* ==Arrows                      */
-/* ----------------------------- */
-/* see https://knacss.com/styleguide.html#arrows */
-
-[class*="icon-arrow--"] {
-  vertical-align: middle;
-
-  &::after {
-    content: "";
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    mask-size: cover;
-    background-color: $arrow-color;
-    line-height: 1;
-  }
-}
-
-.icon-arrow--down::after {
-  mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
-}
-
-.icon-arrow--up::after {
-  mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%208.596%20L%203.523%2014.973%20C%202.464%2015.935%200.495%2013.72%201.505%2012.791%20L%201.505%2012.791%20L%208.494%205.799%20C%209.138%205.212%2010.655%205.193%2011.29%205.799%20L%2011.29%205.799%20L%2018.49%2012.791%20C%2019.557%2013.809%2017.364%2015.882%2016.262%2014.837%20L%2016.262%2014.837%20L%209.96%208.596%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
-}
-
-.icon-arrow--right::after {
-  mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%2011.685%2010.321%20L%205.308%2016.758%20C%204.346%2017.817%206.561%2019.786%207.49%2018.776%20L%207.49%2018.776%20L%2014.482%2011.787%20C%2015.069%2011.142%2015.088%209.626%2014.482%208.991%20L%2014.482%208.991%20L%207.49%201.791%20C%206.472%200.724%204.399%202.916%205.444%204.019%20L%205.444%204.019%20L%2011.685%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
-}
-
-.icon-arrow--left::after {
-  mask-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%208.315%2010.321%20L%2014.692%2016.758%20C%2015.654%2017.817%2013.439%2019.786%2012.51%2018.776%20L%2012.51%2018.776%20L%205.518%2011.787%20C%204.931%2011.142%204.912%209.626%205.518%208.991%20L%205.518%208.991%20L%2012.51%201.791%20C%2013.528%200.724%2015.601%202.916%2014.556%204.019%20L%2014.556%204.019%20L%208.315%2010.321%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
-}
--- a/sass/components/_badges.scss
+++ b/sass/components/_badges.scss
@ -1,51 +0,0 @@
-/* ----------------------------- */
-/* ==Badges                      */
-/* ----------------------------- */
-/* use .badge-- classes for variants */
-
-.badge {
-  display: inline-block;
-  padding: $spacer-tiny;
-  border-radius: 50%;
-  color: $color-base;
-  background-color: $color-muted;
-  line-height: 1;
-
-  &::before {
-    content: "";
-    display: inline-block;
-    vertical-align: middle;
-    padding-top: 100%;
-  }
-}
-
-.badge {
-  @each $name, $background-color, $color, $border in $variants-list {
-    &--#{$name} {
-      @extend .badge;
-      background-color: $background-color;
-      color: $color;
-    }
-  }
-}
-
-// badge state variants
-.badge {
-  &--small {
-    font-size: $font-size-base - 0.4rem;
-  }
-
-  &--big {
-    font-size: $font-size-base + 0.4rem;
-  }
-
-  &.disabled,
-  &--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:empty {
-    display: none;
-  }
-}
--- a/sass/components/_burger.scss
+++ b/sass/components/_burger.scss
@ -0,0 +1,85 @@
+/*
+ * component nav "burger" button
+ */
+/*
+ * HTML template example:
+ * <button class="burger-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
+ * activate it with a JS toggle-class to .is-active
+ * see doc : https: //www.knacss.com/doc.html#buttons
+ */
+
+/*
+ * burger variables (you can change them)
+ */
+
+$burger-color : #333;
+$burger-background : transparent;
+$burger-hover-background : transparent;
+$burger-size : 2.6rem;
+$burger-weight : 5px; // size of stripes
+$burger-padding : 0;
+
+/*
+ * burger button styles
+ */
+
+.burger-button {
+  padding: 0;
+  background-color: transparent;
+  box-shadow: none;
+  outline: 0;
+  border: 0;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+}
+
+.burger-button > * {
+  display: inline-flex;
+  vertical-align: top;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: stretch;
+  height: $burger-size;
+  width: $burger-size;
+  padding: $burger-padding;
+  background-color: $burger-background;
+  background-image: linear-gradient($burger-color, $burger-color);
+  background-position: center;
+  background-repeat: no-repeat;
+  background-origin: content-box;
+  background-size: 100% $burger-weight;
+  transition: .25s;
+  transition-property: transform, background;
+  will-change: transform, background;
+}
+
+.burger-button > *::before,
+.burger-button > *::after {
+  content: "";
+  height: $burger-weight;
+  background: $burger-color;
+  transition: .25s;
+  transition-property: transform, top;
+  will-change: transform, top;
+}
+
+.burger-button:hover > * {
+  background-color: $burger-hover-background;
+}
+
+.burger-button:focus {
+  outline: 0;
+}
+
+.burger-button.is-active > * {
+  background-image: none;
+  justify-content: center;
+}
+
+.burger-button.is-active>*::before {
+  transform: translateY(50%) rotate3d(0, 0, 1, 45deg);
+}
+
+.burger-button.is-active>*::after {
+  transform: translateY(-50%) rotate3d(0, 0, 1, -45deg);
+}
--- a/sass/components/_button.scss
+++ b/sass/components/_button.scss
@ -0,0 +1,71 @@
+/*
+ * basic button component
+ */
+/*
+ * HTML template example:
+ * preferably use <button> for buttons !
+ * use .button or .btn (for structure) and .btn-- (for variants) (see appearance mixin)
+ */
+
+/*
+ * button reset
+ */
+
+%btn {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  padding: $spacer-small $spacer-medium;
+  cursor: pointer;
+  user-select: none;
+  transition: 0.25s;
+  transition-property: box-shadow, background-color, color, border;
+  text-decoration: none;
+  border: none;
+  box-shadow: none;
+}
+
+.btn,
+.button {
+  @extend %btn;
+
+  &:focus {
+    -webkit-tap-highlight-color: transparent;
+  }
+}
+
+// button state variants
+.btn,
+.button {
+  &--small {
+    padding: $spacer-micro-plus $spacer-small;
+    font-size: .8em;
+  }
+
+  &--big {
+    padding: $spacer-medium $spacer-medium;
+    font-size: 1.4em;
+  }
+
+  &--block {
+    width: 100% !important;
+    display: block;
+  }
+
+  &--unstyled {
+    padding: 0;
+    border: none;
+    text-align: left;
+    background: none;
+    border-radius: 0;
+    box-shadow: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+
+    &:focus {
+      box-shadow: none;
+      outline: none;
+    }
+  }
+}
--- a/sass/components/_buttons.scss
+++ b/sass/components/_buttons.scss
@ -1,158 +0,0 @@
-/* ----------------------------- */
-/* ==Buttons                     */
-/* ----------------------------- */
-/* preferably use <button> for buttons !*/
-/* use .btn-- or .button-- classes for variants */
-
-%btn {
-  display: inline-block;
-  padding: $spacer-small $spacer-small-plus;
-  cursor: pointer;
-  user-select: none;
-  transition: 0.25s;
-  transition-property: box-shadow, background-color, color, border;
-  text-align: center;
-  vertical-align: middle;
-  white-space: nowrap;
-  text-decoration: none;
-  color: $color-base;
-  border: none;
-  border-radius: $border-radius;
-  background-color: $color-muted;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: 1;
-}
-
-.btn,
-.button,
-[type="button"],
-button {
-  @extend %btn;
-
-  &:focus {
-    -webkit-tap-highlight-color: transparent;
-  }
-}
-
-.btn,
-.button {
-  @each $name, $background-color, $color, $border in $variants-list {
-    &--#{$name} {
-      @extend %btn;
-      background-color: $background-color;
-      color: $color;
-      box-shadow: $border;
-
-      &:active,
-      &:focus,
-      &:hover {
-        background-color: darken( $background-color, 10% );
-      }
-    }
-  }
-}
-
-// button state variants
-.btn,
-.button {
-  &--small {
-    padding: $spacer-tiny-plus $spacer-small;
-    font-size: .8em;
-  }
-
-  &--big {
-    padding: $spacer-small-plus $spacer-medium;
-    font-size: 1.4em;
-  }
-
-  &--block {
-    width: 100% !important;
-    display: block;
-  }
-
-  &--unstyled {
-    padding: 0;
-    border: none;
-    text-align: left;
-    background: none;
-    border-radius: 0;
-    box-shadow: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-
-    &:focus {
-      box-shadow: none;
-      outline: none;
-    }
-  }
-}
-
-// nav "burger" button
-// activate it with a JS toggle-class to .is-active
-// recommended HTML : <button class="nav-button" type="button" role="button" aria-label="open/close navigation"><i></i></button>
-// see doc : https://knacss.com/styleguide.html#buttons
-.nav-button {
-  padding: 0;
-  background-color: transparent;
-  outline: 0;
-  border: 0;
-  cursor: pointer;
-  -webkit-tap-highlight-color: transparent;
-
-  & > * {
-    display: inline-flex;
-    vertical-align: top;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: stretch;
-    height: $burger-size;
-    width: $burger-size;
-    padding: $burger-padding;
-    background-color: $burger-background;
-    background-image: linear-gradient($burger-color, $burger-color);
-    background-position: center;
-    background-repeat: no-repeat;
-    background-origin: content-box;
-    background-size: 100% $burger-weight;
-    transition: .25s;
-    transition-property: transform, background;
-    will-change: transform, background;
-
-    &::before,
-    &::after {
-      content: "";
-      height: $burger-weight;
-      background: $burger-color;
-      transition: .25s;
-      transition-property: transform, top;
-      will-change: transform, top;
-    }
-  }
-
-  &:hover {
-    & > * {
-      background-color: $burger-hover-background;
-    }
-  }
-
-  &:focus {
-    outline: 0;
-  }
-
-  &.is-active {
-    & > * {
-      background-image: none;
-      justify-content: center;
-
-      &::before {
-        transform: translateY(50%) rotate3d(0,0,1,45deg);
-      }
-
-      &::after {
-        transform: translateY(-50%) rotate3d(0,0,1,-45deg);
-      }
-    }
-  }
-}
--- a/sass/components/_checkbox.scss
+++ b/sass/components/_checkbox.scss
@ -1,119 +1,58 @@
-/* ----------------------------- */
-/* ==Checkbox, radio, switch     */
-/* ----------------------------- */
-/* use .checkbox class on input type=checkbox */
-/* recommended HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
-/* use .radio class on input type=radio */
-/* recommended HTML : <input type="radio" class="radio" name="radio" id="r1"><label for="r1">Click here</label> */
-/* use .switch class on input type=checkbox */
-// <input type="checkbox" class="switch" id="switch"><label for="switch" class="label">slide to unlock</label>
+/*
+ * component checkbox
+ */
+/*
+ * HTML template example:
+ * <input type="checkbox" class="checkbox" id="c1">
+ * <label for="c1">click here</label>
+ */
+
+/*
+ * checkbox variables (you can change them)
+ */
+
+$checkbox-color: $white;
+$checkbox-background: $primary;
+$checkbox-size: 2rem;
+$checkbox-border-radius: 4px;
+
+/*
+ * checkbox styles
+ */

-// common styles
 .checkbox {
  border-radius: $checkbox-border-radius;
 }

-.switch {
-  border-radius: $switch-border-radius;
-}
-
-.radio {
-  border-radius: 50%;
-}
-
-.switch,
-.checkbox,
-.radio {
-  appearance: none;
-  vertical-align: text-bottom;
-  outline: 0;
-  cursor: pointer;
-
-  & ~ label {
-    cursor: pointer;
-  }
-
-  &::-ms-check {
-    display: none; // unstyle IE checkboxes
-  }
-}
-
-// switch styling
-.switch {
-  width: $switch-size *2;
-  height: $switch-size;
-  line-height: $switch-size;
-  font-size: 70%;
-  box-shadow: inset -#{$switch-size} 0 0 $switch-background,
-  inset 0 0 0 1px $switch-background;
-  transition: box-shadow .15s;
-  background-color: $switch-color;
-  &::before,
-  &::after {
-    font-weight: bold;
-    color: $switch-color;
-  }
-  &::before {
-    content: "✕";
-    float: right;
-    margin-right: $switch-size /3;
-  }
-  &:checked {
-    box-shadow: inset #{$switch-size} 0 0 $color-success,
-    inset 0 0 0 1px $color-success;
-    &::before {
-      content: "✓";
-      float: left;
-      margin-left: $switch-size /3;
-    }
-  }
-}
-
-// checkbox styling
 .checkbox {
+  -webkit-appearance: none;
+  appearance: none;
  width: $checkbox-size;
  height: $checkbox-size;
-  box-shadow: inset 0 0 0 1px $checkbox-background;
+  vertical-align: text-bottom;
+  box-shadow: inset 0 0 0 1px $primary;
  background-color: $checkbox-color;
-  transition: background-color .15s;
-  &:checked {
-    $red: red($checkbox-color);
-    $green: green($checkbox-color);
-    $blue: blue($checkbox-color);
-    $rgb: rgb($red, $green, $blue);
-    $slice: str-slice(ie-hex-str($rgb), 4);
-    $first: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0A%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220%22%20y%3D%220%22%20viewBox%3D%220%200%208%208%22%20enable-background%3D%22new%200%200%208%208%22%20xml%3Aspace%3D%22preserve%22%3E%20%3Cpath%20fill%3D%22%23";
-    $last: "%22%20d%3D%22M6.4%2C1L5.7%2C1.7L2.9%2C4.5L2.1%2C3.7L1.4%2C3L0%2C4.4l0.7%2C0.7l1.5%2C1.5l0.7%2C0.7l0.7-0.7l3.5-3.5l0.7-0.7L6.4%2C1L6.4%2C1z%22%20%2F%3E%0A%3C%2Fsvg%3E";
-    $combo: "#{$first}#{$slice}#{$last}";
-    background-image: url($combo);
-    background-size: 60% 60%;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-color: $checkbox-background;
-  }
+  transition: background-color 0.15s;
+  cursor: pointer;
 }

-// radio styling
-.radio {
-  width: $checkbox-size;
-  height: $checkbox-size;
-  background-size: 0% 0%;
-  transition: background-size .15s;
-  box-shadow: inset 0 0 0 1px $radio-color;
-  background-color: $radio-background;
-  &:checked {
-    $red: red($radio-color);
-    $green: green($radio-color);
-    $blue: blue($radio-color);
-    $rgb: rgb($red, $green, $blue);
-    $slice: str-slice(ie-hex-str($rgb), 4);
-    $first: "data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%22100%22%20height%3D%22100%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23";
-    $last: "%22/%3E%3C/svg%3E";
-    $combo: "#{$first}#{$slice}#{$last}";
-    background-image: url($combo);
-    background-size: 90% 90%;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-color: $radio-background;
-  }
-}
+.checkbox + label {
+  cursor: pointer;
+}
+
+.checkbox:disabled {
+  opacity: 0.6;
+}
+
+.checkbox:disabled + label {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.checkbox:checked {
+  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=");
+  background-size: 60% 60%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: $checkbox-background;
+}
--- a/sass/components/_forms.scss
+++ b/sass/components/_forms.scss
@ -1,114 +0,0 @@
-/* ----------------------------- */
-/* ==Forms                       */
-/* ----------------------------- */
-/* 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"],
-[type="datetime-local"],
-[type="email"],
-[type="month"],
-[type="number"],
-[type="password"],
-[type="search"],
-[type="submit"],
-[type="tel"],
-[type="text"],
-[type="time"],
-[type="url"],
-[type="week"],
-select,
-textarea {
-  font-family: inherit;
-  font-size: inherit;
-  border: 0;
-  box-shadow: 0 0 0 1px $forms-color inset;
-  color: $color-base;
-  vertical-align: middle;
-  padding: $spacer-tiny $spacer-small;
-  margin: 0;
-  transition: 0.25s;
-  transition-property: box-shadow, background-color, color, border;
-  appearance: none;
-}
-
-[type="submit"] {
-  background-color: $forms-color;
-  color: $white;
-  cursor: pointer;
-}
-
-input[readonly] {
-  background-color: $color-muted;
-}
-
-select {
-  padding-right: 2rem;
-  border-radius: $border-radius;
-  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
-  background-position: right .6rem center;
-  background-repeat: no-repeat;
-  background-size: 1.2rem;
-}
-
-/* hiding IE11 arrow */
-select::-ms-expand {
-  display: none;
-}
-
-textarea {
-  min-height: 5em;
-  vertical-align: top;
-  resize: vertical;
-  white-space: pre-wrap;
-}
-
-/* 'x' appears on right of search input when text is entered. This removes it */
-[type="search"] {
-  &::-webkit-search-decoration,
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-results-button,
-  &::-webkit-search-results-decoration {
-    display: none;
-  }
-}
-
-::-webkit-input-placeholder {
-  color: #777;
-}
-
-input:-moz-placeholder,
-textarea:-moz-placeholder {
-  color: #777;
-}
-
-input::placeholder,
-textarea::placeholder {
-  color: #777;
-}
-
-progress {
-  width: 100%;
-  vertical-align: middle;
-}
--- a/sass/components/_media.scss
+++ b/sass/components/_media.scss
@ -1,26 +0,0 @@
-/* ----------------------------- */
-/* ==Media object                */
-/* ----------------------------- */
-/* recommended HTML : <div class="media"><img class="media-figure"><div class="media-content"></div></div> */
-/* see http://codepen.io/raphaelgoetter/pen/KMWWwj */
-
-@media (min-width: $tiny) {
-  .media {
-    display: flex;
-    align-items: flex-start;
-
-    &-content {
-      flex: 1 1 0%;
-    }
-
-    // vertical align image
-    &-figure--center {
-      align-self: center;
-    }
-
-    // reverse variant
-    &--reverse {
-      flex-direction: row-reverse;
-    }
-  }
-}
--- a/sass/components/_quote.scss
+++ b/sass/components/_quote.scss
@ -0,0 +1,60 @@
+/*
+ * component quote
+ */
+/*
+ * HTML template example:
+ * <blockquote>
+ *   <p>Lorem Elsass Ipsum mitt picon bière</p>
+ * </blockquote>
+ */
+
+/*
+ * quotes variables (you can change them)
+ */
+
+$blockquote-color: #454d5d;
+
+/*
+ * quotes styles
+ */
+
+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: $blockquote-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»" "“" "”";
+  }
+}
--- a/sass/components/_radio.scss
+++ b/sass/components/_radio.scss
@ -0,0 +1,58 @@
+/*
+ * component radio
+ */
+/*
+ * HTML template example:
+ * <input type="radio" class="radio" name="radio" id="r1">
+ * <label for="r1">Click here</label>
+ */
+
+/*
+ * radio variables (you can change them)
+ */
+
+$radio-color: $primary;
+$radio-background: $white;
+$radio-size: 2rem;
+$radio-border-radius: 50%;
+
+/*
+ * radio styles
+ */
+
+.radio {
+  border-radius: $radio-border-radius;
+}
+
+.radio {
+  -webkit-appearance: none;
+  appearance: none;
+  width: $radio-size;
+  height: $radio-size;
+  vertical-align: text-bottom;
+  box-shadow: inset 0 0 0 1px $primary;
+  background-color: $radio-background;
+  transition: background-size 0.15s;
+  cursor: pointer;
+}
+
+.radio + label {
+  cursor: pointer;
+}
+
+.radio:disabled {
+  opacity: 0.6;
+}
+
+.radio:disabled + label {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.radio:checked {
+  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20version%3D%221.1%22%20width%3D%2240%22%20height%3D%2240%22%0AviewBox%3D%220%200%2080%2080%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2240%22%20r%3D%2224%22%20style%3D%22fill%3A%23ffffff%22/%3E%3C/svg%3E");
+  background-size: 70% 70%;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-color: $primary;
+}
--- a/sass/components/_select.scss
+++ b/sass/components/_select.scss
@ -0,0 +1,19 @@
+/*
+ * basic select component
+ */
+/*
+HTML template example:
+<select>
+  <option value="salade">salade</option>
+  <option value="tomate">tomate</option>
+  <option value="oignons">oignons</option>
+</select>
+ */
+
+select {
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20standalone%3D%22no%22%3F%3E%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20style%3D%22isolation%3Aisolate%22%20viewBox%3D%220%200%2020%2020%22%20width%3D%2220%22%20height%3D%2220%22%3E%3Cpath%20d%3D%22%20M%209.96%2011.966%20L%203.523%205.589%20C%202.464%204.627%200.495%206.842%201.505%207.771%20L%201.505%207.771%20L%208.494%2014.763%20C%209.138%2015.35%2010.655%2015.369%2011.29%2014.763%20L%2011.29%2014.763%20L%2018.49%207.771%20C%2019.557%206.752%2017.364%204.68%2016.262%205.725%20L%2016.262%205.725%20L%209.96%2011.966%20Z%20%22%20fill%3D%22inherit%22/%3E%3C/svg%3E");
+  background-position: right 0.8rem center;
+  background-repeat: no-repeat;
+  background-size: 1.2rem;
+}
--- a/sass/components/_skip-links.scss
+++ b/sass/components/_skip-links.scss
@ -1,25 +0,0 @@
-/* ----------------------------- */
-/* ==skip links                  */
-/* ----------------------------- */
-/* see https://www.alsacreations.com/article/lire/572-Les-liens-d-evitement.html */
-
-/* styling skip links */
-.skip-links {
-  position: absolute;
-
-  & a {
-    position: absolute;
-    overflow: hidden;
-    clip: rect(1px, 1px, 1px, 1px);
-    padding: 0.5em;
-    background: black;
-    color: white;
-    text-decoration: none;
-
-    &:focus {
-      position: static;
-      overflow: visible;
-      clip: auto;
-    }
-  }
-}
--- a/sass/components/_tables.scss
+++ b/sass/components/_tables.scss
@ -1,52 +0,0 @@
-/* ----------------------------- */
-/* ==Tables                      */
-/* ----------------------------- */
-
-table,
-.table {
-  width: 100%;
-  max-width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  vertical-align: top;
-  margin-bottom: $spacer-medium;
-}
-
-.table {
-  display: table;
-  border: 1px solid $table-border;
-  background: $table-background;
-
-  &--zebra {
-    & tbody tr:nth-child(odd) {
-      background: $gray-200;
-    }
-  }
-
-  & caption {
-    caption-side: bottom;
-    padding: $spacer-small;
-    color: $table-caption-color;
-    font-style: italic;
-    text-align: right;
-  }
-
-  & td,
-  & th {
-    padding: 0.3rem 0.6rem;
-    min-width: $spacer-medium;
-    vertical-align: top;
-    border: 1px $table-border dotted;
-    text-align: left;
-    cursor: default;
-  }
-
-  & thead {
-    color: $table-head-color;
-    background: $table-head-background;
-  }
-}
-
-.table--auto {
-  table-layout: auto;
-}
--- a/sass/components/_tabs.scss
+++ b/sass/components/_tabs.scss
@ -1,52 +0,0 @@
-/* ----------------------------- */
-/* ==Tabs                        */
-/* ----------------------------- */
-/* see example on https://knacss.com/styleguide.html#tabs */
-/* NOTE : tabs need JavaScript to be activated */
-
-.tabs-menu {
-  border-bottom: 2px solid $tabs-border;
-
-  &-link {
-    display: block;
-    margin-bottom: -2px;
-    padding: $spacer-tiny $spacer-medium-plus;
-    border-bottom: 4px solid transparent;
-    color: $tabs-color;
-    background: $tabs-background;
-    text-decoration: none;
-    border-radius: $tabs-border-radius $tabs-border-radius 0 0;
-    transition: .25s;
-    transition-property: color, border, background-color;
-
-    &.is-active {
-      border-bottom-color: $tabs-active-border;
-      color: $tabs-active-color;
-      background: $tabs-active-background;
-      outline: 0;
-    }
-
-    &:focus {
-      border-bottom-color: $tabs-active-border;
-      color: $tabs-active-color;
-      outline: 0;
-    }
-
-    @media (min-width: $small) {
-      display: inline-block;
-    }
-  }
-}
-
-.tabs-content-item {
-  padding-top: $spacer-small;
-
-  &[aria-hidden="true"] {
-    visibility: hidden;
-    @extend .visually-hidden;
-  }
-
-  &[aria-hidden="false"] {
-    visibility: visible;
-  }
-}
--- a/sass/components/_tags.scss
+++ b/sass/components/_tags.scss
@ -1,52 +0,0 @@
-/* ----------------------------- */
-/* ==Tags                      */
-/* ----------------------------- */
-/* use .tag-- classes for variants */
-
-.tag {
-  display: inline-block;
-  padding: 3px $spacer-tiny;
-  vertical-align: baseline;
-  white-space: nowrap;
-  color: $color-base;
-  border-radius: $border-radius;
-  background-color: $color-muted;
-  line-height: 1;
-}
-
-.tag {
-  @each $name, $background-color, $color, $border in $variants-list {
-    &--#{$name} {
-      @extend .tag;
-      background-color: $background-color;
-      color: $color;
-      box-shadow: $border;
-    }
-  }
-}
-
-// tag state variants
-.tag {
-  &--small {
-    font-size: $font-size-base - 0.4rem;
-  }
-
-  &--big {
-    font-size: $font-size-base + 0.4rem;
-  }
-
-  &--block {
-    width: 100% !important;
-    display: block;
-  }
-
-  &.disabled,
-  &--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  &:empty {
-    display: none;
-  }
-}
--- a/sass/knacss.scss
+++ b/sass/knacss.scss
@ -1,64 +1,32 @@
 /*!
-* www.KNACSS.com v7.1.3 (february, 12 2020) @author: Alsacreations, Raphael Goetter
+* KNACSS Reborn: Just keep it simple!
+* @author: Alsacreations
+* v8.2 2022/01
 * Licence WTFPL http://www.wtfpl.net/
 */

-/* ----------------------------- */
-/* ==Table Of Content            */
-/* ----------------------------- */
+// IMPORTANT : Seuls les fichiers "Noyau" et "Utilitaires" sont importés par défaut. Ajoutez les fichiers de composants si nécessaires dans votre projet.

-/*
-1- Reboot (basic reset)
-2- Libraries  :
-  - Base
-  - Print
-  - Layout (alignment, modules, positionning)
-  - Utilities (width and spacers helpers)
-  - Responsive helpers
-  - WordPress reset (disabled by default)
-  - Grillade (Grid System)
-3- Components :
-  - Media object
-  - Skip Links for accessibility
-  - Tables
-  - Forms
-  - Buttons
-  - Checkbox
-  - Tabs
-  - Tags
-  - Badges
-  - Alerts
-*/
+// NOYAU
+@import "abstracts/variables-sass";
+@import "abstracts/mixins-sass";

-@import "_vendor/reboot"; // Bootstrap reboot (basic reset) (CSS file renamed and imported as if it was a partial because of libsass)
+@import "base/reset-base";
+@import "base/reset-accessibility";
+@import "base/reset-forms";
+@import "base/reset-print";
+@import "base/layout";

-// WARNING : you should comment the following @import (variables)
-// and move variables file from knacss folder to your own project folder!
-@import "_config/variables";
+// UTILITAIRES
+@import "utils/utils-global";
+@import "utils/utils-font-sizes";
+@import "utils/utils-spacers";
+@import "utils/grillade";

-@import "_config/mixins";
-
-// Core Libraries
-@import "_library/base";         // basic styles
-@import "_library/print";        // print quick reset
-@import "_library/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"
-// 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
-
-// Components
-@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/badges";     // badges styles
-@import "components/alerts";     // alerts styles
+// COMPOSANTS (à ajouter au besoin)
+// @import "components/button";
+// @import "components/burger";
+// @import "components/checkbox";
+// @import "components/radio";
+// @import "components/select";
+// @import "components/quote";
--- a/sass/utils/_utils-font-sizes.scss
+++ b/sass/utils/_utils-font-sizes.scss
@ -0,0 +1,19 @@
+/* Font sizes utility classes */
+
+// loop for each font-size
+@each $key, $value in $font-size {
+  .text-#{$key} {
+    font-size: $value;
+  }
+}
+
+// loop for each breakpoint
+@each $key, $value in $font-size {
+  @each $bp, $bpv in $breakpoints {
+    @media (min-width: #{$bpv}) {
+      .#{$bp}\:text-#{$key} {
+        font-size: $value;
+      }
+    }
+  }
+}
--- a/sass/utils/_utils-global.scss
+++ b/sass/utils/_utils-global.scss
@ -0,0 +1,66 @@
+/* 
+ * Global utility classes 
+ */
+
+@each $class, $prop, $value in $utils {
+  .#{$class} {
+    #{$prop}: #{$value};
+  }
+}
+
+// loop for each breakpoint
+@each $class, $prop, $value in $utils {
+  @each $bp, $bpv in $breakpoints {
+    @media (min-width: #{$bpv}) {
+      .#{$bp}\:#{$class} {
+        #{$prop}: #{$value};
+      }
+    }
+  }
+}
+
+// multi-properties utils
+.is-unstyled {
+  list-style: none;
+  padding-left: 0;
+}
+.is-disabled,
+[disabled] {
+  opacity: 0.6;
+  cursor: not-allowed !important;
+  filter: grayscale(1);
+}
+.text-normal {
+  font-weight: normal;
+  font-style: normal;
+  text-transform: none;
+}
+
+// loop for each breakpoint
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    .#{$bp}\: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;
+    }
+    .#{$bp}\:is-unstyled {
+      list-style: none;
+      padding-left: 0;
+    }
+    .#{$bp}\:is-disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
+      filter: grayscale(1);
+    }
+    .#{$bp}\:text-normal {
+      font-weight: normal;
+      font-style: normal;
+      text-transform: none;
+    }
+  }
+}
--- a/sass/utils/_utils-spacers.scss
+++ b/sass/utils/_utils-spacers.scss
@ -0,0 +1,134 @@
+/* Spacers utility classes */
+
+// loop for each spacer
+@each $key,
+$value in $spacers {
+
+  .p-#{$key} {
+    padding: $value;
+  }
+
+  .pt-#{$key} {
+    padding-top: $value;
+  }
+
+  .pr-#{$key} {
+    padding-right: $value;
+  }
+
+  .pb-#{$key} {
+    padding-bottom: $value;
+  }
+
+  .pl-#{$key} {
+    padding-left: $value;
+  }
+
+  .px-#{$key} {
+    padding-left: $value;
+    padding-right: $value;
+  }
+
+  .py-#{$key} {
+    padding-top: $value;
+    padding-bottom: $value;
+  }
+
+  .m-#{$key} {
+    margin: $value;
+  }
+
+  .mt-#{$key} {
+    margin-top: $value;
+  }
+
+  .mr-#{$key} {
+    margin-right: $value;
+  }
+
+  .mb-#{$key} {
+    margin-bottom: $value;
+  }
+
+  .ml-#{$key} {
+    margin-left: $value;
+  }
+
+  .mx-#{$key} {
+    margin-left: $value;
+    margin-right: $value;
+  }
+
+  .my-#{$key} {
+    margin-top: $value;
+    margin-bottom: $value;
+  }
+
+  // loop for each breakpoint
+  @each $bp,
+  $bpv in $breakpoints {
+
+    @media (min-width: #{$bpv}) {
+      .#{$bp}\:p-#{$key} {
+        padding: $value;
+      }
+
+      .#{$bp}\:pt-#{$key} {
+        padding-top: $value;
+      }
+
+      .#{$bp}\:pr-#{$key} {
+        padding-right: $value;
+      }
+
+      .#{$bp}\:pb-#{$key} {
+        padding-bottom: $value;
+      }
+
+      .#{$bp}\:pl-#{$key} {
+        padding-left: $value;
+      }
+
+      .#{$bp}\:px-#{$key} {
+        padding-left: $value;
+        padding-right: $value;
+      }
+
+      .#{$bp}\:py-#{$key} {
+        padding-top: $value;
+        padding-bottom: $value;
+      }
+
+      .#{$bp}\:m-#{$key} {
+        margin: $value;
+      }
+
+      .#{$bp}\:mt-#{$key} {
+        margin-top: $value;
+      }
+
+      .#{$bp}\:mr-#{$key} {
+        margin-right: $value;
+      }
+
+      .#{$bp}\:mb-#{$key} {
+        margin-bottom: $value;
+      }
+
+      .#{$bp}\:ml-#{$key} {
+        margin-left: $value;
+      }
+
+      .#{$bp}\:mx-#{$key} {
+        margin-left: $value;
+        margin-right: $value;
+      }
+
+      .#{$bp}\:my-#{$key} {
+        margin-top: $value;
+        margin-bottom: $value;
+      }
+    }
+  }
+
+}
--- a/sass/utils/grillade.scss
+++ b/sass/utils/grillade.scss
@ -0,0 +1,152 @@
+/* -------------------------------------------------- */
+/* ==Grillade : système de micro-grille  de KNACSS   */
+/* ------------------------------------------------ */
+// Grillade est directement inspiré tailwindcss.com et de ses classes utilitaires
+
+// Les variables ci-dessous ne sont appliquées que si elles n'ont pas été renseignées
+// dans le fichiers de variables de KNACSS.
+
+@if variable_exists(grid-columns) {
+  $grid-columns: $grid-columns !global;
+} @else {
+  $grid-columns: 6 !global;
+}
+
+@if variable_exists(gaps) {
+  $gaps: $gaps !global;
+} @else {
+  $gaps: (
+    "0": 0,
+    "5": 0.313rem,
+    "10": 0.625rem,
+    "16": 1rem,
+    "20": 1.25rem,
+    "36": 2.25rem,
+  ) !global;
+}
+
+@if variable_exists(breakpoints) {
+  $breakpoints: $breakpoints !global;
+} @else {
+  $breakpoints: (
+    sm: 576px,
+    md: 992px,
+    lg: 1330px,
+  ) !global;
+}
+
+.grid {
+  display: grid;
+}
+// grid class for each breakpoint
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    .#{$bp}\:grid {
+      display: grid;
+    }
+  }
+}
+
+/* grid-template-columns initialisation */
+@for $i from 1 through $grid-columns {
+  .grid-cols-#{$i} {
+    grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+  }
+}
+
+/* grid-template-columns au sein des breakpoints */
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    @for $i from 1 through $grid-columns {
+      .#{$bp}\:grid-cols-#{$i} {
+        grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
+      }
+    }
+  }
+}
+
+/* gap initialisation */
+@each $key, $value in $gaps {
+  .gap-#{$key} {
+    gap: $value;
+  }
+  .gap-x-#{$key} {
+    column-gap: $value;
+  }
+  .gap-y-#{$key} {
+    row-gap: $value;
+  }
+}
+
+/* gap au sein des breakpoints */
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    @each $key, $value in $gaps {
+      .#{$bp}\:gap-#{$key} {
+        gap: $value;
+      }
+      .#{$bp}\:gap-x-#{$key} {
+        column-gap: $value;
+      }
+      .#{$bp}\:gap-y-#{$key} {
+        row-gap: $value;
+      }
+    }
+  }
+}
+
+/* grid-items initialisation */
+@for $i from 1 through $grid-columns {
+  .col-start-#{$i} {
+    grid-column-start: #{$i};
+  }
+  .col-end-#{$i} {
+    grid-column-end: #{$i};
+  }
+  .col-span-#{$i} {
+    grid-column: span #{$i} / span #{$i};
+  }
+  .col-span-full {
+    grid-column: 1 / -1;
+  }
+  .row-start-#{$i} {
+    grid-row-start: #{$i};
+  }
+  .row-end-#{$i} {
+    grid-row-end: #{$i};
+  }
+  .row-span-#{$i} {
+    grid-row: span #{$i} / span #{$i};
+  }
+}
+
+/* grid-items au sein des breakpoints */
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    @for $i from 1 through $grid-columns {
+      // loop for each breakpoint
+
+      .#{$bp}\:col-start-#{$i} {
+        grid-column-start: #{$i};
+      }
+      .#{$bp}\:col-end-#{$i} {
+        grid-column-end: #{$i};
+      }
+      .#{$bp}\:col-span-#{$i} {
+        grid-column: span #{$i} / span #{$i};
+      }
+      .#{$bp}\:col-span-full {
+        grid-column: 1 / -1;
+      }
+      .#{$bp}\:row-start-#{$i} {
+        grid-row-start: #{$i};
+      }
+      .#{$bp}\:row-end-#{$i} {
+        grid-row-end: #{$i};
+      }
+      .#{$bp}\:row-span-#{$i} {
+        grid-row: span #{$i} / span #{$i};
+      }
+    }
+  }
+}
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
Raphael Goetter	87b3d7c784	Update README.md	2023-01-09 19:06:15 +01:00
Raphael Goetter	a6163e34fc	Update README.md	2023-01-09 19:06:01 +01:00
Raphaël Goetter	cd2b9e87da	Fix font-size: bigger; to larger	2022-05-24 16:51:04 +02:00
Raphael Goetter	fc749045b9	Merge pull request #344 from swiing/patch-1 supprime une dépendance inutilisée	2022-02-25 08:06:11 +01:00
swiing	1c392fb2d8	supprime une dépendance inutilisée	2022-02-24 16:16:45 +01:00
swiing	dc2331ded2	supprime une dépendance inutilisée	2022-02-24 16:10:04 +01:00
Raphaël Goetter	6e13e8bc48	corrections sur radio / checkbox	2022-01-24 17:03:36 +01:00
Raphaël Goetter	d9833fe12c	refonte des variables d'espacement	2022-01-19 17:10:53 +01:00
Raphaël Goetter	59f02b6c57	refonte des variables de couleurs	2022-01-05 17:34:13 +01:00
Raphaël Goetter	8e95e4cdd9	Suppression min-height: 0 par défaut	2021-07-09 14:12:15 +02:00
Raphaël Goetter	cddc2d472a	Correction valeur "inherit"	2021-05-18 23:17:17 +02:00
Raphaël Goetter	4d8ce9b36e	taille de base 100% (et non plus 62.5%) et corrections Grillade	2021-04-26 10:52:10 +02:00
Raphaël Goetter	b9f1adc09a	gouttières de Grillade	2021-03-11 10:21:11 +01:00
Raphaël Goetter	ad3b8c2081	Valeurs de breakpoints	2021-03-11 10:06:39 +01:00
Raphaël Goetter	ca247b2a5d	ajout des utilitaires font-sizes	2021-03-11 08:20:15 +01:00
Raphaël Goetter	4993abacca	disclaimer : encore en test	2021-03-11 07:45:06 +01:00
Raphaël Goetter	d125d2a407	Priorité des breakpoints dans les classes utilitaires #338 Priorité des breakpoints dans les classes utilitaires #338	2021-03-05 20:17:01 +01:00
Raphaël Goetter	19362135c4	https	2021-01-25 13:53:06 +01:00
Raphaël Goetter	0fb306a79c	Doc	2021-01-25 13:52:11 +01:00
Raphaël Goetter	c2eb2707a7	v8.0.2	2021-01-25 13:45:35 +01:00
Raphaël Goetter	c9ce349b9f	typo	2021-01-25 13:27:27 +01:00
Raphaël Goetter	c718dd4992	typo	2021-01-25 13:24:51 +01:00
Raphaël Goetter	35677cb139	infos du package	2021-01-25 13:22:43 +01:00
Raphaël Goetter	dcf44e2f24	Merge branch 'v8' # Conflicts: # .sass-lint.yml # README.md # bower.json # changelog.md # css/grillade-flex.css # css/grillade-grid.css # css/knacss-unminified.css # css/knacss.css # package-lock.json # package.json # sass/abstracts/_mixins.scss # sass/abstracts/_variables.scss # sass/base/_responsive.scss # sass/base/_utilities.scss # sass/base/_wordpress.scss # sass/base/grillade-flex.scss # sass/base/grillade-grid.scss # sass/components/_alerts.scss # sass/components/_arrows.scss # sass/components/_badges.scss # sass/components/_buttons.scss # sass/components/_forms.scss # sass/components/_media.scss # sass/components/_skip-links.scss # sass/components/_tables.scss # sass/components/_tabs.scss # sass/components/_tags.scss # sass/knacss.scss # yarn.lock	2021-01-25 12:34:49 +01:00
Raphaël Goetter	baa2977073	Modulaire	2021-01-25 12:29:56 +01:00
Raphaël Goetter	e3e57665a0	Transfert des fichiers Reborn vers branche v8	2021-01-25 12:28:12 +01:00
Raphaël Goetter	f14b1294cf	Changelog Reborn	2021-01-25 12:22:26 +01:00
Raphaël Goetter	b75ca3d471	v8 = Reborn	2021-01-25 12:20:21 +01:00
Raphaël Goetter	3f43b046e6	mise à jour	2021-01-25 12:15:24 +01:00
Raphaël Goetter	f5b8183ee3	Merge branch 'v8' # Conflicts: # README.md # changelog.md # css/knacss-unminified.css # css/knacss.css # package-lock.json # package.json	2021-01-25 12:12:03 +01:00
Raphael Goetter	bed7ee67fd	Merge pull request #335 from alsacreations/v6 Update README.md	2021-01-25 12:07:38 +01:00
Raphael Goetter	b494626529	Merge pull request #334 from alsacreations/v7 Update README.md	2021-01-25 12:07:20 +01:00
Raphael Goetter	3c51500720	Update README.md	2021-01-25 12:05:58 +01:00
Raphael Goetter	1254a0aeef	Update README.md	2021-01-25 12:05:35 +01:00
Raphaël Goetter	d73b9bfb2b	Doc et liens à jour	2021-01-25 12:02:19 +01:00
Raphaël Goetter	e113db976e	LONG LIVE KNACSS REBORN!	2020-11-26 08:48:55 +01:00
Raphaël Goetter	fa7b0853e7	Long live KNACSS Reborn	2020-11-26 08:46:55 +01:00
Raphael	bb849b884d	Merge branch 'v8' of https://github.com/alsacreations/KNACSS into v8 # Conflicts: # package-lock.json	2019-10-25 10:07:43 +02:00
Rodolphe	d7214f2fdd	Update package	2019-10-25 10:05:49 +02:00
Rodolphe	1e21f9f3d2	Update package	2019-08-28 10:24:32 +02:00
Raphael	e6dcf97f60	mise à jour du support à `>0.25% not op_mini all`	2019-08-16 14:32:15 +02:00
Raphael	4e4f0247b7	plus de "latest" ou presque dans package.json	2019-08-14 16:03:07 +02:00
Raphael	86ddd7398c	visually-hidden devient un mixin	2019-08-14 12:30:26 +02:00
Raphael	65711b271f	modification de l'ordre d'import des fichiers utilitaires	2019-08-14 11:27:03 +02:00
Raphael	47f025409b	suppression de browserslist dans gulpfile	2019-08-12 17:00:21 +02:00
Raphael	7249492817	correction typo dans le chemin de grillade	2019-08-12 16:58:11 +02:00
Raphael	debcf103f8	gulp 4.0.0 dans package.json	2019-08-12 16:55:38 +02:00
Raphael	0a7c069bbf	aucune idée	2019-08-12 16:53:14 +02:00
Rodolphe	409ffb49e3	Gulpfile jump to v4	2019-08-12 16:48:08 +02:00
Raphael	e71db133ec	@import interdit dans un @if...	2019-07-19 11:14:35 +02:00
Raphael	75644329fd	renommage des classes `grid-` en `grillade-` pour éviter tout conflit	2019-07-19 10:46:41 +02:00
Raphael	271ff3acd5	variable $utilities	2019-07-19 10:37:17 +02:00
Raphael	3182e3088f	variable $wordpress	2019-07-19 10:27:01 +02:00
Raphael	18e7b3698e	fichiers gulpés	2019-07-17 17:32:39 +02:00
Raphael	96437493cf	browserslist devenu .browserslistrc	2019-07-17 16:21:59 +02:00
Raphael	57b13b909b	mise à jour du reset (suppression reset vendor)	2019-07-17 15:58:20 +02:00
Raphael	ab7adc8a14	mise à jour du reset (partie 2)	2019-07-17 12:24:47 +02:00
Raphael	f4c8ef9c37	mise à jour du reset (partie 1)	2019-07-17 11:57:00 +02:00
Raphael	8292b542f2	renommage dossiers	2019-07-17 11:15:55 +02:00
Raphael	365d221431	mise à jour browserslist (IE11 mini)	2019-07-17 10:59:19 +02:00
Raphael	0d68702dea	typos	2019-07-17 10:32:01 +02:00
				`@ -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}}@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}