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 7413 additions and 6043 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/13
+++ b/13
@ -0,0 +1,13 @@
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+                    Version 2, December 2004
+
+ Copyright (C) 2004 Sam Hocevar <sam@hocevar.net>
+
+ Everyone is permitted to copy and distribute verbatim or modified
+ copies of this license document, and changing it is allowed as long
+ as the name is changed.
+
+            DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE
+   TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION
+
+  0. You just DO WHAT THE FUCK YOU WANT TO.
--- a/README.md
+++ b/README.md
@ -1,19 +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)

-**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.**
-
-**Cette version n'est plus maintenue et n'est pas compatible avec les versions récentes. Ne changez pas de version sans nécessité, vous prendriez le risque de casser la compatibilité avec vos projets en cours.**
-
-## Documentation version actuelle
-
- Site web de présentation de KNACSS Reborn : <http://knacss.com>
+- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
 - [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)

 ## Documentation anciennes versions (v7)

 - [**Documentation KNACSS v7**](https://www.knacss.com/doc-old.html)
- [**Pense-bête PDF version 7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
+- [**Pense-bête PDF KNACSS v7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
+
--- a/bower.json
+++ b/bower.json
@ -1,23 +0,0 @@
-{
-  "name": "KNACSS",
-  "version": "6.1.2",
-  "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,4 +1,94 @@
-# changelog v7.0.0beta (août - novembre 2017)
+# Changelog
+
+- 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...
+
+## 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)
+
+- ajout de la règle `@media (prefers-reduced-motion: reduce)`
+- ajout de `@supports (display: grid)` dans le mixin de grille
+
+## Changelog v7.1.1 (10 decembre 2018)
+
+- patch correctif de gulpfile
+
+## Changelog v7.1.0 (31 octobre 2018)
+
+- mise à jour et meilleure intégration de gulp / postCSS :
+  - autoprefixer version postCSS (avec browserslist officielle),
+  - unprefix : pour supprimer les vieux préfixes inutiles
+  - flexbox-fixes : pour corriger les erreurs connues sur IE
+  - gap-properties : polyfill de gap -> grid-gap
+  - minification CSS avec CSSnano
+- application de `white-space: pre-rap` sur les textarea
+
+## Changelog v7.0.9 (24 octobre 2018)
+
+- correction d'alignement vertical de `.nav-button`
+
+## Changelog v7.0.8 (20 septembre 2018)
+
+- suppression de `white-space: nowrap` sur les éléments de formulaire
+
+## Changelog v7.0.7 (3 juillet 2018)
+
+- cohérence de renommage pour les classes utilitaires (ajout du préfixe `.u-` uniformément)
+
+## Changelog v7.0.5 (25 mai 2018)
+
+- mise à jour des styles, SVG, et variables des checkbox, radio et switches
+
+## Changelog v7.0.4 (04 avril 2018)
+
+- ajout de `::placeholder` cf. issue #276
+
+## Changelog v7.0.3 (01 mars 2018)
+
+- suppression de commentaires inutiles
+
+## Changelog v7.0.2 (04 janvier 2018)
+
+- intégration de (auto)grid dans Grillade
+
+## Changelog v7.0.1 (22 décembre 2017)
+
+- meilleure gestion des hyphens
+- mise en commentaire du fix SVG our IE11
+
+## Changelog v7.0.0 (août - novembre 2017)
+
 - modifications, mises à jour :
  - architecture globale revisitée (vendor, config, library, components)
  - remplacement de normalize.css par Bootstrap reboot.css
@ -7,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 :
@ -27,43 +117,54 @@
  - création d'un mixin de tailles de polices (responsive)
  - `* {min-width: 0}` pour éviter la valeur `auto` sur les flex-items et grid-items

-# changelog v6.1.2 (21 juin 2017)
+## Changelog v6.1.2 (21 juin 2017)
+
 - alignement des helpers flexbox sur ceux de Bootstrap (`.d-flex`, `.flex-row`, `.flex-column`, `.mr-auto`)
 - alignement des breakpoints sur ceux de Bootstrap (576, 768, 992, 1200) et réorganisation des intervalles
 - `tab-size: 2;` sur les `<pre>`
- passage en System Font Stack. cf. https://css-tricks.com/snippets/css/system-font-stack/
+- passage en System Font Stack. cf. <https://css-tricks.com/snippets/css/system-font-stack/>
+
+## Changelog v6.1.1 (21 avril 2017)

-# changelog v6.1.1 (21 avril 2017)
 - amélioration du mixin "respond-to()"

-# changelog v6.1.0 (3 mars 2017)
+## Changelog v6.1.0 (3 mars 2017)
+
 - passage à [Normalize 5.0.0](https://github.com/necolas/normalize.css/blob/5.0.0/CHANGELOG.md)
 - ajout de variables pour tailles de polices différentes sur petits et sur grands écrans (`$h1-size` et `$h1-size-l` par exemple). Par défaut, les tailles "mobile" sont appliquées, et les tailles "desktop" s'appliquent en min-width `$tiny +1`
 - convention de nommage des variables pour faciliter les recherches : `$base-color` devient `$color-base`, `$link-color` devient `$link-color`, etc.
 - typo fix

-# changelog v6.0.8 (10 janvier 2017)
+## Changelog v6.0.8 (10 janvier 2017)
+
 - application de `$link-color-hover` uniquement si différent de `$link-color`

-# changelog v6.0.7 (7 décembre 2016)
+## Changelog v6.0.7 (7 décembre 2016)
+
 - application de `$font-family-headings` uniquement si différent de `$font-stack-base`

-# changelog v6.0.6 (2 décembre 2016)
+## Changelog v6.0.6 (2 décembre 2016)
+
 - Grillade : redéfinition du périmètre de `-small` : passe de `(min-width: ($tiny + 1)) and (max-width: $small)` à `(min-width: ($tiny + 1)) and (max-width: $medium)` (de 544px à 991px par défaut)

-# changelog v6.0.5 (1er décembre 2016)
+## Changelog v6.0.5 (1er décembre 2016)
+
 - redéfinition des variables de breakpoints, à présent calées sur [celles de Bootstrap](https://v4-alpha.getbootstrap.com/layout/overview/#responsive-breakpoints)

-# changelog v6.0.4 (22 novembre 2016)
+## Changelog v6.0.4 (22 novembre 2016)
+
 - renommage des variables

-# changelog v6.0.3 (10 novembre 2016)
+## Changelog v6.0.3 (10 novembre 2016)
+
 - renommage `grid-item-*` en `item-*` pour éviter [les conflits](https://github.com/alsacreations/KNACSS/issues/222)

-# changelog v6.0.2 (27 octobre 2016)
+## Changelog v6.0.2 (27 octobre 2016)
+
 - optimisation de la grille (de 8ko à 3ko pour la version Sass)

-# changelog v6.0.0 (26 septembre 2016)
+## Changelog v6.0.0 (26 septembre 2016)
+
 - refonte intégrale de la grille de mise en forme (adoption de [grillade.css](http://grillade.knacss.com))
 - suppression de include-media (cause de bugs d'encodage : cf. [#203](https://github.com/alsacreations/KNACSS/issues/203) / [#197](https://github.com/alsacreations/KNACSS/issues/197) , nécessite un temps d'apprentissage, et n'apporte pas grand chose au final).
 - refonte des valeurs des Breakpoints et des classes responsive. [voir issue #210](https://github.com/alsacreations/KNACSS/issues/210)
@ -74,15 +175,17 @@
 - corrections de bugs divers
 - mise à jour de la doc

-# changelog v5.0.1 (24 mai 2016)
+## Changelog v5.0.1 (24 mai 2016)
+
 - les helpers de largeurs deviennent mobile-first et ne s'activent que sur écran d'une certaine taille. Ex. `.w700p {width: 700px;}` devient `@include media('>640px') {.w700p {width: 700px;}}`. Ainsi il n'est plus nécessaire de les écraser dans la feuille de style responsive.

-# changelog v5.0.0 (23 mai 2016)
+## Changelog v5.0.0 (23 mai 2016)
+
 - suppression du support IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
 - suppression du support LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge pour des raisons de maintenabilité)
- mise à jour vers Normalize 4.1.1 : https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md
+- mise à jour vers Normalize 4.1.1 : <https://github.com/necolas/normalize.css/blob/4.1.1/CHANGELOG.md>
 - restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-`
- ajout de la library include-media (http://include-media.com/) pour faciliter la gestion des media queries
+- ajout de la library include-media (<http://include-media.com/>) pour faciliter la gestion des media queries
 - adaptation des variables de breakpoint pour les rendre compatibles avec include-media
 - grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables)
 - nommage de variables préfixé pour plus de maintenabilité : `$gutter` -> `$grid-gutter`, `$number` -> `$grid-number`, `$left` -> `$grid-left` et `$right` -> `$grid-right`
@ -92,27 +195,27 @@
 - adaptation des fichiers gulpfile, package.json et bower.json
 - mise à jour de la documentation

-# changelog v4.4.5 (1er avril 2016)
+## Changelog v4.4.5 (1er avril 2016)

- mise à jour vers Normalize 4 : https://github.com/necolas/normalize.css/blob/4.0.0/CHANGELOG.md
+- mise à jour vers Normalize 4 : <https://github.com/necolas/normalize.css/blob/4.0.0/CHANGELOG.md>
 - application de min-width: 0 sur les flex-item-fluid pour éviter les minimum automatiques des flex-items
 - suppression des styles spécifiques à Gmap (sélecteurs trop lourds pour un cas très particuliers)

-# changelog v4.4.4 (23 janvier 2016)
+## Changelog v4.4.4 (23 janvier 2016)

- mise à jour vers Normalize 3.0.3 : https://github.com/necolas/normalize.css/
+- mise à jour vers Normalize 3.0.3 : <https://github.com/necolas/normalize.css/>
 - réalignement vertical des input et des label

-# changelog v4.4.3 (14 janvier 2016)
+## Changelog v4.4.3 (14 janvier 2016)

 - ajout du patch `min-width: 0` sur les flex-items de grilles

-# changelog v4.4.2 (24 décembre 2015)
+## 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)
+## Changelog v4.4.0 (12 décembre 2015)

 - ajout de classes d'état dans les helpers (`is-disabled`, `is-hidden`, `is-visually-hidden`, `is-unstyled`)
 - import de la feuille de style dédiée WordPress mise en commentaire par défaut et activable au besoin
@ -123,20 +226,19 @@
 - ajout d'une classe `.no-wrapping` pour les éléments qui ne doivent pas adopter de césures sur petit écran
 - ajout de classes helpers pour les marges automatiques (`.mtauto`, `mrauto`, `.mauto`, etc.)

-
-# changelog v4.3.6 (10 novembre 2015)
+## Changelog v4.3.6 (10 novembre 2015)

 - modification de la valeur par défaut de gouttière (`1em` -> `2rem`)
 - correction d'un `padding: none` en `padding: 0` dans styling.less|sass

-# changelog v4.3.5 (20 octobre 2015)
+## Changelog v4.3.5 (20 octobre 2015)

 - correction de doublons
 - ajout de `word-break: break-all` sur les liens en responsive
 - suppression du `outline: 0` sur les boutons au focus
 - correction de visuels dans la documentation

-# changelog v4.3.4 (27 août 2015)
+## Changelog v4.3.4 (27 août 2015)

 - ajout des classes `.pull` et `.push` pour les offsets des grilles
 - corrections de la doc Print et Commencer
@ -144,28 +246,28 @@
 - suppression des styles graphiques pour tableaux alternate et striped
 - modifications sur la classe `.visually-hidden`

-# changelog v4.3.3 (6 août 2015)
+## Changelog v4.3.3 (6 août 2015)

 - ajout de helpers (breakpoints responsive)
 - modification du seuil de breakpoint pour les grilles inégales `@tiny-screen` -> `@small-screen`
 - corrections feuille de style print (modifications plus faciles pour l'utilisateur)

-# changelog v4.3.1 (5 juillet 2015)
+## Changelog v4.3.1 (5 juillet 2015)

 - Amélioration des grilles responsive. Par exemple la classe `grid-4-small-2-tiny-1` définira une grille de 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran. La notation `grid-4` fonctionne toujours, mais ne sera pas automatiquement responsive.

-# changelog v4.3.0 (3 juillet 2015)
+## Changelog v4.3.0 (3 juillet 2015)

 - Les grilles de KNACSS sont à présent rétrocompatibles jusqu'à IE8 et Android2 grâce à un fallback en `display: inline-block` pour ces anciens navigateurs. Cependant les fonctionnalités resteront limitées chez ces dinosaures (pas de `flex-item-double`, de `flex-item-first`, etc.)

-# changelog v4.2.3 (2 juillet 2015)
+## Changelog v4.2.3 (2 juillet 2015)

 - Passage à l'indentation via 2 espaces et non plus tabulations (+ `.editorconfig` à jour)
 - Répartition des styles tabulaires entre les fichiers `tables` et `styling`
 - pas de namespace sur les classes `.clear`, `.clearfix` et `.visually-hidden`
 - ajout d'une classe `.bfc` (identique à `.mod`) et qui crée un contexte de formatage block

-# changelog v4.2.2 (26 juin 2015)
+## Changelog v4.2.2 (26 juin 2015)

 - Ajout de !default aux variables SASS dans le fichier `_00-config.scss`
 - Flex-container enhancement
@ -173,27 +275,27 @@
 - correction largeurs des grilles pour IE
 - correction de divers doublons

-# changelog v4.2.1 (25 mai 2015)
+## Changelog v4.2.1 (25 mai 2015)

 - pour les grilles, suppression de l'alignement justifié par défaut (justify-content: space-between)

-# changelog v4.2.0 (05 mai 2015)
+## Changelog v4.2.0 (05 mai 2015)

 - possibilité d'ajouter un namespace à l'ensemble des classes (configurable dans le fichier config de Less et Sass)

-# changelog v4.1.6 (17 avril 2015)
+## Changelog v4.1.6 (17 avril 2015)

 - mise en commentaire des sauts de page print avant un h1
 - correction d'anomalie sur les input (user-select: none)
 - correction d'erreur de compilation Sass

-# changelog v4.1.4 (14 avril 2015)
+## Changelog v4.1.4 (14 avril 2015)

 - ajout de node_modules dans le .gitignore
 - ajout d'un gulpfile.js et des dépendances dans package.json
 - ajout de la classe .unstyled destinée aux éléments de formulaires

-# changelog v4.1.3 (13 avril 2015)
+## Changelog v4.1.3 (13 avril 2015)

 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).

@ -217,39 +319,39 @@ Nouveaux noms :
 .flex-item-first, .flex-item-medium, .flex-item-last
 ```

-# changelog v4.1.1 (30 mars 2015)
+## Changelog v4.1.1 (30 mars 2015)

 ## Vite fait

-* 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
-* attention : rétrocompatibilité non préservée pour certaines classes ( .left, .start, .txtleft, .fl, .table-, .flex-start, .flex-end)
-* attention : rétrocompatibilité non préservée pour les grilles de mise en page (passage à flexbox et simplification de la structure)
+- 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
+- attention : rétrocompatibilité non préservée pour certaines classes ( .left, .start, .txtleft, .fl, .table-, .flex-start, .flex-end)
+- attention : rétrocompatibilité non préservée pour les grilles de mise en page (passage à flexbox et simplification de la structure)

-## done
+## Done

-* documentation en français
-* PDF pense-bête mis à jour : http://knacss.com/KNACSS-cheatsheet.pdf
-* gros ménage de printemps (gros nettoyage de tous les espaces et tabulations disgrâcieux)
-* dans la section "quick print reset", ajout des classes .p-like, h1-like, h2-like etc.
-* mise en commun globale de tous les styles p avec .p-like (h1 et h1-like, etc.).
-* déplacement et commentaire sur la règle body > script
-* correction du bug des height: auto sur les images au format SVG
-* meilleure intégration de box-sizing
-* suppression du fichier dédié aux réglages des bugs des anciennes versions d'IE6-IE8
-* fin du support d'IE9 pour les grilles : KNACSS v4 compatible IE10+ pour ce qui concerne les mises en page en grilles (flexbox FTW!)
-* réorganisation des fichiers (le fichier dédié "IE.css" disparait, le fichier "booleans" devient "misc" (plus cohérent), le fichier "gmaps" est désormais inclus dans "misc")
-* ajout des préfixes ".table-" devant les styles de décoration des tableaux
-* suppression du fichier icons.css, statistiquement inutile en pratique
-* meilleure cohérence de nommage entre .left, .start, .txtleft, .fl
-* ajout d'un fichier de reset dédié à WordPress
-* refonte intégrale des grilles en Flexbox (et en plus ça marche sur IE10 !)
-* ajout d'un fichier .editorconfig (http://editorconfig.org/)
-* passage des :before/:after en ::before/::after
-* ajout de sourcemaps CSS
-* suppression des images noir et blanc forcées en media print
-* correction de la formule LESS `{calc(1em * .625);`
-* ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
-* mise à jour du générateur de gabarits [Schnaps.it](http://schnaps.it/)
+- documentation en français
+- PDF pense-bête mis à jour : <http://knacss.com/KNACSS-cheatsheet.pdf>
+- gros ménage de printemps (gros nettoyage de tous les espaces et tabulations disgrâcieux)
+- dans la section "quick print reset", ajout des classes .p-like, h1-like, h2-like etc.
+- mise en commun globale de tous les styles p avec .p-like (h1 et h1-like, etc.).
+- déplacement et commentaire sur la règle body > script
+- correction du bug des height: auto sur les images au format SVG
+- meilleure intégration de box-sizing
+- suppression du fichier dédié aux réglages des bugs des anciennes versions d'IE6-IE8
+- fin du support d'IE9 pour les grilles : KNACSS v4 compatible IE10+ pour ce qui concerne les mises en page en grilles (flexbox FTW!)
+- réorganisation des fichiers (le fichier dédié "IE.css" disparait, le fichier "booleans" devient "misc" (plus cohérent), le fichier "gmaps" est désormais inclus dans "misc")
+- ajout des préfixes ".table-" devant les styles de décoration des tableaux
+- suppression du fichier icons.css, statistiquement inutile en pratique
+- meilleure cohérence de nommage entre .left, .start, .txtleft, .fl
+- ajout d'un fichier de reset dédié à WordPress
+- refonte intégrale des grilles en Flexbox (et en plus ça marche sur IE10 !)
+- ajout d'un fichier .editorconfig (<http://editorconfig.org/>)
+- passage des :before/:after en ::before/::after
+- ajout de sourcemaps CSS
+- suppression des images noir et blanc forcées en media print
+- correction de la formule LESS `{calc(1em * .625);`
+- ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
+- mise à jour du générateur de gabarits [Schnaps.it](http://schnaps.it/)
--- 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:grid;grid-auto-flow:dense}[class*=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class*=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class*=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class*=grid-1]{grid-template-columns:repeat(1,1fr)}[class*=grid-2]{grid-template-columns:repeat(2,1fr)}[class*=grid-3]{grid-template-columns:repeat(3,1fr)}[class*=grid-4]{grid-template-columns:repeat(4,1fr)}[class*=grid-5]{grid-template-columns:repeat(5,1fr)}[class*=grid-6]{grid-template-columns:repeat(6,1fr)}[class*=grid-7]{grid-template-columns:repeat(7,1fr)}[class*=grid-8]{grid-template-columns:repeat(8,1fr)}[class*=grid-9]{grid-template-columns:repeat(9,1fr)}[class*=grid-10]{grid-template-columns:repeat(10,1fr)}[class*=grid-11]{grid-template-columns:repeat(11,1fr)}[class*=grid-12]{grid-template-columns:repeat(12,1fr)}[class*=col-1]{grid-column:auto/span 1}[class*=row-1]{grid-row:auto/span 1}[class*=col-2]{grid-column:auto/span 2}[class*=row-2]{grid-row:auto/span 2}[class*=col-3]{grid-column:auto/span 3}[class*=row-3]{grid-row:auto/span 3}[class*=col-4]{grid-column:auto/span 4}[class*=row-4]{grid-row:auto/span 4}[class*=col-5]{grid-column:auto/span 5}[class*=row-5]{grid-row:auto/span 5}[class*=col-6]{grid-column:auto/span 6}[class*=row-6]{grid-row:auto/span 6}[class*=col-7]{grid-column:auto/span 7}[class*=row-7]{grid-row:auto/span 7}[class*=col-8]{grid-column:auto/span 8}[class*=row-8]{grid-row:auto/span 8}[class*=col-9]{grid-column:auto/span 9}[class*=row-9]{grid-row:auto/span 9}[class*=col-10]{grid-column:auto/span 10}[class*=row-10]{grid-row:auto/span 10}[class*=col-11]{grid-column:auto/span 11}[class*=row-11]{grid-row:auto/span 11}[class*=col-12]{grid-column:auto/span 12}[class*=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class*=grid-][class*="-small-1"]{grid-template-columns:repeat(1,1fr)}[class*=col-][class*="-small-1"]{grid-column:auto/span 1}[class*=grid-][class*="-small-2"]{grid-template-columns:repeat(2,1fr)}[class*=col-][class*="-small-2"]{grid-column:auto/span 2}[class*=grid-][class*="-small-3"]{grid-template-columns:repeat(3,1fr)}[class*=col-][class*="-small-3"]{grid-column:auto/span 3}[class*=grid-][class*="-small-4"]{grid-template-columns:repeat(4,1fr)}[class*=col-][class*="-small-4"]{grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}
--- 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,48 +1,55 @@
-// Requires
-var gulp = require('gulp');
-
-// Include plugins
+const gulp = require('gulp');
 var sass = require('gulp-sass');
-var concat = require('gulp-concat');
-var rename = require('gulp-rename');
-var minifycss = require('gulp-clean-css');
-var autoprefixer = require('gulp-autoprefixer');
+var postcss = require('gulp-postcss');
+var CombineMQ = require('postcss-combine-media-query');
+var autoprefixer = require('autoprefixer');
+var CSSnano = require('cssnano');

-
-// tâche CSS = compile vers knacss.css et knacss-unminified.css
-gulp.task('css', function () {
-  return gulp.src('./sass/knacss.scss')
-    .pipe(sass({
-      outputStyle: 'expanded' // CSS non minifiée plus lisible ('}' à la ligne)
-    }))
-    .pipe(autoprefixer())
-    .pipe(rename('knacss-unminified.css'))
-    .pipe(gulp.dest('./css/'))
-    .pipe(rename('knacss.css'))
-    .pipe(minifycss())
-    .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'));
 });

-gulp.task('grillade', function() {
-  return gulp.src('./sass/components/grillade-grid.scss')
-    .pipe(sass())
-    .pipe(autoprefixer())
-    .pipe(minifycss())
-    .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-flex', function() {
-  return gulp.src('./sass/components/grillade-flex.scss')
-    .pipe(sass())
-    .pipe(autoprefixer())
-    .pipe(minifycss())
-    .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'));
 });

-// Watcher
-gulp.task('watch', function() {
-  gulp.watch(['./sass/*.scss'], ['css']);
-});
+// Tâche BUILD : tapez "gulp" ou "gulp build"
+gulp.task('build', gulp.series('css:full', 'css:mini', 'css:grillade'));

-
-gulp.task('default', ['css']);
+// Tâche par défaut
+gulp.task('default', gulp.series('build'));
--- a/package.json
+++ b/package.json
@ -1,11 +1,9 @@
 {
  "name": "knacss",
-  "version": "6.1.2",
+  "version": "8.2.1",
  "homepage": "http://www.knacss.com/",
  "bugs": "https://github.com/alsacreations/KNACSS/issues",
-  "author": [
-    "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)"
-  ],
+  "author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
  "contributors": [
    "Raphaël GOETTER, Alsacreations"
  ],
@ -26,14 +24,14 @@
    "url": "https://github.com/alsacreations/KNACSS"
  },
  "license": "WTFPL",
-  "dependencies": {},
  "devDependencies": {
-    "gulp": "latest",
-    "gulp-rename": "latest",
-    "gulp-sass": "latest",
-    "gulp-concat": "latest",
-    "gulp-clean-css": "latest",
-    "gulp-autoprefixer": "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,56 +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) {
-  @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,211 +0,0 @@
-// Config file and project variables
-
-// ----------------
-// Breakpoints zone
-// ----------------
-
-// Warning: you should use your own values, regardless of the devices
-// Best practise 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;
-
-// ------------
-// Spacing zone
-// ------------
-
-// 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;
-$color-primary  : $blue-500;
-$color-success  : $green-500;
-$color-info     : $blue-300;
-$color-warning  : $orange-500;
-$color-danger   : $red-500;
-$color-inverse  : $gray-800;
-$color-ghost    : transparent;
-$color-muted    : $gray-200;
-
-$color-base      : $gray-900;
-$background-base : $white;
-
-$forms-color     : $gray-800;
-
-// ---------------
-// Components zone
-// ---------------
-
-// Component: links
-$link-color            : $gray-800;
-$link-color-hover      : darken($link-color, 15%);
-$link-decoration       : none;
-$link-decoration-hover : underline;
-
-// Global border-radius
-$border-radius: 0 !default;
-
-// Component: quotes
-$quote-color     : $gray-200;
-
-// Component: arrows
-$arrow-color     : $black;
-
-// Components: checkboxes, radios, switches
-$checkbox-color         : $gray-800;
-$checkbox-size          : 2rem;
-$checkbox-border-radius : 4px;
-$switch-color           : $gray-800;
-$switch-size            : 2rem;
-$switch-border-radius   : 3em;
-
-// Component: tables
-$table-border               : $gray-500;
-$table-caption-color        : $gray-800;
-$table-background           : transparent;
-$table-head-color           : $color-base;
-$table-head-background      : transparent;
-$table-footer-color         : $color-base;
-$table-footer-background    : transparent;
-
-// 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,       $white,    none),
-  (warning,    $color-warning,    $white,    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;
-$tabs-active-border     : $gray-800;
-$tabs-color             : $color-base;
-$tabs-active-color      : $gray-800;
-$tabs-background        : transparent;
-$tabs-active-background : transparent;
-$tabs-border-radius     : 0;
-
-// Component: nav burger button
-$burger-color             : $gray-800;
-$burger-background        : transparent;
-$burger-hover-background  : transparent;
-$burger-size              : 2.6rem;
-$burger-weight            : 5px; // size of stripes
-$burger-padding           : 0;
--- a/sass/_library/_base.scss
+++ b/sass/_library/_base.scss
@ -1,266 +0,0 @@
-/* ----------------------------- */
-/* ==Base (basic styles)         */
-/* ----------------------------- */
-
-/* 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: "“\00a0" "\00a0”";
-
-  &: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,141 +0,0 @@
-/* ----------------------------- */
-/* ==Global Micro Layout         */
-/* ----------------------------- */
-
-/* module, gains superpower "BFC" Block Formating Context */
-.mod,
-.bfc {
-  overflow: hidden;
-}
-
-/* blocks that needs to be placed under floats */
-.clear {
-  clear: both;
-}
-
-/* blocks that must contain floats */
-.clearfix {
-  &::after {
-    content: "";
-    display: table;
-    clear: both;
-    border-collapse: collapse;
-  }
-}
-
-/* simple blocks alignment */
-.left {
-  margin-right: auto;
-}
-
-.right {
-  margin-left: auto;
-}
-
-.center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* text and contents alignment */
-.txtleft {
-  text-align: left;
-}
-
-.txtright {
-  text-align: right;
-}
-
-.txtcenter {
-  text-align: center;
-}
-
-/* floating elements */
-.fl {
-  float: left;
-}
-
-img.fl {
-  margin-right: $spacer-small;
-}
-
-.fr {
-  float: right;
-}
-
-img.fr {
-  margin-left: $spacer-small;
-}
-
-img.fl,
-img.fr {
-  margin-bottom: $spacer-tiny;
-}
-
-/* inline-block */
-.inbl {
-  display: inline-block;
-  vertical-align: top;
-}
-
-/* flexbox layout
-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/_misc.scss
+++ b/sass/_library/_misc.scss
@ -1,34 +0,0 @@
-/* ----------------------------- */
-/* ==Misc                        */
-/* ----------------------------- */
-
-// hyphens on tiny screens
-@media (max-width: ($small - 1)) {
-  /* you shall not pass */
-  div,
-  textarea,
-  table,
-  td,
-  th,
-  code,
-  pre,
-  samp {
-    word-wrap: break-word;
-    hyphens: auto;
-  }
-}
-
-// use .no-wrapping to disallow hyphens on tiny screens
-@media (max-width: ($small - 1)) {
-  .no-wrapping {
-    word-wrap: normal;
-    hyphens: manual;
-  }
-}
-
-// SVG width IE fix
-@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-  img[src$=".svg"] {
-    width: 100%;
-  }
-}
--- 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,331 +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;
-}
-
-/* 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,145 +0,0 @@
-/* ---------------------------------- */
-/* ==Grillade v6                      */
-/* ---------------------------------- */
-/* IMPORTANT : this is the KNACSS v6 old Grid System based on Flexbox */
-/* You only need it for projects on older browsers (IE11-) */
-
-// Responsive breakpoints variables
-
-// Warning : you should use your own values, regardless of the devices
-// Best practise : (max-width: ($BP - 1)) and (min-width: $BP)
-
-$tiny: 480px !default; // or 'em' if you prefer, of course
-$small: 576px !default;
-$medium: 768px !default;
-$large: 992px !default;
-$extra-large: 1200px !default;
-
-// gutter values for grid layouts. Unit can be: %, px, em, rem
-$grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
-// IEfixing, see
-// https://github.com/alsacreations/KNACSS/issues/133;
-$iefix: 0.01px;
-@media (min-width: $small) {
-  [class*=" grid-"],
-  [class^="grid-"] {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-
-    & > * {
-      box-sizing: border-box;
-      min-width: 0;
-      min-height: 0;
-    }
-  }
-}
-// Multi-line grid constructor
-// example : .grid-perso { @include grid(12, 3rem); }
-@mixin grid($grid-number: 1, $own-gutter: 0) {
-  & > * {
-    width: calc(100% / #{$grid-number} - #{$iefix});
-  }
-  @each $affix, $size in $grid-gutters {
-    &.has-gutter#{$affix} {
-      margin-right: -$size / 2;
-      margin-left: -$size / 2;
-
-      & > * {
-        width: calc(100% / #{$grid-number} - #{$size} - #{$iefix});
-        margin-right: $size / 2;
-        margin-left: $size / 2;
-      }
-    }
-  }
-  @if ($own-gutter != 0) {
-    margin-right: -$own-gutter / 2;
-    margin-left: -$own-gutter / 2;
-
-    & > * {
-      width: calc(100% / #{$grid-number} - #{$own-gutter} - #{$iefix});
-      margin-right: $own-gutter / 2;
-      margin-left: $own-gutter / 2;
-    }
-  }
-}
-// Mono-line grid constructor (.grid)
-@media (min-width: $small) {
-  .grid,
-  .grid--reverse {
-    display: flex;
-
-    & > * {
-      flex: 1 1 0%;
-      box-sizing: border-box;
-      min-width: 0;
-      min-height: 0;
-    }
-    @each $affix, $size in $grid-gutters {
-      &.has-gutter#{$affix} > * + * {
-        margin-left: calc(#{$size} - #{$iefix});
-      }
-    }
-  }
-}
-// Constructing grids : will be compiled in CSS
-@media (min-width: $small) {
-  @for $i from 2 through 12 {
-    [class*="grid-#{$i}"] {
-      @include grid(#{$i}, 0);
-    }
-  }
-}
-
-// Grid offsets
-.push {
-  margin-left: auto !important;
-}
-
-.pull {
-  margin-right: auto !important;
-}
-
-// Grid order
-.item-first {
-  order: -1;
-}
-
-.item-last {
-  order: 1;
-}
-
-[class*="grid-"][class*="--reverse"] {
-  flex-direction: row-reverse;
-}
-// sizing individual children
-@media (min-width: $small) {
-  @each $flow, $divider in ("full" "1"), ("one-half" "2"), ("one-third" "3"), ("one-quarter" "4"), ("one-fifth" "5"), ("one-sixth" "6"), ("two-thirds" "3 * 2"), ("three-quarters" "4 * 3"), ("five-sixths" "6 * 5") {
-    .#{$flow} {
-      flex: 0 0 auto;
-      width: calc(100% / #{$divider} - #{$iefix});
-    }
-    @each $affix, $size in $grid-gutters {
-      .has-gutter#{$affix} > .#{$flow} {
-        width: calc(100% / #{$divider} - #{$size} - #{$iefix});
-      }
-    }
-  }
-}
-/* Responsive Small Breakpoint */
-// -small-X suffix means "X columns on small-medium screen"
-// example : .grid-4-small-2 will be 1 column (tiny and down) then 2 columns (until medium) then 4 columns
-@media (min-width: $small) and (max-width: ($medium - 1)) {
-  @for $i from 1 through 4 {
-    [class*="-small-#{$i}"] {
-      & > * {
-        width: calc(100% / #{$i} - #{$iefix});
-      }
-      @each $affix, $size in $grid-gutters {
-        &.has-gutter#{$affix} > * {
-          width: calc(100% / #{$i} - #{$size} - #{$iefix});
-        }
-      }
-    }
-  }
-}
--- a/sass/_library/grillade-grid.scss
+++ b/sass/_library/grillade-grid.scss
@ -1,95 +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;
-$small: 576px !default;
-$medium: 768px !default;
-$large: 992px !default;
-
-
-[class*=" grid-"],
-[class^="grid-"] {
-  @media (min-width: $tiny) {
-    display: grid;
-    grid-auto-flow: dense;
-
-    // gutters
-    @if variable_exists(grid-gutters) {
-      $gutter: $grid-gutters !global;
-    }
-    @else {
-      $gutter: ( '': 1rem, '-l': 2rem, '-xl': 4rem ) !global;
-    }
-    @each $affix, $size in $gutter {
-      &.has-gutter#{$affix} {
-        grid-gap: $size;
-      }
-    }
-  }
-}
-
-// grid constructor (.grid-2 to .grid-12)
-@for $i from 1 through 12 {
-  [class*="grid-#{$i}"] {
-    grid-template-columns: repeat(#{$i}, 1fr);
-  }
-}
-
-// grid items constructor (.col-1 to .col-12, .row-1 to .row-12)
-@for $i from 1 through 12 {
-  [class*="col-#{$i}"] {
-    grid-column: auto / span #{$i};
-  }
-
-  [class*="row-#{$i}"] {
-    grid-row: auto / span #{$i};
-  }
-}
-
-/* intermediate breakpoints */
-// -small-X suffix means "X columns when < medium screen"
-// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
-@media (min-width: $tiny) and (max-width: ($medium - 1)) {
-   @for $i from 1 through 4{
-    [class*="grid-"][class*="-small-#{$i}"] {
-      grid-template-columns: repeat(#{$i}, 1fr);
-    }
-
-    [class*="col-"][class*="-small-#{$i}"] {
-      grid-column: auto / span #{$i};
-    }
-  }
-  [class*="-small-all"] {
-    grid-column: 1 / -1;
-  }
-}
-
-// grid order
-.item-first {
-  order: -1;
-}
-
-.item-last {
-  order: 1;
-}
-
-// grid offset
-.grid-offset {
-  visibility: hidden;
-}
-
-// spanning all collumns or rows
-.col-all {
-  grid-column: 1 / -1;
-}
-
-.row-all {
-  grid-row: 1 / -1;
-}
--- a/sass/_vendor/_reboot.css
+++ b/sass/_vendor/_reboot.css
@ -1,335 +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: bolder;
-}
-
-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;
-}
-/*# sourceMappingURL=bootstrap-reboot.css.map */
--- 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,53 +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/_autogrid.scss
+++ b/sass/components/_autogrid.scss
@ -1,27 +0,0 @@
-/* ----------------------------- */
-/* ==Autogrid object             */
-/* ----------------------------- */
-/* recommanded HTML : <div class="autogrid">... some elements ...</div> */
-/* see https://codepen.io/raphaelgoetter/pen/zzwxEE */
-
-.autogrid,
-.grid {
-  @media (min-width: $tiny) {
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-column: 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;
-      }
-    }
-  }
-}
--- a/sass/components/_badges.scss
+++ b/sass/components/_badges.scss
@ -1,50 +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,157 +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
-// active it with a JS toggle-class to .is-active
-// recommanded 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: flex;
-    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,97 +1,58 @@
-/* ----------------------------- */
-/* ==Checkbox, radio, switch     */
-/* ----------------------------- */
-/* use .checkbox class on input type=checkbox */
-/* recommanded HTML : <input type="checkbox" class="checkbox" id="c1"><label for="c1">click here</label> */
-/* use .radio class on input type=radio */
-/* recommanded 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;
-  box-shadow: inset 0 0 0 1px $checkbox-color;
-  background: #fff;
-
-  ~ 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: 60%;
-  box-shadow: inset -#{$switch-size} 0 0 $switch-color, inset 0 0 0 1px $switch-color;
-  transition: box-shadow .15s;
-  &::before, &::after {
-    font-weight: bold;
-    color: #fff;
-  }
-  &::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;
-  transition: background-color .15s;
-  &: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-color;
-  }
+  vertical-align: text-bottom;
+  box-shadow: inset 0 0 0 1px $primary;
+  background-color: $checkbox-color;
+  transition: background-color 0.15s;
+  cursor: pointer;
 }

-// radio styling
-.radio {
-  width: $checkbox-size;
-  height: $checkbox-size;
-  transition: background-color .15s;
-  &: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: 80% 80%;
-    background-position: center;
-    background-repeat: no-repeat;
-    background-color: $checkbox-color;
-  }
+.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,110 +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 {
-  white-space: nowrap;
-  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: normal;
-}
-
-/* '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;
-}
-
-progress {
-  width: 100%;
-  vertical-align: middle;
-}
--- a/sass/components/_media.scss
+++ b/sass/components/_media.scss
@ -1,25 +0,0 @@
-/* ----------------------------- */
-/* ==Media object                */
-/* ----------------------------- */
-/* recommanded 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,51 +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,53 +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,50 +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,68 +1,32 @@
 /*!
-* www.KNACSS.com v7.0.0 (??? 2017) @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
-  - Misc (hyphens)
-  - Layout (alignment, modules, positionning)
-  - Utilities (width and spacers helpers)
-  - Responsive helpers
-  - WordPress reset (disabled by default)
-  - Grillade (Grid System)
-3- Components :
-  - Media object
-  - Autogrid 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)
+@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.scss";
+// UTILITAIRES
+@import "utils/utils-global";
+@import "utils/utils-font-sizes";
+@import "utils/utils-spacers";
+@import "utils/grillade";

-@import "_config/_mixins.scss";
-
-// Core Libraries
-@import "_library/_base.scss";         // basic styles
-@import "_library/_print.scss";        // print quick reset
-@import "_library/_misc.scss";         // skip links, hyphens
-@import "_library/_layout.scss";       // alignment, modules, positionning
-@import "_library/_utilities.scss";    // width and spacers helpers
-@import "_library/_responsive.scss";   // Responsive Web Design helpers
-// @import "_library/_wordpress.scss"; // 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.scss"
-// Note that none of these file is prefixed by an underscore, in order to compile them.
-@import "_library/grillade-grid.scss"; // grid system with Grid Layout
-
-// Components
-@import "components/_media.scss";      // media object
-@import "components/_autogrid.scss";   // media autogrid
-@import "components/_skip-links.scss"; // skip links
-@import "components/_tables.scss";     // data tables consistency
-@import "components/_forms.scss";      // forms consistency and styles
-@import "components/_buttons.scss";    // buttons styles
-@import "components/_checkbox.scss";   // checkbox, radio, switch styles
-@import "components/_tabs.scss";       // tabs styles
-@import "components/_arrows.scss";     // arrows styles
-@import "components/tags.scss";        // tags styles
-@import "components/_badges.scss";     // badges styles
-@import "components/_alerts.scss";     // 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};
+      }
+    }
+  }
+}
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
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	43ae752103	correctifs du tag (le 7.1.3 annule le 7.1.2 erroné)	2020-02-12 11:35:23 +01:00
Raphael Goetter	feac71ac60	Merge pull request #320 from STudio26/patch-1 Fix a typo in Changelog v7.0.1	2019-10-25 16:30:10 +02:00
Raphael	3b908aef7d	Merge branch 'master' of https://github.com/alsacreations/KNACSS	2019-10-25 16:29:42 +02:00
Raphael Goetter	36d65eadf3	Merge pull request #305 from parnissolle/patch-1 Fixing some deprecation warning while using KNACSS in a Laravel project	2019-10-25 16:29:29 +02:00
Raphael Goetter	89801bb885	Merge pull request #305 from parnissolle/patch-1 Fixing some deprecation warning while using KNACSS in a Laravel project	2019-10-25 16:25:29 +02: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
Alain	b44e200970	Fix a typo in Changelog v7.0.1	2019-10-23 23:10:19 +02:00
Rodolphe	3a2848c87b	Fix package.json use gulp 3.x	2019-09-19 16:38:42 +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
Pierre Arnissolle	467fd8e5f6	Fixing some deprecation warning while using KNACSS in a Laravel project DEPRECATION WARNING: As of Dart Sass 2.0.0, !global assignments won't be able to declare new variables. Consider adding `$gutter: null` at the top level. ╷ 24 │ $gutter: $grid-gutters !global; │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ node_modules/knacss/sass/_library/grillade-grid.scss 24:7 @import node_modules/knacss/sass/knacss.scss 51:9 @import stdin 6:9 root stylesheet	2019-04-07 15:11:23 +02:00
Raphael Goetter	3b40b8af06	Merge pull request #304 from wdelenclos/patch-1 [ADD] LICENSE file	2019-02-14 15:54:10 +01:00
Wladimir Delenclos	d4f83324f7	[ADD] LICENSE file	2019-02-13 14:40:03 +01:00
Rodolphe	19c7ff24ac	Merge pull request #302 from alsacreations/patch Fichiers md un peu plus valides	2019-02-09 00:33:02 +01:00
Rodolphe R	dd5bb4e313	Markdownlint	2019-02-09 00:26:48 +01:00
Rodolphe R	88962291a5	Markdown lint	2019-02-09 00:22:21 +01:00
Raphael Goetter	5e90fdb583	ajout de `@supports (display: grid)` dans le mixin de grille	2019-01-30 22:06:31 +01:00
Raphael Goetter	4782f69f44	Ajout de @media (prefers-reduced-motion: reduce)	2019-01-30 21:54:32 +01:00
Raphael Goetter	32ad91f29a	Patch version 7.1.1	2018-12-10 17:17:32 +01:00
Raphael Goetter	8d5ce8fa6c	Merge pull request #293 from el-cms/add-default-flag Ajout du flag !default sur toutes les variables	2018-11-04 11:47:08 +01:00
Olivier	3beb5270b6	Add !default flag on variables	2018-11-04 11:17:27 +01:00
Raphael Goetter	9a5ed3c989	# changelog v7.1.0 (31 octobre 2018) - mise à jour et meilleure intégration de gulp / postCSS : - autoprefixer version postCSS (avec browserslist officielle), - unprefix : pour supprimer les vieux préfixes inutiles - flexbox-fixes : pour corriger les erreurs connues sur IE - gap-properties : polyfill de gap -> grid-gap - minification CSS avec CSSnano - application de `white-space: pre-rap` sur les textarea	2018-10-31 15:24:17 +01:00
Raphael Goetter	ad24c2fd51	Merge pull request #292 from el-cms/typo Suppression d'une typo	2018-10-31 14:11:11 +01:00
Manuel Tancoigne	098840a039	Suppression d'une typo	2018-10-31 08:18:22 +01:00
Raphael Goetter	5bd082dfef	correction d'alignement vertical de `.nav-button`	2018-10-24 10:14:52 +02:00
Raphael Goetter	a85af1ee32	Merge pull request #289 from ml-uni/master Add columns number variable	2018-09-25 11:06:23 +02:00
ml-uni	e3d7ba689f	Change comment for grid number	2018-09-24 09:22:43 +02:00
ml-uni	62a36ee160	Add $cols for grillade-flex	2018-09-24 09:18:37 +02:00
ml-uni	98d49f1f58	Add $cols to grid system	2018-09-24 09:14:03 +02:00
ml-uni	60dfa8a772	Adding cols number variable for grid system	2018-09-24 09:07:25 +02:00
Raphael Goetter	245992c566	suppression de `white-space: nowrap` sur les éléments de formulaire	2018-09-20 14:08:38 +02:00
Raphael Goetter	d8cd5eedd3	Fixing error in json	2018-07-27 15:06:51 +02:00
Raphael Goetter	c6ac6326a8	package.json à jour (7.0.7)	2018-07-27 12:46:49 +02:00
Raphael Goetter	602fa5128a	suppression commentaire sourcemap	2018-07-11 10:19:07 +02:00
Raphael Goetter	41e3be1278	v7.0.7 (3 juillet 2018) cohérence de renommage pour les classes utilitaires (ajout du préfixe `.u-` uniformément)	2018-07-03 16:01:52 +02:00
Raphael Goetter	93a59d5446	URL cheatsheet	2018-06-21 15:21:14 +02:00
Raphael Goetter	ae3addebdb	URL de la doc	2018-06-21 15:19:39 +02:00
Raphael Goetter	3ecebd8871	7.0.6 + npm publish	2018-05-30 07:43:32 +02:00
Raphael Goetter	815f54f919	Merge pull request #283 from PhilippeVay/bugfix/libsass-reboot Renaming reboot.css as a _partial (_reboot.scss)	2018-05-29 21:03:29 +02:00
philippe	e9cb1682fb	reboot.css renamed and imported as an Scss _partial because of libsass deprecation warning	2018-05-29 14:57:50 +02:00
Raphael Goetter	1671256272	checkbox fix	2018-05-26 11:53:48 +02:00
Raphael Goetter	c59a02ff10	mise à jour des styles, et variables des checkbox, radio et switches	2018-05-25 11:54:13 +02:00
Raphael Goetter	acbfc58573	Merge pull request #281 from PhilippeVay/typos-1805 Typos + ligne vide entre règles	2018-05-16 13:23:13 +02:00
PhilippeVay	d943099ca0	Typos un peu partout	2018-05-11 19:53:09 +02:00
Raphael Goetter	9a8875c64d	Merge pull request #280 from TweetPressFr/master typo in CSS property	2018-05-11 09:45:38 +02:00
Julien Maury	0d84dd667a	bold instead of bolder in source _reboot	2018-05-09 22:57:44 +02:00
Julien Maury	19ff8636c0	bold instead of bolder in minified file too	2018-05-09 22:49:51 +02:00
Julien Maury	cd0b6876f8	bold instead of bolder	2018-05-09 22:48:59 +02:00
Raphael Goetter	9584249ca4	version 7.0.4 ajout de ::placeholder	2018-04-04 10:40:39 +02:00
Raphael Goetter	c3586f909a	Merge pull request #274 from aerogus/aerogus-missing-quotes Update _checkbox.scss	2018-03-05 14:44:44 +01:00
Guillaume Seznec	e9fa432c3a	Update _checkbox.scss brunch plante à la compilation de feuilles de style basées sur knacss7 La cause est sans doute dûe à l'absence de guillemets entourant les svg inline des .radio et .checkbox :checked Tous les autres bacgkround-image : url() ont bien les guillemets entourant leur valeur. ``` 11:52:03 - error: Compiling of app/styles/app.styl failed. L2485:47 app/styles/_knacss- 2481\| transition: background-color .15s; 2482\| } 2483\| 2484\| .radio:checked { 2485\| 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); -------------------------------------------------------^ 2486\| background-size: 80% 80%; 2487\| background-position: center; 2488\| background-repeat: no-repeat; illegal unary "%", missing left-hand operand ```	2018-03-04 12:07:36 +01:00
Raphael Goetter	a37552439d	version 7.0.2	2018-03-01 09:57:41 +01:00
Raphael Goetter	e580d2e311	intégration de (auto)grid dans Grillade	2018-01-04 11:10:34 +01:00
Raphael Goetter	383160ac70	Merge pull request #264 from PhilippeVay/autogrid-fix (Auto)grid : typo => colonnes inégales	2018-01-01 13:59:50 +01:00
PhilippeVay	24aea51226	(Auto)grid : bugfix typo grid-auto-columnS, des colonnes égales	2017-12-27 00:57:18 +01:00
Raphael Goetter	f0e2f699ff	version 7.0.1	2017-12-22 09:55:10 +01:00
Raphael Goetter	e1451f2de6	Better handling hyphenations	2017-12-22 09:53:01 +01:00
Raphael Goetter	88373ffc63	SVG fix on IE is now commented	2017-12-22 09:34:24 +01:00
Raphael Goetter	10a6b31380	Quotes enhancement	2017-12-19 15:20:17 +01:00
Raphael Goetter	1bdbb434c0	shortening filenames	2017-12-19 15:15:52 +01:00
Raphael Goetter	48139afd7d	accessibilisation des couleurs	2017-12-18 17:44:07 +01:00
Raphael Goetter	9c03462a52	deleting non used variables in Grid	2017-12-18 12:24:39 +01:00
Raphael Goetter	9daae666df	Grid number start with 2, not 1	2017-12-18 12:22:18 +01:00
Raphael Goetter	2490a5dfe5	date and version number	2017-12-11 15:43:30 +01:00
Raphael Goetter	23cf3768fd	link typo	2017-12-11 15:34:08 +01:00
Raphael Goetter	c1b5f89c6e	Merge branch 'v7'	2017-12-11 15:26:28 +01:00
				`@ -1 +0,0 @@`
				@media (min-width:480px){[class=" grid-"],[class^=grid-]{display:grid;grid-auto-flow:dense}[class=" grid-"].has-gutter,[class^=grid-].has-gutter{grid-gap:1rem}[class=" grid-"].has-gutter-l,[class^=grid-].has-gutter-l{grid-gap:2rem}[class=" grid-"].has-gutter-xl,[class^=grid-].has-gutter-xl{grid-gap:4rem}}[class=grid-1]{grid-template-columns:repeat(1,1fr)}[class=grid-2]{grid-template-columns:repeat(2,1fr)}[class=grid-3]{grid-template-columns:repeat(3,1fr)}[class=grid-4]{grid-template-columns:repeat(4,1fr)}[class=grid-5]{grid-template-columns:repeat(5,1fr)}[class=grid-6]{grid-template-columns:repeat(6,1fr)}[class=grid-7]{grid-template-columns:repeat(7,1fr)}[class=grid-8]{grid-template-columns:repeat(8,1fr)}[class=grid-9]{grid-template-columns:repeat(9,1fr)}[class=grid-10]{grid-template-columns:repeat(10,1fr)}[class=grid-11]{grid-template-columns:repeat(11,1fr)}[class=grid-12]{grid-template-columns:repeat(12,1fr)}[class=col-1]{grid-column:auto/span 1}[class=row-1]{grid-row:auto/span 1}[class=col-2]{grid-column:auto/span 2}[class=row-2]{grid-row:auto/span 2}[class=col-3]{grid-column:auto/span 3}[class=row-3]{grid-row:auto/span 3}[class=col-4]{grid-column:auto/span 4}[class=row-4]{grid-row:auto/span 4}[class=col-5]{grid-column:auto/span 5}[class=row-5]{grid-row:auto/span 5}[class=col-6]{grid-column:auto/span 6}[class=row-6]{grid-row:auto/span 6}[class=col-7]{grid-column:auto/span 7}[class=row-7]{grid-row:auto/span 7}[class=col-8]{grid-column:auto/span 8}[class=row-8]{grid-row:auto/span 8}[class=col-9]{grid-column:auto/span 9}[class=row-9]{grid-row:auto/span 9}[class=col-10]{grid-column:auto/span 10}[class=row-10]{grid-row:auto/span 10}[class=col-11]{grid-column:auto/span 11}[class=row-11]{grid-row:auto/span 11}[class=col-12]{grid-column:auto/span 12}[class=row-12]{grid-row:auto/span 12}@media (min-width:480px) and (max-width:767px){[class=grid-][class="-small-1"]{grid-template-columns:repeat(1,1fr)}[class=col-][class="-small-1"]{grid-column:auto/span 1}[class=grid-][class="-small-2"]{grid-template-columns:repeat(2,1fr)}[class=col-][class="-small-2"]{grid-column:auto/span 2}[class=grid-][class="-small-3"]{grid-template-columns:repeat(3,1fr)}[class=col-][class="-small-3"]{grid-column:auto/span 3}[class=grid-][class="-small-4"]{grid-template-columns:repeat(4,1fr)}[class=col-][class="-small-4"]{grid-column:auto/span 4}[class*="-small-all"]{grid-column:1/-1}}.item-first{-webkit-box-ordinal-group:0;-ms-flex-order:-1;order:-1}.item-last{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1}.grid-offset{visibility:hidden}.col-all{grid-column:1/-1}.row-all{grid-row:1/-1}