Update README.md

supprime une dépendance inutilisée

.browserslistrc

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

.editorconfig

@@ -1,9 +1,7 @@
 root = true
 
 [*]
+end_of_line = lf
 indent_style = space
 indent_size = 2
-end_of_line = lf # doesn't work yet
 charset = utf-8
-trim_trailing_whitespace = true # doesn't work yet
-insert_final_newline = true # doesn't work yet

.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

LICENSE

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

README.md

@@ -1,114 +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 un peu comme une 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).
+## Documentation version v8 (v8 = Reborn)
 
-KNACSS prend en charge les styles de base, mais également la typographie, les modèles de boîte, les alignements et positionnements d'éléments, les grilles de mise en page, dans l'esprit d'être adapté à toutes les tailles d'écran (reponsive). Le tout automatiquement !
+- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
+- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
 
-Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé pour être couplé avec des préprocesseurs tels que LESS ou Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projets web quel que soit son type ou son envergure.
+## Documentation anciennes versions (v7)
 
-## Installation
+- [**Documentation KNACSS v7**](https://www.knacss.com/doc-old.html)
+- [**Pense-bête PDF KNACSS v7**](https://www.knacss.com/assets/pdf/knacss7-cheatsheet.pdf)
 
-La version courte est "il n'y a rien à installer".
-
-Selon votre environnement de travail vous suffit de récupérer la feuille de styles :
-
-- en version [CSS classique](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss-unminified.css) (ou [minifié](vhttps://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss.css))
-- en version [Sass](https://github.com/raphaelgoetter/KNACSS/tree/master/sass)
-
-_La version Sass sera bien évidemment plus malléable grâce à l'apport de variables et fonctions._
-
-À noter que KNACSS est basé sur deux outils :
-
-- [Normalize.css](http://necolas.github.io/normalize.css/), célèbre - et éprouvé - reset CSS employé par Twitter, Github, Bootstrap, Guardian, etc.
-- [include-media](http://include-media.com/), mixins Sass pour la gestion des Media Queries.
-
-## Usage
-
-KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos goûts), qu'il vous suffit d'ajouter à votre page HTML :
-
-    <link rel="stylesheet" href="knacss.css">
-
-Il est également possible de l'installer (toutes versions) via [Bower](http://bower.io/) : ```bower install knacss```
-
-## Compatibilité
-
-KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs à partir d'IE10 inclus.
-
-
-## RTFM!
-
-KNACSS se veut être un outil simple (contrairement aux usines à gaz que sont Bootstrap ou Foundation), mais évolutif.
-La contrepartie est que cela nécessite de votre part de bonnes connaissances en CSS et un petit effort de compréhension et de d'apprentissage des mécanismes de l'outil.
-
-Une [**documentation**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc) détaillée et illustrée est en cours de rédaction. Je vous invite vivement à la parcourir avant de vous jeter sur KNACSS.
-
-Sachez qu'un [pense-bête en PDF](http://knacss.com/KNACSS-cheatsheet.pdf) est également disponible pour vous rappeler des classes utiles de KNACSS.
-
-## Juste une grille ? Grillade !
-
-KNACSS en version complète ne vous convient pas&nbsp;? Seule la grille flexbox vous intéresse&nbsp;? Bienvenue dans *Grillade* !
-
-- en version [CSS classique](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css) (parfaitement autonome et ne pèse que 4ko seulement&nbsp;!)
-- en version [Sass](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.scss) (avec variables)
-
-Dans tous les cas n'oubliez quand même pas de lire [la documentation](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md) que l'on a concoctée rien que pour vous.
-
-
-## Préprocesseurs
-
-KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc par défaut plutôt des `.scss` et non des `.css`.
-
-Si, comme nous, vous intégrez à l'aide de préprocesseurs, KNACSS va vous faciliter la vie dès le début du projet puisqu'un [fichier de configuration](https://github.com/raphaelgoetter/KNACSS/blob/master/sass/_config-variables.scss) contenant toutes les variables du projet est intégré.
-Libre à vous de le modifier selon les contraintes de votre projet.
-
-**Attention**, si vous importez KNACSS automatiquement via Bower (par exemple dans un dossier `vendor`), ce fichier de configuration risque d'être écrasé à chaque mise à jour de KNACSS. **Nous vous invitons à en faire une copie dans votre dossier de travail et à commenter l'appel au fichier de config de `vendor`**.
-
-Dans le cas d'un usage via préprocesseur, vos deux fichiers de travail principaux seront :
-- le fichier `sass/_config-variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
-- le fichier `sass/knacss.scss` qui importe tous les fichiers que vous risquez d'employer dans votre projet.
-
-En cours de développement, il vous suffit de compiler ce fichier `sass/knacss.scss` pour obtenir vos fichiers CSS utiles.
-
-### Préfixes navigateurs
-
-Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, ...) pour être certain que les propriétés CSS fonctionneront partout.
-
-Au sein de la version classique CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier** (Autoprefixer réglé à "last 2 versions").
-
-**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
-
-### Mise à jour depuis une version précédente de KNACSS ?
-
-La version `5.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `4.*.*`.
-
-Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 5 de KNACSS&nbsp;:
-
-#### Modifications majeures depuis la `4.*.*`
-
-- suppression de la version LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge)
-- suppression des fallbacks pour IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
-- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-`
-- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
-- ajout de la library include-media (http://include-media.com/)
-- grille "grillade" à présent en mobile first
-
-#### Modifications majeures depuis la `3.*.*`
-
-- La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.left`, `.start`, `.fl`, `.table-`, `.flex-start`, `.flex-end`)&nbsp;: `.left` ne correspond plus à un `float: left` mais à un `margin-right: auto`, il faut dorénavant employer `.fl` pour obtenir un flottant à gauche;  `.right` ne correspond plus à un `float: right` mais à un `margin-left: auto`, il faut dorénavant employer `.fr` pour obtenir un flottant à droite; `.start` et `.end` n'existent plus
-- Les noms des conteneurs de grille ont changé et nécessitent systématiquement un trait d'union : ancien nommage : `.grid2`, `.grid1-3`;  nouveau nommage : `.grid-2`, `.grid-1-3`
-- Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes). Nouveau nommage :
-`.flex-container, .flex-container-h`, `.flex-container-v`, `.flex-item-fluid`, `.flex-item-center`, `.flex-item-first, .flex-item-medium, .flex-item-last`
-
-### Utilisateur de SPIP ?
-
-Le CMS SPIP impose une classe générique `.fr` sur l'élément `<html>`, or cette classe est également employée pour les positionnements flottants dans KNACSS.
-
-Si vous êtes un utilisateur de SPIP, nous vous conseillons de modifier les fichiers CSS de KNACSS et de remplacer les classes `.fr` et `.fl` par `:not(html) .fr` et `:not(html) .fl`
-
-## Liens utiles
-
-* Site web de KNACSS : http://knacss.com
-* [**Documentation détaillée**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc)
-* Sur Alsacreations.com : ["découverte du framework KNACSS"](http://www.alsacreations.com/tuto/lire/1577-decouverte-du-framework-css-KNACSS.html)

bower.json

@@ -1,23 +0,0 @@
-{
-  "name": "KNACSS",
-  "version": "5.0.1",
-  "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"
-  ]
-}

changelog.md

@@ -1,12 +1,191 @@
-# changelog v5.0.1 (24 mai 2016)
+# 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
+  - déplacement des variables de gouttières de grillade.scss vers variables.scss
+  - déplacement des variables de breakpoints de breakpoints.scss vers variables.scss
+  - regroupement des styles des tableaux
+  - renommage des variables couleur de projets
+  - renommage des variables de composants
+  - renommage des variables d'espacement (`$tiny-value` -> `$spacer-micro`)
+  - automatisation des classes utilitaires via Sass
+  - suppression du namespace "kna-"
+- refonte :
+  - système de grille (dorénavant basé sur Grid Layout)
+  - boutons, avec possibilités de variantes (primary, success, warning, etc.)
+  - styles de formulaires
+  - styles des tableaux
+  - l'objet autogrid passe en Grid Layout
+- ajouts :
+  - des badges (tags), avec possibilités de variantes (primary, success, warning, etc.)
+  - des alertes, avec possibilités de variantes (primary, success, warning, etc.)
+  - d'un bouton de navigation `.nav-button`
+  - des checkbox, radio et bouton "switch" stylés
+  - des onglets (tabs)
+  - des flèches courantes (haut, droit, bas, gauche) en SVG data-URI
+  - création d'un mixin de grille
+  - 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)
+
+- 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/>
+
+## Changelog v6.1.1 (21 avril 2017)
+
+- amélioration du mixin "respond-to()"
+
+## 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)
+
+- application de `$link-color-hover` uniquement si différent de `$link-color`
+
+## 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)
+
+- 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)
+
+- 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)
+
+- renommage des variables
+
+## 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)
+
+- optimisation de la grille (de 8ko à 3ko pour la version Sass)
+
+## 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)
+- modularisation des fichiers et dossiers, classés par fonctions (config, vendor, library, objects, utility)
+- ajout des objects courants : [media](http://codepen.io/raphaelgoetter/pen/KMWWwj) et [autogrid](http://codepen.io/raphaelgoetter/pen/KMgBJd?editors=1100)
+- suppression des positionnements tabulaires. `.row`, `.col` et `.line` n'ont plus lieu d'être depuis Flexbox, pouvaient entrer en conflit avec d'autres frameworks et ne font que parasiter KNACSS
+- amélioration du fichier Gulpfile.js
+- corrections de bugs divers
+- mise à jour de la doc
+
+## 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`
@@ -16,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
@@ -47,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
@@ -68,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
@@ -97,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).
 
@@ -141,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"
+- 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)
+- 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/)
+- 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
+- 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 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)
+- 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
+- documentation en français
-* PDF pense-bête mis à jour : http://knacss.com/KNACSS-cheatsheet.pdf
+- 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)
+- 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.
+- 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.).
+- 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
+- déplacement et commentaire sur la règle body > script
-* correction du bug des height: auto sur les images au format SVG
+- correction du bug des height: auto sur les images au format SVG
-* meilleure intégration de box-sizing
+- meilleure intégration de box-sizing
-* suppression du fichier dédié aux réglages des bugs des anciennes versions d'IE6-IE8
+- 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!)
+- 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")
+- 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
+- ajout des préfixes ".table-" devant les styles de décoration des tableaux
-* suppression du fichier icons.css, statistiquement inutile en pratique
+- suppression du fichier icons.css, statistiquement inutile en pratique
-* meilleure cohérence de nommage entre .left, .start, .txtleft, .fl
+- meilleure cohérence de nommage entre .left, .start, .txtleft, .fl
-* ajout d'un fichier de reset dédié à WordPress
+- ajout d'un fichier de reset dédié à WordPress
-* refonte intégrale des grilles en Flexbox (et en plus ça marche sur IE10 !)
+- refonte intégrale des grilles en Flexbox (et en plus ça marche sur IE10 !)
-* ajout d'un fichier .editorconfig (http://editorconfig.org/)
+- ajout d'un fichier .editorconfig (<http://editorconfig.org/>)
-* passage des :before/:after en ::before/::after
+- passage des :before/:after en ::before/::after
-* ajout de sourcemaps CSS
+- ajout de sourcemaps CSS
-* suppression des images noir et blanc forcées en media print
+- suppression des images noir et blanc forcées en media print
-* correction de la formule LESS `{calc(1em * .625);`
+- correction de la formule LESS `{calc(1em * .625);`
-* ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
+- ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
-* mise à jour du générateur de gabarits [Schnaps.it](http://schnaps.it/)
+- mise à jour du générateur de gabarits [Schnaps.it](http://schnaps.it/)

css/grillade.css

@@ -1 +0,0 @@
-[class*=grid-]{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-left:-2rem}[class*=grid-]>*{box-sizing:border-box;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto;width:calc(100% - 2rem - .01px);min-width:0;min-height:0;margin-left:2rem}@media (min-width:321px) and (max-width:640px){[class*=grid-]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){[class*=grid-2]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*=grid-2]>.grid-item-double{width:calc(100% * 2 / 2 - 2rem)}[class*=grid-3]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*=grid-3]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem)}[class*=grid-4]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*=grid-4]>.grid-item-double{width:calc(100% * 2 / 4 - 2rem)}[class*=grid-5]>*{width:calc(100% * 1 / 5 - 2rem - .01px)}[class*=grid-5]>.grid-item-double{width:calc(100% * 2 / 5 - 2rem)}[class*=grid-6]>*{width:calc(100% * 1 / 6 - 2rem - .01px)}[class*=grid-6]>.grid-item-double{width:calc(100% * 2 / 6 - 2rem)}[class*=grid-7]>*{width:calc(100% * 1 / 7 - 2rem - .01px)}[class*=grid-7]>.grid-item-double{width:calc(100% * 2 / 7 - 2rem)}[class*=grid-8]>*{width:calc(100% * 1 / 8 - 2rem - .01px)}[class*=grid-8]>.grid-item-double{width:calc(100% * 2 / 8 - 2rem)}[class*=grid-9]>*{width:calc(100% * 1 / 9 - 2rem - .01px)}[class*=grid-9]>.grid-item-double{width:calc(100% * 2 / 9 - 2rem)}[class*=grid-10]>*{width:calc(100% * 1 / 10 - 2rem - .01px)}[class*=grid-10]>.grid-item-double{width:calc(100% * 2 / 10 - 2rem)}[class*=grid-11]>*{width:calc(100% * 1 / 11 - 2rem - .01px)}[class*=grid-11]>.grid-item-double{width:calc(100% * 2 / 11 - 2rem)}[class*=grid-12]>*{width:calc(100% * 1 / 12 - 2rem - .01px)}[class*=grid-12]>.grid-item-double{width:calc(100% * 2 / 12 - 2rem)}}@media (min-width:321px) and (max-width:640px){[class*="-small-4"]>*{width:calc(100% * 1 / 4 - 2rem - .01px)}[class*="-small-4"]>.grid-item-double{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-3"]>*{width:calc(100% * 1 / 3 - 2rem - .01px)}[class*="-small-3"]>.grid-item-double{width:calc(100% * 2 / 3 - 2rem - .01px)}[class*="-small-2"]>*{width:calc(100% * 1 / 2 - 2rem - .01px)}[class*="-small-2"]>.grid-item-double,[class*="-small-1"]>*,[class*="-small-1"]>.grid-item-double{width:calc(100% - 2rem - .01px)}}@media (min-width:641px){.grid-2-1>:nth-child(odd){width:calc(66.66667% - 2rem)}.grid-1-2>:nth-child(odd),.grid-2-1>:nth-child(even){width:calc(33.33333% - 2rem)}.grid-1-2>:nth-child(even){width:calc(66.66667% - 2rem)}.grid-3-1>:nth-child(odd){width:calc(75% - 2rem)}.grid-1-3>:nth-child(odd),.grid-3-1>:nth-child(even){width:calc(25% - 2rem)}.grid-1-3>:nth-child(even){width:calc(75% - 2rem)}.grid-3-2>:nth-child(odd){width:calc(60% - 2rem)}.grid-2-3>:nth-child(odd),.grid-3-2>:nth-child(even){width:calc(40% - 2rem)}.grid-2-3>:nth-child(even){width:calc(60% - 2rem)}.grid-4-1>:nth-child(odd){width:calc(80% - 2rem)}.grid-1-4>:nth-child(odd),.grid-4-1>:nth-child(even){width:calc(20% - 2rem)}.grid-1-4>:nth-child(even){width:calc(80% - 2rem)}}.pull{margin-right:auto}.push{margin-left:auto}

css/grillade.scss

@@ -1,805 +0,0 @@
-@charset 'UTF-8';
-
-//     _            _           _                           _ _
-//    (_)          | |         | |                         | (_)
-//     _ _ __   ___| |_   _  __| | ___   _ __ ___   ___  __| |_  __ _
-//    | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
-//    | | | | | (__| | |_| | (_| |  __/ | | | | | |  __/ (_| | | (_| |
-//    |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
-//
-//      Simple, elegant and maintainable media queries in Sass
-//                        v1.4.3
-//
-//                http://include-media.com
-//
-//         Authors: Eduardo Boucas (@eduardoboucas)
-//                  Hugo Giraudel (@hugogiraudel)
-//
-//      This project is licensed under the terms of the MIT license
-
-
-////
-/// include-media library public configuration
-/// @author Eduardo Boucas
-/// @access public
-////
-
-
-///
-/// Creates a list of global breakpoints
-///
-/// @example scss - Creates a single breakpoint with the label `phone`
-///  $breakpoints: ('phone': 320px);
-///
-$breakpoints: (
-  'phone': 320px,
-  'tablet': 768px,
-  'desktop': 1024px
-) !default;
-
-
-///
-/// Creates a list of static expressions or media types
-///
-/// @example scss - Creates a single media type (screen)
-///  $media-expressions: ('screen': 'screen');
-///
-/// @example scss - Creates a static expression with logical disjunction (OR operator)
-///  $media-expressions: (
-///    'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
-///  );
-///
-$media-expressions: (
-  'screen': 'screen',
-  'print': 'print',
-  'handheld': 'handheld',
-  'landscape': '(orientation: landscape)',
-  'portrait': '(orientation: portrait)',
-  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
-  'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)'
-) !default;
-
-
-///
-/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
-///
-/// @example scss - Interval for pixels is defined as `1` by default
-///  @include media('>128px') {}
-///
-///  /* Generates: */
-///  @media (min-width: 129px) {}
-///
-/// @example scss - Interval for ems is defined as `0.01` by default
-///  @include media('>20em') {}
-///
-///  /* Generates: */
-///  @media (min-width: 20.01em) {}
-///
-/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
-///  @include media('>2.0rem') {}
-///
-///  /* Generates: */
-///  @media (min-width: 2.1rem) {}
-///
-$unit-intervals: (
-  'px': 1,
-  'em': 0.01,
-  'rem': 0.1
-) !default;
-
-///
-/// Defines whether support for media queries is available, useful for creating separate stylesheets
-/// for browsers that don't support media queries.
-///
-/// @example scss - Disables support for media queries
-///  $im-media-support: false;
-///  @include media('>=tablet') {
-///    .foo {
-///      color: tomato;
-///    }
-///  }
-///
-///  /* Generates: */
-///  .foo {
-///    color: tomato;
-///  }
-///
-$im-media-support: true !default;
-
-///
-/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
-/// intercept the breakpoint will be displayed, any others will be ignored.
-///
-/// @example scss - This media query will show because it intercepts the static breakpoint
-///  $im-media-support: false;
-///  $im-no-media-breakpoint: 'desktop';
-///  @include media('>=tablet') {
-///    .foo {
-///      color: tomato;
-///    }
-///  }
-///
-///  /* Generates: */
-///  .foo {
-///    color: tomato;
-///  }
-///
-/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
-///  $im-media-support: false;
-///  $im-no-media-breakpoint: 'tablet';
-///  @include media('>=desktop') {
-///    .foo {
-///      color: tomato;
-///    }
-///  }
-///
-///  /* No output */
-///
-$im-no-media-breakpoint: 'desktop' !default;
-
-///
-/// Selects which media expressions are allowed in an expression for it to be used when media queries
-/// are not supported.
-///
-/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
-///  $im-media-support: false;
-///  $im-no-media-breakpoint: 'desktop';
-///  $im-no-media-expressions: ('screen');
-///  @include media('>=tablet', 'screen') {
-///    .foo {
-///      color: tomato;
-///    }
-///  }
-///
-///   /* Generates: */
-///   .foo {
-///     color: tomato;
-///   }
-///
-/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
-///  $im-media-support: false;
-///  $im-no-media-breakpoint: 'desktop';
-///  $im-no-media-expressions: ('screen');
-///  @include media('>=tablet', 'retina2x') {
-///    .foo {
-///      color: tomato;
-///    }
-///  }
-///
-///  /* No output */
-///
-$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
-
-////
-/// Cross-engine logging engine
-/// @author Hugo Giraudel
-/// @access private
-////
-
-
-///
-/// Log a message either with `@error` if supported
-/// else with `@warn`, using `feature-exists('at-error')`
-/// to detect support.
-///
-/// @param {String} $message - Message to log
-///
-@function log($message) {
-  @if feature-exists('at-error') {
-    @error $message;
-  } @else {
-    @warn $message;
-    $_: noop();
-  }
-
-  @return $message;
-}
-
-
-///
-/// Wrapper mixin for the log function so it can be used with a more friendly
-/// API than `@if log('..') {}` or `$_: log('..')`. Basically, use the function
-/// within functions because it is not possible to include a mixin in a function
-/// and use the mixin everywhere else because it's much more elegant.
-///
-/// @param {String} $message - Message to log
-///
-@mixin log($message) {
-  @if log($message) {}
-}
-
-
-///
-/// Function with no `@return` called next to `@warn` in Sass 3.3
-/// to trigger a compiling error and stop the process.
-///
-@function noop() {}
-
-///
-/// Determines whether a list of conditions is intercepted by the static breakpoint.
-///
-/// @param {Arglist}   $conditions  - Media query conditions
-///
-/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
-///
-@function im-intercepts-static-breakpoint($conditions...) {
-  $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);
-
-  @if not $no-media-breakpoint-value {
-    @if log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}
-  }
-
-  @each $condition in $conditions {
-    @if not map-has-key($media-expressions, $condition) {
-      $operator: get-expression-operator($condition);
-      $prefix: get-expression-prefix($operator);
-      $value: get-expression-value($condition, $operator);
-
-      // scss-lint:disable SpaceAroundOperator
-      @if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
-          ($prefix == 'min' and $value > $no-media-breakpoint-value) {
-        @return false;
-      }
-    } @else if not index($im-no-media-expressions, $condition) {
-      @return false;
-    }
-  }
-
-  @return true;
-}
-
-////
-/// Parsing engine
-/// @author Hugo Giraudel
-/// @access private
-////
-
-
-///
-/// Get operator of an expression
-///
-/// @param {String} $expression - Expression to extract operator from
-///
-/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
-///
-@function get-expression-operator($expression) {
-  @each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
-    @if str-index($expression, $operator) {
-      @return $operator;
-    }
-  }
-
-  // It is not possible to include a mixin inside a function, so we have to
-  // rely on the `log(..)` function rather than the `log(..)` mixin. Because
-  // functions cannot be called anywhere in Sass, we need to hack the call in
-  // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
-  // Sass 3.3, change this line in `@if log(..) {}` instead.
-  $_: log('No operator found in `#{$expression}`.');
-}
-
-
-///
-/// Get dimension of an expression, based on a found operator
-///
-/// @param {String} $expression - Expression to extract dimension from
-/// @param {String} $operator - Operator from `$expression`
-///
-/// @return {String} - `width` or `height` (or potentially anything else)
-///
-@function get-expression-dimension($expression, $operator) {
-  $operator-index: str-index($expression, $operator);
-  $parsed-dimension: str-slice($expression, 0, $operator-index - 1);
-  $dimension: 'width';
-
-  @if str-length($parsed-dimension) > 0 {
-    $dimension: $parsed-dimension;
-  }
-
-  @return $dimension;
-}
-
-
-///
-/// Get dimension prefix based on an operator
-///
-/// @param {String} $operator - Operator
-///
-/// @return {String} - `min` or `max`
-///
-@function get-expression-prefix($operator) {
-  @return if(index(('<', '<=', '≤'), $operator), 'max', 'min');
-}
-
-
-///
-/// Get value of an expression, based on a found operator
-///
-/// @param {String} $expression - Expression to extract value from
-/// @param {String} $operator - Operator from `$expression`
-///
-/// @return {Number} - A numeric value
-///
-@function get-expression-value($expression, $operator) {
-  $operator-index: str-index($expression, $operator);
-  $value: str-slice($expression, $operator-index + str-length($operator));
-
-  @if map-has-key($breakpoints, $value) {
-    $value: map-get($breakpoints, $value);
-  } @else {
-    $value: to-number($value);
-  }
-
-  $interval: map-get($unit-intervals, unit($value));
-
-  @if not $interval {
-    // It is not possible to include a mixin inside a function, so we have to
-    // rely on the `log(..)` function rather than the `log(..)` mixin. Because
-    // functions cannot be called anywhere in Sass, we need to hack the call in
-    // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
-    // Sass 3.3, change this line in `@if log(..) {}` instead.
-    $_: log('Unknown unit `#{unit($value)}`.');
-  }
-
-  @if $operator == '>' {
-    $value: $value + $interval;
-  } @else if $operator == '<' {
-    $value: $value - $interval;
-  }
-
-  @return $value;
-}
-
-
-///
-/// Parse an expression to return a valid media-query expression
-///
-/// @param {String} $expression - Expression to parse
-///
-/// @return {String} - Valid media query
-///
-@function parse-expression($expression) {
-  // If it is part of $media-expressions, it has no operator
-  // then there is no need to go any further, just return the value
-  @if map-has-key($media-expressions, $expression) {
-    @return map-get($media-expressions, $expression);
-  }
-
-  $operator: get-expression-operator($expression);
-  $dimension: get-expression-dimension($expression, $operator);
-  $prefix: get-expression-prefix($operator);
-  $value: get-expression-value($expression, $operator);
-
-  @return '(#{$prefix}-#{$dimension}: #{$value})';
-}
-
-///
-/// Slice `$list` between `$start` and `$end` indexes
-///
-/// @access private
-///
-/// @param {List} $list - List to slice
-/// @param {Number} $start [1] - Start index
-/// @param {Number} $end [length($list)] - End index
-///
-/// @return {List} Sliced list
-///
-@function slice($list, $start: 1, $end: length($list)) {
-  @if length($list) < 1 or $start > $end {
-    @return ();
-  }
-
-  $result: ();
-
-  @for $i from $start through $end {
-    $result: append($result, nth($list, $i));
-  }
-
-  @return $result;
-}
-
-////
-/// String to number converter
-/// @author Hugo Giraudel
-/// @access private
-////
-
-
-///
-/// Casts a string into a number
-///
-/// @param {String | Number} $value - Value to be parsed
-///
-/// @return {Number}
-///
-@function to-number($value) {
-  @if type-of($value) == 'number' {
-    @return $value;
-  } @else if type-of($value) != 'string' {
-    $_: log('Value for `to-number` should be a number or a string.');
-  }
-
-  $first-character: str-slice($value, 1, 1);
-  $result: 0;
-  $digits: 0;
-  $minus: ($first-character == '-');
-  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
-
-  // Remove +/- sign if present at first character
-  @if ($first-character == '+' or $first-character == '-') {
-    $value: str-slice($value, 2);
-  }
-
-  @for $i from 1 through str-length($value) {
-    $character: str-slice($value, $i, $i);
-
-    @if not (index(map-keys($numbers), $character) or $character == '.') {
-      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
-    }
-
-    @if $character == '.' {
-      $digits: 1;
-    } @else if $digits == 0 {
-      $result: $result * 10 + map-get($numbers, $character);
-    } @else {
-      $digits: $digits * 10;
-      $result: $result + map-get($numbers, $character) / $digits;
-    }
-  }
-
-  @return if($minus, -$result, $result);
-}
-
-
-///
-/// Add `$unit` to `$value`
-///
-/// @param {Number} $value - Value to add unit to
-/// @param {String} $unit - String representation of the unit
-///
-/// @return {Number} - `$value` expressed in `$unit`
-///
-@function to-length($value, $unit) {
-  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
-
-  @if not index(map-keys($units), $unit) {
-    $_: log('Invalid unit `#{$unit}`.');
-  }
-
-  @return $value * map-get($units, $unit);
-}
-
-///
-/// This mixin aims at redefining the configuration just for the scope of
-/// the call. It is helpful when having a component needing an extended
-/// configuration such as custom breakpoints (referred to as tweakpoints)
-/// for instance.
-///
-/// @author Hugo Giraudel
-///
-/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
-/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
-///
-/// @example scss - Extend the global breakpoints with a tweakpoint
-///  @include media-context(('custom': 678px)) {
-///    .foo {
-///      @include media('>phone', '<=custom') {
-///       // ...
-///      }
-///    }
-///  }
-///
-/// @example scss - Extend the global media expressions with a custom one
-///  @include media-context($tweak-media-expressions: ('all': 'all')) {
-///    .foo {
-///      @include media('all', '>phone') {
-///       // ...
-///      }
-///    }
-///  }
-///
-/// @example scss - Extend both configuration maps
-///  @include media-context(('custom': 678px), ('all': 'all')) {
-///    .foo {
-///      @include media('all', '>phone', '<=custom') {
-///       // ...
-///      }
-///    }
-///  }
-///
-@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
-  // Save global configuration
-  $global-breakpoints: $breakpoints;
-  $global-media-expressions: $media-expressions;
-
-  // Update global configuration
-  $breakpoints: map-merge($breakpoints, $tweakpoints) !global;
-  $media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;
-
-  @content;
-
-  // Restore global configuration
-  $breakpoints: $global-breakpoints !global;
-  $media-expressions: $global-media-expressions !global;
-}
-
-////
-/// include-media public exposed API
-/// @author Eduardo Boucas
-/// @access public
-////
-
-
-///
-/// Generates a media query based on a list of conditions
-///
-/// @param {Arglist}   $conditions  - Media query conditions
-///
-/// @example scss - With a single set breakpoint
-///  @include media('>phone') { }
-///
-/// @example scss - With two set breakpoints
-///  @include media('>phone', '<=tablet') { }
-///
-/// @example scss - With custom values
-///  @include media('>=358px', '<850px') { }
-///
-/// @example scss - With set breakpoints with custom values
-///  @include media('>desktop', '<=1350px') { }
-///
-/// @example scss - With a static expression
-///  @include media('retina2x') { }
-///
-/// @example scss - Mixing everything
-///  @include media('>=350px', '<tablet', 'retina3x') { }
-///
-@mixin media($conditions...) {
-  // scss-lint:disable SpaceAroundOperator
-  @if ($im-media-support and length($conditions) == 0) or
-      (not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {
-    @content;
-  } @else if ($im-media-support and length($conditions) > 0) {
-    @media #{unquote(parse-expression(nth($conditions, 1)))} {
-      // Recursive call
-      @include media(slice($conditions, 2)...) {
-        @content;
-      }
-    }
-  }
-}
-
-// Config file and project variables
-
-// font sizes
-$base-font-size : 1.4rem !default; // ex. 1.4rem would be "14px" equivalent
-$line-height    : 1.5 !default; // equiv line-height 1.5
-$h1-size        : 3.2rem !default; // equiv "32px"
-$h2-size        : 2.8rem !default; // equiv "28px"
-$h3-size        : 2.4rem !default; // equiv "24px"
-$h4-size        : 2.0rem !default; // equiv "20px"
-$h5-size        : 1.8rem !default; // equiv "18px"
-$h6-size        : 1.6rem !default; // equiv "16px"
-
-// font stacks
-$font-stack-common    : sans-serif !default; // common font
-$font-stack-headings  : sans-serif !default; // headings font
-$font-stack-monospace : consolas, courier, monospace !default; // monospace font
-
-// font colors
-$base-color             : #000 !default; // text color on body and content
-$alpha-color            : #000 !default; // text color on primary elements
-$beta-color             : #000 !default; // text color on secondary elements
-$headings-color         : #000 !default; // text color on headings
-$headings-1-color       : #000 !default; // text color on headings level 1
-$headings-2-color       : #000 !default; // text color on headings level 2
-$headings-3-color       : #000 !default; // text color on headings level 3
-$base-color-link        : #333 !default; // base links color
-$base-color-link-hover  : #000 !default; // base hovered/focused links color
-
-// backgrounds
-$base-background      : #fff !default; // body background color
-$alpha-background     : #fff !default; // primary elements background color
-$beta-background      : #fff !default; // secondary elements background color
-
-// spacings (choose unit you prefer)
-$tiny-value             : .5rem !default; // tiny value for margins / paddings
-$tiny-plus-value        : .7rem !default; // tiny+ value for margins / paddings
-$small-value            : 1rem !default; // small value for margins / paddings
-$small-plus-value       : 1.5rem !default; // small+ value for margins / paddings
-$medium-value           : 2rem !default; // medium value for margins / paddings
-$medium-plus-value      : 3rem !default; // medium+ value for margins / paddings
-$large-value            : 4rem !default; // large value for margins / paddings
-$large-plus-value       : 6rem !default; // large value for margins / paddings
-$extra-large-value      : 8rem !default; // extra large value for margins / paddings
-$extra-large-plus-value : 12rem !default; // extra large value for margins / paddings
-$ultra-large-value      : 16rem !default; // ultra large value for margins / paddings
-$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings
-
-// breakpoints (overrides include-media.scss) (choose unit you prefer)
-// doc : http://include-media.com/documentation/
-$breakpoints: (
-  tiny-screen       : 320px,
-  tiny-plus-screen  : 480px,
-  small-screen      : 640px,
-  small-plus-screen : 768px,
-  medium-screen     : 960px,
-  medium-plus-screen: 1024px,
-  large-screen      : 1280px,
-  large-plus-screen : 1440px,
-  extra-large-screen: 1600px,
-  ultra-large-screen: 1920px
-);
-
-// grids variables (choose unit you prefer)
-$grid-gutter:  2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
-$grid-number:  4 !default; // number of equal columns
-$grid-left:    2 !default; // left side of uneven columns
-$grid-right:   1 !default; // right side of uneven columns
-
-//kna-namespace (default : null)
-$kna-namespace: null !default;
-
-/* ---------------------------------- */
-/* ==Grid Layout (grillade)           */
-/* ---------------------------------- */
-
-// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html
-// Demo : http://codepen.io/raphaelgoetter/pen/ZYjwEB
-
-// Usage in vanilla CSS:
-// - <div class="grid-4"> for an equal fourth columns grid container
-// - <div class="grid-2-1"> for an uneven columns grid container
-
-// Usage with preprocessors : if you're using Sass, you can config grids variables :
-// n = number of columns (default = 4) / g = gutter value (default = 1em)
-// example : .grid-perso { @include grid(12, 10px); }
-// ... or uneven grids :
-// left = left ratio column (default = 2) / right = right ratio column (default = 1)
-// example : .grid-perso { @include uneven-grid(2, 1, 10px); }
-
-/* grid container */
-[class*="#{$kna-namespace}grid-"] {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-left: -$grid-gutter;
-}
-
-/* grid childs */
-[class*="#{$kna-namespace}grid-"] > * {
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  width: calc(100% - #{$grid-gutter} - .01px);// @bugfix IE https://github.com/alsacreations/KNACSS/issues/133;
-  min-width: 0;
-  min-height: 0;
-  margin-left: $grid-gutter;
-  @include media('>tiny-screen', '<=small-screen') {
-    & {
-      width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
-    }
-    &.grid-item-double {
-      width: calc(100% - #{$grid-gutter} - .01px);
-    }
-  }
-}
-
-// Sass mixins for *equal* columns grid container
-// example : .grid-perso { @include grid(12); }
-@mixin grid($grid-number:$grid-number,$newgutter:$grid-gutter) {
-  @if $newgutter != $grid-gutter {
-    margin-left: -$newgutter;
-  }
-  & > * {
-    width: calc(100% * 1 / #{$grid-number} - #{$newgutter} - .01px);
-    @if $newgutter != $grid-gutter {
-      margin-left: $newgutter;
-    }
-  }
-  & > .#{$kna-namespace}grid-item-double {
-    width: calc(100% * 2 / #{$grid-number} - #{$newgutter});
-  }
-}
-
-// Examples : will be compiled in CSS
-@include media('>small-screen') {
-  @for $i from 2 through 12 {
-    [class*="#{$kna-namespace}grid-#{$i}"] {
-        @include grid(#{$i});
-    }
-  }
-}
-
-/* Responsive grid */
-// example : .grid-4-small-2 will be 1 column (tiny) then 2 columns (small) then 4 columns
-@include media('>tiny-screen', '<=small-screen') {
-  [class*="-small-4"] > * {
-    width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-4"] > .grid-item-double {
-    width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-3"] > * {
-    width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-3"] > .grid-item-double {
-    width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-2"] > * {
-    width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-2"] > .grid-item-double {
-    width: calc(100% - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-1"] > * {
-    width: calc(100% - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-1"] > .grid-item-double {
-    width: calc(100% - #{$grid-gutter} - .01px);
-  }
-}
-
-
-// Sass mixins for *unequal* columns grid container
-// example : .grid-perso { @include uneven-grid(2, 1); }
-@mixin uneven-grid($grid-left:$grid-left, $grid-right:$grid-right, $newgutter:$grid-gutter) {
-  @if $newgutter != $grid-gutter {
-    margin-left: -$newgutter;
-  }
-  > * {
-    @if $newgutter != $grid-gutter {
-      margin-left: $newgutter;
-      width: calc(100% - #{$newgutter});
-    }
-  }
-  @include media('>small-screen') {
-    & > :nth-child(odd) {
-      $size: ($grid-left / ($grid-left + $grid-right)) * 100%;
-      width: calc(#{$size} - #{$newgutter});
-    }
-    & > :nth-child(even) {
-      $size: ($grid-right / ($grid-left + $grid-right)) * 100%;
-      width: calc(#{$size} - #{$newgutter});
-    }
-  }
-}
-
-
-// Examples : will be compiled in CSS
-
-.#{$kna-namespace}grid-2-1 {
-  @include uneven-grid(2,1);
-}
-
-.#{$kna-namespace}grid-1-2 {
-  @include uneven-grid(1,2);
-}
-
-.#{$kna-namespace}grid-3-1 {
-  @include uneven-grid(3,1);
-}
-
-.#{$kna-namespace}grid-1-3 {
-  @include uneven-grid(1,3);
-}
-
-.#{$kna-namespace}grid-3-2 {
-  @include uneven-grid(3,2);
-}
-
-.#{$kna-namespace}grid-2-3 {
-  @include uneven-grid(2,3);
-}
-
-.#{$kna-namespace}grid-4-1 {
-  @include uneven-grid(4,1);
-}
-
-.#{$kna-namespace}grid-1-4 {
-  @include uneven-grid(1,4);
-}
-
-.#{$kna-namespace}pull {
-  margin-right: auto;
-}
-.#{$kna-namespace}push {
-  margin-left: auto;
-}

doc/00-commencer.md

@@ -1,114 +0,0 @@
-# KNACSS
-
-http://www.knacss.com
-
-KNACSS, c'est un peu comme une 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).
-
-KNACSS prend en charge les styles de base, mais également la typographie, les modèles de boîte, les alignements et positionnements d'éléments, les grilles de mise en page, dans l'esprit d'être adapté à toutes les tailles d'écran (reponsive). Le tout automatiquement !
-
-Conçu par l'agence web [Alsacreations.fr](http://alsacreations.fr) et pensé pour être couplé avec des préprocesseurs tels que LESS ou Sass, le micro-framework KNACSS est employé quotidiennement sur toute sorte de projets web quel que soit son type ou son envergure.
-
-## Installation
-
-La version courte est "il n'y a rien à installer".
-
-Selon votre environnement de travail vous suffit de récupérer la feuille de styles :
-
-- en version [CSS classique](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss-unminified.css) (ou [minifié](vhttps://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/css/knacss.css))
-- en version [Sass](https://github.com/raphaelgoetter/KNACSS/tree/master/sass)
-
-_La version Sass sera bien évidemment plus malléable grâce à l'apport de variables et fonctions._
-
-À noter que KNACSS est basé sur deux outils :
-
-- [Normalize.css](http://necolas.github.io/normalize.css/), célèbre - et éprouvé - reset CSS employé par Twitter, Github, Bootstrap, Guardian, etc.
-- [include-media](http://include-media.com/), mixins Sass pour la gestion des Media Queries.
-
-## Usage
-
-KNACSS n'est constitué que d'un seul fichier CSS (minifié ou non selon vos goûts), qu'il vous suffit d'ajouter à votre page HTML :
-
-    <link rel="stylesheet" href="knacss.css">
-
-Il est également possible de l'installer (toutes versions) via [Bower](http://bower.io/) : ```bower install knacss```
-
-## Compatibilité
-
-KNACSS est - dans sa grande majorité - compatible avec l'ensemble des navigateurs à partir d'IE10 inclus.
-
-
-## RTFM!
-
-KNACSS se veut être un outil simple (contrairement aux usines à gaz que sont Bootstrap ou Foundation), mais évolutif.
-La contrepartie est que cela nécessite de votre part de bonnes connaissances en CSS et un petit effort de compréhension et de d'apprentissage des mécanismes de l'outil.
-
-Une [**documentation**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc) détaillée et illustrée est en cours de rédaction. Je vous invite vivement à la parcourir avant de vous jeter sur KNACSS.
-
-Sachez qu'un [pense-bête en PDF](http://knacss.com/KNACSS-cheatsheet.pdf) est également disponible pour vous rappeler des classes utiles de KNACSS.
-
-## Juste une grille ? Grillade !
-
-KNACSS en version complète ne vous convient pas&nbsp;? Seule la grille flexbox vous intéresse&nbsp;? Bienvenue dans *Grillade* !
-
-- en version [CSS classique](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.css) (parfaitement autonome et ne pèse que 4ko seulement&nbsp;!)
-- en version [Sass](https://raw.githubusercontent.com/alsacreations/KNACSS/master/css/grillade.scss) (avec variables)
-
-Dans tous les cas n'oubliez quand même pas de lire [la documentation](https://github.com/alsacreations/KNACSS/blob/master/doc/03-grilles.md) que l'on a concoctée rien que pour vous.
-
-
-## Préprocesseurs
-
-KNACSS est conçu et pensé pour être adapté au préprocesseur Sass. Nos fichiers de travail sont donc par défaut plutôt des `.scss` et non des `.css`.
-
-Si, comme nous, vous intégrez à l'aide de préprocesseurs, KNACSS va vous faciliter la vie dès le début du projet puisqu'un [fichier de configuration](https://github.com/raphaelgoetter/KNACSS/blob/master/sass/_config-variables.scss) contenant toutes les variables du projet est intégré.
-Libre à vous de le modifier selon les contraintes de votre projet.
-
-**Attention**, si vous importez KNACSS automatiquement via Bower (par exemple dans un dossier `vendor`), ce fichier de configuration risque d'être écrasé à chaque mise à jour de KNACSS. **Nous vous invitons à en faire une copie dans votre dossier de travail et à commenter l'appel au fichier de config de `vendor`**.
-
-Dans le cas d'un usage via préprocesseur, vos deux fichiers de travail principaux seront :
-- le fichier `sass/_config-variables.scss` contenant toutes les variables du projet à définir une fois pour toute au départ
-- le fichier `sass/knacss.scss` qui importe tous les fichiers que vous risquez d'employer dans votre projet.
-
-En cours de développement, il vous suffit de compiler ce fichier `sass/knacss.scss` pour obtenir vos fichiers CSS utiles.
-
-### Préfixes navigateurs
-
-Certaines fonctionnalités avancées de KNACSS nécessitent d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, ...) pour être certain que les propriétés CSS fonctionneront partout.
-
-Au sein de la version classique CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier** (Autoprefixer réglé à "last 2 versions").
-
-**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
-
-### Mise à jour depuis une version précédente de KNACSS ?
-
-La version `5.*.*` de KNACSS est une version majeure, ce qui implique que certaines fonctionnalités ne sont plus forcément rétro-compatibles avec les versions précédentes `4.*.*`.
-
-Voici les principales modifications dont il faudra tenir compte lors d'une bascule vers la version 5 de KNACSS&nbsp;:
-
-#### Modifications majeures depuis la `4.*.*`
-
-- suppression de la version LESS (à partir de la version KNACSS 5.0, seul le préprocesseur Sass est encore pris en charge)
-- suppression des fallbacks pour IE8-IE9 (à partir de la version KNACSS 5.0, seul IE10 et supérieurs sont pris en charge)
-- restructuration / renommage des fichiers avec préfixes `_config-`, `_layout-`, `_library-`, `_object-`, `_override-`
-- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
-- ajout de la library include-media (http://include-media.com/)
-- grille "grillade" à présent en mobile first
-
-#### Modifications majeures depuis la `3.*.*`
-
-- La rétrocompatibilité n'est pas préservée pour certains noms de classes ( `.left`, `.start`, `.fl`, `.table-`, `.flex-start`, `.flex-end`)&nbsp;: `.left` ne correspond plus à un `float: left` mais à un `margin-right: auto`, il faut dorénavant employer `.fl` pour obtenir un flottant à gauche;  `.right` ne correspond plus à un `float: right` mais à un `margin-left: auto`, il faut dorénavant employer `.fr` pour obtenir un flottant à droite; `.start` et `.end` n'existent plus
-- Les noms des conteneurs de grille ont changé et nécessitent systématiquement un trait d'union : ancien nommage : `.grid2`, `.grid1-3`;  nouveau nommage : `.grid-2`, `.grid-1-3`
-- Les classes relatives à flexbox ont été renommées pour ne pas entrer en conflit avec des outils tels que Modernizer (qui ajoutent aux-aussi ce genre de classes). Nouveau nommage :
-`.flex-container, .flex-container-h`, `.flex-container-v`, `.flex-item-fluid`, `.flex-item-center`, `.flex-item-first, .flex-item-medium, .flex-item-last`
-
-### Utilisateur de SPIP ?
-
-Le CMS SPIP impose une classe générique `.fr` sur l'élément `<html>`, or cette classe est également employée pour les positionnements flottants dans KNACSS.
-
-Si vous êtes un utilisateur de SPIP, nous vous conseillons de modifier les fichiers CSS de KNACSS et de remplacer les classes `.fr` et `.fl` par `:not(html) .fr` et `:not(html) .fl`
-
-## Liens utiles
-
-* Site web de KNACSS : http://knacss.com
-* [**Documentation détaillée**](https://github.com/raphaelgoetter/KNACSS/tree/master/doc)
-* Sur Alsacreations.com : ["découverte du framework KNACSS"](http://www.alsacreations.com/tuto/lire/1577-decouverte-du-framework-css-KNACSS.html)

doc/01-typo-et-reset.md

@@ -1,34 +0,0 @@
-# Typographie
-
-Accessible avant tout, KNACSS propose une gamme de tailles de polices d'unités fluides (`em`, `rem`) plutôt que le pixel, figé et non malléable, donc moins accessible.
-
-En résumé, voilà les bases typographiques de KNACSS :
-
-- choix d'unités fluides (`em`, `rem`)
-- taille de police définie à 62.5% sur HTML (soit un équivalent de 10px, très pratique pour les conversions en rem)
-- taille de base des contenus de 1.4em (soit un équivalent de 14px) modifiable dans la configuration LESS / Sass
-- tailles de polices définies pour les niveaux de titres et des modificateurs tels que `.small`, `.smaller`, `.big`, `.bigger`, etc.
-
-## Reset "light"
-
-Le reset de KNACSS est volontairement minimal, le but n'étant pas de tout mettre à zéro pour le redéfinir par la suite.
-
-La feuille de style débute ainsi par une variante de l'incontournable `* {box-sizing: border-box}` afin d'imposer le très pratique modèle de boîte CSS3 à tous les éléments du document.
-
-S'en suivent quelques mises à zéro de marges, alignements par défaut des images, et quelques spécificités sur des élements tels que `blockquote`, `figure`, `canvas`, `video` ou autres `svg`.
-
-## Masquage
-
-À noter que KNACSS prévoit une classe dédiée aux éléments devant être masqués sur écrans graphiques tout en demeurant accessibles aux assistances techniques. Il s'agit de la classe `.visually-hidden`, où le choix des hideux mots-clés `!important` se justifie :
-
-```css
-.visually-hidden {
-  position: absolute !important;
-  border: 0 !important;
-  height: 1px !important;
-  width: 1px !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  clip: rect(1px, 1px, 1px, 1px) !important;
-}
-```

doc/02a-layout-alignements.md

@@ -1,64 +0,0 @@
-# Alignements
-
-Différentes classes utilitaires intégrées à KNACSS sont prévues pour gérer les alignements d'éléments.
-
-- les textes et contenus "inline" sont gérés via les classes `.txtleft`, `.txtright` et `.txtcenter` qui agiront sur la propriété CSS `text-align`
-- les blocs sont alignés avec les classes `.left`, `.right` et `.center` qui affectent la valeur `auto` à la propriété `margin`
-- les flottements sont gérés via les classes `.fl` (pour `float: left`) et `.fr` (pour `float: right`)
-
-## Cas des flottants et les .mod
-
-Le positionnement flottant compte parmi les plus employés mais n'est pas exempt d'inconvénients. Le principal étant d'être un positionnement hors du flux qui nécessitera des ajustements (clearfix et autres anti-débordements).
-
-KNACSS a prévu des classes spécifiques pour mieux vous en sortir avec les flottants :
-
-- **le super élément `.mod`**. Il a plein d'avantages: il contient les flottants (ils ne débordent pas) et il ne s'écoule pas autour d'un frère flottant (il s'affiche proprement à côté) et il crée un [contexte "BFC"](http://www.alsacreations.com/astuce/lire/1543-le-contexte-de-formatage-block-en-css.html)
-- `.clearfix`. Les éléments disposant de cette classe contiennent les flottants, tel les `.mod`
-- les éléments `.clear`, `.line` et `.row` bénéficient d'un autre pouvoir : celui de toujours se pousser sous un flottant précédent. Il sont dédiés aux empilements verticaux des contenus.
-
-## Concrètement : je veux faire quoi ?
-
-### Centrer horizontalement
-
-#### Du texte ou une image
-
-HTML :
-```html
-<div class="txtcenter">
-    <img src="licorne.png" alt="aïe ça pique">
-</div>
-```
-
-#### Un bloc
-
-HTML :
-```html
-<section>
-    <div class="center w50">centré horizontalement</div>
-</section>
-```
-
-### Centrer verticalement
-
-![centrer verticalement](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/02-layout.png)
-
-Version table-cell (HTML) :
-```html
-<section class="col">
-    <div class="w50 center">centré horizontalement et verticalement</div>
-</section>
-```
-
-Version table-cell (CSS) :
-```css
-section {
-    vertical-align: middle;
-}
-```
-
-Version flexbox (HTML):
-```html
-<section class="flex-container-v">
-    <div class="center w50">centré horizontalement et verticalement</div>
-</section>
-```

doc/02b-layout-positionnement.md

@@ -1,172 +0,0 @@
-# Positionnements avec KNACSS
-
-Au-delà des alignements d'éléments, KNACSS permet de positionner et d'architecturer vos gabarits à travers plusieurs solutions.
-
-Dans cette page de documentation, nous étudierons en détail chaque cas concret auquel vous risquez d'être confronté et proposerons une réponse adaptée.
-
-## Différents choix offerts
-
-Les types de positionnements inclus nativement dans KNACSS sont les suivants :
-
-- positionnement flottant
-- positionnement avec `display: inline-block`
-- positionnement avec `display: table-cell`
-- positionnement avec Flexbox
-
-Il n'y a pas de mystère : chaque type de positionnement est capable de répondre à différents types de contraintes. Il n'y a pas de meilleur choix qu'un autre.
-
-Votre décision pourra être guidée par les indices suivants :
-- il est généralement plus profitable de ne pas opter pour des positionnement hors-flux (`float`, `position: absolute`)
-- Flexbox est certainement le modèle le plus polyvalent et propre, mais n'est compatible qu'à partir de IE10+.
-
-## Concrètement : je veux faire quoi ?
-
-### Deux blocs voisins de largeur fixe
-
-![Deux blocs voisins de largeur fixe](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout1.png)
-
-Les choix offerts avec KNACSS :
-
-#### flottant et flottant
-
-La classe `.fl` pour `float: left` permet à un élément d'être flottant à gauche.
-
-Il vous suffit de faire flotter vos deux éléments et de leur attribuer la largeur souhaitée pour qu'ils s'affichent l'un à côté de l'autre :
-
-HTML :
-```html
-<div class="fl w400p">premier</div>
-<div class="fl w400p">deuxième</div>
-```
-
-- **Avantage :** simple, rapide, intuitif, hyper compatible
-- **Inconvénient :** positionnement hors du flux, nécessitera des ajustements (clearfix et autres anti-débordements)
-
-#### inline-block et inline-block
-
-La propriété `display: inline-block` (sous forme de classe `.inbl` chez KNACSS) permet à un élément de s'afficher tel un "inline" tout en étant dimensionné.
-
-HTML :
-```html
-<div class="inbl w400p">premier</div>
-<div class="inbl w400p">deuxième</div>
-```
-
-- **Avantage :** positionnement dans le flux, compatible dès IE8
-- **Inconvénient :** un espace "whitespace" apparaîtra entre les deux div et nécessitera de coller les balises ou de bidouiller en CSS pour être supprimé
-
-#### table-cell et table-cell
-
-HTML :
-```html
-<div class="row">
-    <div class="col w400p">premier</div>
-    <div class="col w400p">deuxième</div>
-</div>
-```
-
-- **Avantage :** positionnement dans le flux, compatible dès IE8
-- **Inconvénient :** Le positionnement tabulaire observe [des règles parfois complexes](http://www.alsacreations.com/tuto/lire/1522-le-modele-tabulaire-en-css.html) et surprenantes pour les non habitués.
-
-#### flexbox
-
-HTML :
-```html
-<div class="flex-container">
-    <div class="w400p">premier</div>
-    <div class="w400p">deuxième</div>
-</div>
-```
-
-- **Avantage :** fluide, propre, simple
-- **Inconvénient :** compatibilité IE10 minimum
-
-### Deux blocs voisins dont un fixe et un fluide
-
-![Deux blocs voisins de largeur fixe et fluide](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout2.png)
-
-Les choix offerts avec KNACSS :
-
-#### flottant et .mod
-
-HTML :
-```html
-<div class="fl w400p">premier</div>
-<div class="mod">deuxième</div>
-```
-
-#### inline-block et inline-block
-
-Pas possible [Résolu]
-
-#### table-cell et table-cell
-
-HTML :
-```html
-<div class="row">
-    <div class="col w400p">premier</div>
-    <div class="col">deuxième</div>
-</div>
-```
-
-#### flexbox
-
-HTML :
-```html
-<div class="flex-container">
-    <div class="w400p">premier</div>
-    <div class="flex-item-fluid">deuxième</div>
-</div>
-```
-
-### Deux blocs voisins de même hauteur
-
-![Deux blocs voisins de même hauteur](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout3.png)
-
-Les choix offerts avec KNACSS :
-
-#### flottant et flottant
-
-Pas possible [Résolu]
-
-#### inline-block et inline-block
-
-Pas possible [Résolu]
-
-#### table-cell et table-cell
-
-Par défaut, les éléments constituant des "cellules de tableau", donc `table-cell` ont automatiquement la même hauteur entre frères. Il n'y a donc rien à faire si l'on opte pour ce positionnement : ça marche tout seul.
-
-HTML :
-```html
-<div class="row">
-    <div class="col">premier</div>
-    <div class="col">deuxième</div>
-</div>
-```
-
-#### flexbox
-
-Là aussi c'est automatique : les enfants d'un conteneur `flexbox` ont tous par défaut la même hauteur.
-
-HTML :
-```html
-<div class="flex-container">
-    <div>premier</div>
-    <div>deuxième</div>
-</div>
-```
-
-### Plusieurs blocs voisins de même taille
-
-![grilles](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-layout4.png)
-
-Si vous souhaitez réaliser des constructions de plusieurs éléments de même taille (fixe ou fluide) avec ou sans espace entre les éléments (gouttière), je vous invite à prendre connaissance des possibilités de **grilles** offertes par KNACSS.
-
-Voir **[la Doc au point 03-grilles](https://github.com/raphaelgoetter/KNACSS/blob/master/doc/03-grilles.md)**.
-
-### Schnaps.it, générateur de templates KNACSS
-
-Alsacréations tient à jour un générateur de gabarits HTML/CSS basé sur le framework KNACSS, **[Schnaps.it](http://schnaps.it/)**, n'hésitez pas à en user et en abuser&nbsp;!
-
-![grilles](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/schnapsit.png)

doc/03-grilles.md

@@ -1,278 +0,0 @@
-# Grilles de mise en page
-
-Une grille "KNACSS" a les caractéristiques globales suivantes :
-
-- Les largeurs des colonnes sont fluides (définies en pourcentage du parent),
-- Une gouttière sépare chaque colonne (la valeur de cette gouttière est modifiable dans le fichier `sass/knacss.scss`),
-- Par défaut, une grille est "mobile-first" (une seule colonne sur petit écran, 2 colonnes sur écran "small") et il est très simple d'activer la fonctionnalité "Responsive",
-- La technologie employée est [CSS3 Flexbox](http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html).
-
-Il existe deux types principaux de systèmes de grilles dans KNACSS :
-
-- Les grilles à colonnes égales
-- Les grilles à colonnes inégales
-
-Dans les deux cas, la technique associée depuis KNACSS v4 pour concevoir les grilles est **CSS3 Flexbox**, ce qui signifie que la compatibilité de **cette fonctionnalité sera réservée aux [navigateurs modernes](http://caniuse.com/#search=flexbox)** (IE10, Android 4.4+ et tous les autres).
-
-Quelques exemples pour vous échauffer :
-- `<div class="grid-4">` : grille de 4 colonnes également réparties
-- `<div class="grid-2-1">` : grille de répartition 2/3 - 1/3
-- `<div class="grid-3-small-1">` : grille de 3 colonnes égales, puis 1 colonne sur écran "small"
-- `<div class="grid-6-small-3">` : grille de 6 colonnes, puis 3 colonnes sur écran "small"
-- note : sur écran très petit ("tiny"), il n'y aura systématiquement qu'une seule colonne.
-
-Et maintenant passons aux explications&nbsp;!
-
-## Précautions à prendre
-
-Qui dit CSS3 dit précautions à prendre.
-La bonne nouvelle est que Flexbox est plutôt bien reconnu par l'ensemble des navigateurs de la planète; la mauvaise est que certains anciens navigateurs (Android par exemple) ne reconnaissent que certaines versions précédentes des spécifications. Il est donc encore nécessaire d'employer toute une panoplie de préfixes CSS (`-webkit-`, `-moz-`, `-ms-`, ...) pour être certain que vos grilles fonctionneront partout.
-
-Au sein de la version CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier**.
-
-**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
-
-## Exemple concret
-
-Pour vous faire une idée, et jouer avec les valeurs possibles, vous trouverez [un exemple "bac à sable"](http://codepen.io/raphaelgoetter/pen/BybOag?editors=110) sur CodePen.
-
-**Exemple de grille de colonnes égales :**
-
-HTML :
-```html
-<div class="grid-4"> <!-- parent div (ou autre) de 4 colonnes -->
-    <div>un div ou n'importe quoi d'autre</div>
-    <div>un 2è div ou n'importe quoi d'autre</div>
-    <div>un 3è div ou n'importe quoi d'autre</div>
-    <div>etc.</div>
-</div>
-```
-
-Résultat :
-![grille de largeur égale](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-even.png)
-
-**Exemple de grille de colonnes inégales (3/4 - 1/4) :**
-
-HTML :
-```html
-<div class="grid-3-1"> <!-- parent div (ou autre) de 3-1 colonnes -->
-    <div>un div ou n'importe quoi d'autre</div>
-    <div>un 2è div ou n'importe quoi d'autre</div>
-    <div>un 3è div ou n'importe quoi d'autre</div>
-    <div>etc.</div>
-</div>
-```
-
-Résultat :
-![grille de largeur inégale](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-grid-uneven.png)
-
-## Mise en oeuvre
-
-Il est très simple de construire une grille, il vous suffit :
-
-- D'un **conteneur**
-- D'autant **d'enfants** que vous souhaitez
-
-Le **conteneur** sera l'élément HTML que vous voulez (`div`, `section`, `ul`, ...). Il vous suffit simplement de le munir d'une classe selon votre choix de grille :
-
-- `.grid-2`, `.grid-3`, `.grid-4`, ... `.grid-12` pour les grilles de largeur égale
-- `.grid-2-1`, `.grid-1-2`, `.grid-3-1`, `.grid-1-3`, `.grid-3-2`, `.grid-2-3`, `.grid-4-1`, `.grid-1-4` pour les grilles de largeurs inégales (`.grid-2-1` vaut pour "2/3 - 1/3" par exemple).
-
-Par défaut, chaque colonne est séparée de sa voisine par une gouttière dont la largeur par défaut est `1em`. Pour modifier ce réglage, il sera nécessaire de passer par la version préprocesseur (LESS, Sass) de KNACSS (voir plus loin).
-
-Les **enfants** directs d'un conteneur, quels qu'ils soient, se répartissent automatiquement au sein de la grille formée par leur conteneur. Par exemple, 6 enfants contenus dans un parent de classe `.grid-3` se répartiront en 3 colonnes de 2 lignes.
-
-- Tester une [grille simple en ligne](http://codepen.io/raphaelgoetter/pen/GAenb?editors=110) (Codepen).
-- Tester une [grille de largeur inégale en ligne](http://codepen.io/raphaelgoetter/pen/jmAkx?editors=110) (Codepen).
-
-## Grilles responsive
-
-Les grilles KNACSS sont mobile-first et "plus ou moins" responsive naturellement, dans la mesure où par défaut :
-- elles s'affichent systématiquement sur une seule colonne sur un très petit écran ("tiny"),
-- elles s'affichent en 2 colonnes sur un écran de taille réduite ("small"),
-- elles occupent le nombre de colonnes définies dans la variable `$grid-number` sur un écran suffisamment large.
-
-Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide du mot-clé : `-small-*`.
-Ce mot-clé définit le nombre de colonnes lorsque le point de rupture se situe au-delà de la taille "tiny" et en-deçà de la taille "medium".
-
-La grille ci-dessous s'affichera en 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran :
-```html
-<div class="grid-4-small-2">
-    <div>un div ou n'importe quoi d'autre</div>
-    <div>un 2è div ou n'importe quoi d'autre</div>
-    <div>un 3è div ou n'importe quoi d'autre</div>
-    <div>etc.</div>
-</div>
-```
-
-## Offsets
-
-Il vous est très facile de "pousser" un élément à droite ou à gauche de sa ligne dans la grille, et créer ainsi un espacement volontaire, ce que l'on appelle "offset".
-
-Pour cela, appliquez simplement l'une ou l'autre de ces déclarations sur l'élément :
-
-- la classe `.push` pour le pousser à droite sur sa ligne (applique un `margin-left: auto`)
-- la classe `.pull` pour le pousser à gauche sur sa ligne (applique un `margin-right: auto`)
-
-HTML :
-```html
-<div class="grid-4">
-    <div>un div ou n'importe quoi d'autre</div>
-    <div class="push">je suis poussé à droite</div>
-    <div>un 3è div ou n'importe quoi d'autre</div>
-    <div>etc.</div>
-</div>
-```
-
-Résultat :
-![offset](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-offset.png)
-
-## Mise en exergue
-
-Il est possible de mettre un élément particulier en exergue, en **doublant sa taille** par rapport aux autres, tout en conservant un agencement parfait de la grille.
-
-Pour ce faire, appliquez la classe `.grid-item-double` à cet élément.
-
-HTML :
-```html
-<div class="grid-4">
-    <div>un div ou n'importe quoi d'autre</div>
-    <div class="grid-item-double">je suis deux fois plus large que mes frères</div>
-    <div>un 3è div ou n'importe quoi d'autre</div>
-    <div>etc.</div>
-</div>
-```
-
-Résultat :
-![mise en exergue](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-double.PNG)
-
-## Pousser au début ou à la fin
-
-Vous pouvez modifier l'ordre d'affichage des éléments au sein d'une grille à l'aide des classes :
-
-- `.grid-item-first` (l'élément apparaîtra avant tous les autres)
-- `.grid-item-last` (l'élément apparaîtra tout à la fin de la grille)
-
-HTML :
-```html
-<div class="grid-4">
-    <div>un div ou n'importe quoi d'autre</div>
-    <div class="grid-item-first">je m'affiche avant tous mes frères</div>
-    <div>un 3è div ou n'importe quoi d'autre</div>
-    <div>etc.</div>
-</div>
-```
-
-Résultat :
-![preums!](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/03-first.PNG)
-
-
-
-## Grilles imbriquées
-
-Il est parfaitement possible d'imbriquer une grille dans une grille (mais n'en abusez pas !). Par exemple :
-
-HTML :
-```html
-<div class="grid-2-1">
-  <div>
-    <ul class="unstyled grid-3">
-    	<li>1</li>
-    	<li>2</li>
-    	<li>3</li>
-    </ul>
-  </div>
-  <aside>
-    2- lorem ipsum Hopla choucroute !
-  </aside>
-</div>
-```
-
-Résultat :
-![imbriquée](https://raw.githubusercontent.com/raphaelgoetter/KNACSS/master/doc/illust/imbriquee.png)
-
-## Plus loin avec les préprocesseurs
-
-KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS ou Sass. Il existe par conséquent un fichier de variables de configuration et des mixins prévus pour étendre les possibilités des grilles notamment.
-
-### Modifier les variables globales
-
-Les variables de configuration des grilles se trouvent dans le fichier `sass/_config-variables.scss` :
-
-```css
-$grid-gutter:  2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
-$grid-number:  4 !default; // number of equal columns
-$grid-left:    2 !default; // left side of uneven columns
-$grid-right:   1 !default; // right side of uneven columns
-```
-
-Il vous suffit de modifier les valeurs de ces variables de config pour répercuter vos préférences sur l'ensemble du projet dès que vos fichiers Sass seront compilés en CSS.
-
-### Générer des grilles personnalisées
-
-Indépendamment des variables de configuration, rien de vous empêche de créer une grille personnalisée en incluant directement l'un des deux mixins possibles dans vos éléments :
-
-- `.grid(n,g)` pour personnaliser une grille de colonnes **égales**. Les arguments sont "n" = nombre de colonnes et "g" = largeur de la grille
-- `.uneven-grid(l,r)` pour personnaliser une grille de colonnes **inégales**. Les arguments sont "l" = pour le ratio de la colonne de gauche,  "r" = pour le ratio de la colonne de droite
-
-#### Grille de colonnes égales en Sass
-
-**Objectif : je souhaite créer un mixin sur mon élément `.grid-container` afin que celui-ci crée une grille de 6 colonnes égales**
-
-Sass (fichier de développement) :
-```css
-.grid-container {
-	@include grid(4, 12px)
-}
-```
-
-**Important : il est nécessaire que le nom de votre classe globale contienne la chaîne `grid-` pour que le mixin fonctionne (ex. `grid-container`, `grid-box`, `grid-truc4`, etc.)**
-
-CSS compilé (sans Autoprefixer) :
-
-```css
-.grid-container {
-  margin-left: -12px;
-}
-.grid-container > * {
-  width: calc(100% * 1 / 4 - 12px - .01px);
-  margin-left: 12px;
-}
-.grid-container > .grid-item-double {
-  width: calc(100% * 2 / 4 - 12px);
-}
-...
-```
-
-#### Grille de colonnes inégales en LESS
-
-**Objectif : je souhaite que mon élément `.grid-truc` crée une grille de 2 colonnes réparties en 2/3 et 1/3.**
-
-LESS (fichier de développement) :
-
-```css
-.grid-truc {
-	@include uneven-grid(2, 1);
-}
-```
-
-**Important : il est nécessaire que le nom de votre classe globale contienne la chaîne `grid-` pour que le mixin fonctionne (ex. `grid-container`, `grid-box`, `grid-truc4`, etc.)**
-
-
-CSS compilé (sans Autoprefixer) :
-
-```css
-@media (min-width: 641px) {
-  .grid-truc :nth-child(odd) {
-    width: calc(66.66667% - 2rem);
-  }
-  .grid-truc :nth-child(even) {
-    width: calc(33.33333% - 2rem);
-  }
-}
-...
-```
-
-## Article associé
-
-Si vous voulez comprendre dans le détail le fonctionnement des grilles Flexbox de KNACSS, je vous invite à suivre l'article d'Alsacréations ["Une grille responsive avec CSS3 Flexbox et LESS (ou Sass)"](http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html).

doc/04-tableaux.md

@@ -1,38 +0,0 @@
-# Tableaux de données
-
-KNACSS propose une feuille de style minimale appliquée aux tableaux de données ainsi qu'aux éléments disposant d'une classe `.table`.
-
-Pour débuter, KNACSS impose un modèle d'affichage fixé à tous les tableaux via `table-layout: fixed;`. Ainsi, ce ne sera plus le contenu qui décidera de la largeur des cellules, mais ce que vous aurez spécifié dans les tailles CSS.
-
-```css
-table,
-.table {
-  width: 100%;
-  max-width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  vertical-align: top;
-  border: 1px solid #ccc;
-}
-.table {
-  display: table;
-}
-table#recaptcha_table,
-table.table-auto {
-  table-layout: auto;
-}
-caption {
-  padding: 10px;
-  color: #555;
-  font-style: italic;
-}
-td,
-th {
-  padding: 0.3em 0.8em;
-  border: 1px #aaa dotted;
-  vertical-align: top;
-  min-width: 20px;
-  cursor: default;
-  text-align: left;
-}
-```

doc/05-formulaires.md

@@ -1,12 +0,0 @@
-# Formulaires
-
-Afin d'harmoniser l'affichage par défaut des éléments de formulaires au sein de l'ensemble des navigateurs, un certain nombre de styles est prévu dans KNACSS.
-Pour constituer cette base de "bonnes pratiques", les crédits reviennent notamment aux ressources suivantes :
-
-- [HTML5boilerplate](https://html5boilerplate.com/),
-- [github.com/nathansmith/formalize](http://github.com/nathansmith/formalize),
-- [sitepen.com](http://www.sitepen.com)
-
-Le reset "formulaire" de KNACSS tient compte des éléments suivants : `form`,  `input`,  `fieldset`,  `button`,  `select`,  `label`,  `legend`,  `textarea`,  etc.
-
-Notez également qu'en attribuant la classe `.btn` à un élément, vous le considérerez (et stylerez) tel un bouton de formulaire.

doc/06-helpers.md

@@ -1,148 +0,0 @@
-# Helpers
-
-Les "Helpers" sont des classes purement visuelles et utilitaires (non "sémantiques"), pas très jolie mais rudement pratiques en production pour alléger vos feuilles de styles.
-
-**Attention toutefois !** Ce type de classes conduit fréquemment [à des abus au sein de votre code HTML](http://blog.goetter.fr/2014/11/10/bien-utiliser-un-framework-css/).
-
-Par exemple, Si vous avez 20 images au comportement identique dans la page, ne les affublez pas de classes visuelles multiples telles que `img class="mod clearfix left inbl w200p pas mb1 large-mb2 small-mbn"` mais optez plutôt pour une classe personnalisée : `img class="media"` par exemple.
-
-**Méthode :** Limitez-vous à 4 noms de classes au grand maximum par élément HTML. Si vous pensez qu’il vous en faut davantage, il est temps d’envisager une classe personnalisée, ou de profiter des pré-processeurs CSS.
-
-_Les valeurs de helpers peuvent être modifiées au sein du fichier de configuration LESS / Sass._
-
-## les Helpers de largeur
-
-Largeurs fluides (en pourcentage) :
-
-```css
-.w10 {
-  width: 10%;
-}
-.w20 {
-  width: 20%;
-}
-.w25 {
-  width: 25%;
-}
-...
-.w100 {
-  width: 100%;
-}
-
-```
-
-Largeurs fixes (en pixel) :
-
-```css
-.w50p {
-  width: 50px;
-}
-.w100p {
-  width: 100px;
-}
-.w150p {
-  width: 150px;
-}
-...
-.w960p {
-  width: 960px;
-}
-.w1140p {
-  width: 1140px;
-}
-
-```
-
-Largeurs spéciales :
-
-```css
-.mw960p {
-  max-width: 960px;
-}
-.mw1140p {
-  max-width: 1140px;
-}
-.wauto {
-  width: auto;
-}
-```
-
-
-## les Helpers d'espacement
-
-Les helpers d'espacement comportent des classes dédiées aux marges externes (margin) et aux marges internes (padding).
-
-Leur nommage est assez intuitif :
-
-- p,m = padding, margin
-- a,t,r,b,l = all, top, right, bottom,left
-- s,m,l,n (ou 0) = small, medium, large, none (ou 0)
-
-Exemples :
-
-- `.prs` signifie "padding-right small" (où "small" est défini dans votre fichier de configuration, par défaut 5px)
-- `.man` signifie "margin all none" (fonctionne aussi avec la syntaxe `.ma0`)
-
-### les marges externes (margin)
-
-```css
-.man,
-.ma0 {
-  margin: 0;
-}
-.mas {
-  margin: 10px;
-}
-.mam {
-  margin: 20px;
-}
-.mal {
-  margin: 40px;
-}
-.mtn,
-.mt0 {
-  margin-top: 0;
-}
-.mts {
-  margin-top: 10px;
-}
-.mtm {
-  margin-top: 20px;
-}
-.mtl {
-  margin-top: 40px;
-}
-...
-```
-
-### les marges internes (padding)
-
-```css
-.ptn,
-.pt0 {
-  padding-top: 0;
-}
-.pts {
-  padding-top: 10px;
-}
-.ptm {
-  padding-top: 20px;
-}
-.ptl {
-  padding-top: 40px;
-}
-.prn,
-.pr0 {
-  padding-right: 0;
-}
-.prs {
-  padding-right: 10px;
-}
-.prm {
-  padding-right: 20px;
-}
-.prl {
-  padding-right: 40px;
-}
-...
-```

doc/07-responsive.md

@@ -1,126 +0,0 @@
-# Responsive Webdesign
-
-## Points de rupture
-
-Par défaut, KNACSS tient compte des valeurs de points de rupture suivants :
-
-```
-// breakpoints (choose unit you prefer)
-@tiny-screen            : 320px; // tiny screens media query (less-equal than 320px)
-@tiny-plus-screen       : 480px; // screens between 321px and 480px
-@small-screen           : 640px; // screens between 481px and 640px
-@small-plus-screen      : 768px; // screens between 641px and 768px
-@medium-screen          : 960px; // screens between 769px and 960px
-@medium-plus-screen     : 1024px; // screens between 961px and 1024px
-@large-screen           : 1280px; // screens between 1025px and 1280px
-@large-plus-screen      : 1440px; // screens between 1281px and 1440px
-@extra-large-screen     : 1600px; // screens between 1441px and 1600px
-@ultra-large-screen     : 1920px; // ultra large screens
-```
-
-
-_Les valeurs des points de rupture peuvent être modifiées au sein du fichier de configuration LESS / Sass._
-
-## Préfixes de classe
-
-Pour les points de rupture "large", "medium", "small" et "tiny", des préfixes de classes ont été introduits dans KNACSS :
-
-- `.large-*` : préfixe KNACSS destiné aux styles sur écrans larges
-- `.medium-*` : préfixe KNACSS destiné aux styles sur écrans medium
-- `.small-*` : préfixe KNACSS destiné aux styles sur écrans small
-- `.tiny-*` : préfixe KNACSS destiné aux styles sur écrans tiny
-
-### Exemple : le point de rupture "tiny"
-
-Voici quelques-unes des classes dédiées aux écrans de très petite taille… Le mot-clé `!important` est nécessaire pour être certain que les styles écrasent bien les styles appliqués par défaut.
-
-Masquage / visibilité :
-
-```css
-.tiny-hidden {
-    display: none !important;
-}
-.tiny-visible {
-    display: block !important;
-}
-```
-
-Modèles d'affichage :
-
-```css
-.tiny-no-float {
-    float: none;
-}
-.tiny-inbl {
-    display: inline-block;
-    float: none;
-    vertical-align: top;
-}
-.tiny-row {
-    display: table !important;
-    table-layout: fixed !important;
-    width: 100% !important;
-}
-.tiny-col {
-    display: table-cell !important;
-    vertical-align: top !important;
-}
-```
-
-Largeurs :
-
-```css
-.tiny-w25 {
-    width: 25% !important;
-}
-.tiny-w33 {
-    width: 33.3333% !important;
-}
-.tiny-w50 {
-    width: 50% !important;
-}
-.tiny-w66 {
-    width: 66.6666% !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;
-}
-```
-
-Marges :
-
-```css
-.tiny-man,
-    .tiny-ma0 {
-        margin: 0 !important;
-}
-.tiny-pan,
-.tiny-pa0 {
-    padding: 0 !important;
-}
-```
-
-
-## Règles de styles particulières
-
-```css
-@media (min-width: 1025px) {
-  /* rules for big resources and big screens like: background-images, font-faces, etc. */
-}
-```
-
-```css
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
-  /* style adjustments for high density devices */
-}
-```

doc/08-print.md

@@ -1,66 +0,0 @@
-# Styles d'impression
-
-KNACSS impose une mise en forme d'impression par défaut, à savoir :
-
-- suppression des ombrages de boîte et de texte
-- largeur automatique à la page (body)
-
-```css
-* {
-  background: transparent !important;
-  box-shadow: none !important;
-  text-shadow: none !important;
-}
-
-body {
-  width: auto;
-  margin: auto;
-  font-family: serif;
-  font-size: 12pt;
-}
-```
-
-KNACSS gère également les sauts de pages, les lignes veuves et orphelines :
-
-```css
-/* no orphans, no widows */
-  p,
-  .p-like,
-  blockquote {
-    orphans: 3;
-    widows: 3;
-  }
-  /* no breaks inside these elements */
-  blockquote,
-  ul,
-  ol {
-    page-break-inside: avoid;
-  }
-  /* page break before main headers */
-  h1,
-  .h1-like {
-    page-break-before: always;
-  }
-  /* no breaks after these elements */
-  h1,
-  .h1-like,
-  h2,
-  .h2-like,
-  h3,
-  .h3-like,
-  caption {
-    page-break-after: avoid;
-  }
-```
-
-Une classe spécifique permet d'afficher ou de masquer du contenu sur imprimante :
-
-```css
-.print {
-    display: block;
-}
-.no-print {
-    display: none;
-}
-```
-

doc/09-misc.md

@@ -1,71 +0,0 @@
-# Divers
-
-La feuille de style "fourre-tout" de KNACSS, où l'on retrouve des règles pratiques dans certains contextes, mais pas suffisamment universelles pour être appliquées par défaut dans un framework.
-
-## Liens d'évitement
-
-Les [liens d'évitement](http://www.alsacreations.com/tuto/lire/572-Les-liens-d-evitement.html) sont prévus pour faciliter la navigation au clavier, ils sont indispensable dans une optique de parfaite accessibilité.
-
-KNACSS propose des styles par défaut pour ces liens : masqués au départ, ils deviennent visibles lorsque la touche `tab` est utilisée.
-
-```css
-.skip-links {
-  position: absolute;
-}
-.skip-links a {
-  position: absolute;
-  overflow: hidden;
-  clip: rect(1px, 1px, 1px, 1px);
-  padding: 0.5em;
-  background: black;
-  color: white;
-  text-decoration: none;
-}
-.skip-links a:focus {
-  position: static;
-  overflow: visible;
-  clip: auto;
-}
-```
-
-## Césures
-
-KNACSS gère automatiquement les césures et les mots longs dès lors que le point de rupture "small" est atteint.
-
-```css
-@media (max-width: 768px) {
-  /* you shall not pass */
-  div,
-  textarea,
-  table,
-  td,
-  th,
-  code,
-  pre,
-  samp {
-    word-wrap: break-word;
-    -webkit-hyphens: auto;
-       -moz-hyphens: auto;
-        -ms-hyphens: auto;
-            hyphens: auto;
-  }
-}
-```
-
-## Google maps
-
-KNACSS règle les bugs d'affichage dans le cas spécifique des images google.
-
-```css
-.gm-style img {
-  height: 100%;
-}
-:not(.gm-style) img {
-  height: auto;
-}
-.gm-style img,
-.gmnoscreen img,
-.gmnoprint img {
-  max-width: none !important;
-}
-```

doc/10-styling.md

@@ -1,11 +0,0 @@
-# Décorations diverses
-
-Dans cette feuille de style, KNACSS apporte un minimum de décoration à divers éléments habituels.
-Il ne s'agit pas d'un "reset" mais bien d'une couche de design qu'il n'est bien entendu pas du tout indispensable de conserver.
-
-- les élements de code (`code`, `pre`)
-- le surlignement (`mark`)
-- les contenus en exposant ou en indice (`sup`, `sup`)
-- les citations (`q`, `blockquote`)
-- les séparateurs (`hr`)
-- les tableaux de données

doc/11-wordpress.md

@@ -1,5 +0,0 @@
-# Styles WordPress
-
-Cette feuille de style, exclusivement dédiée au CMS WordPress, constitue en un "reset" de base pour cet outil que nous employons fréquemment au sein de l'agence Alsacréations.fr.
-
-C'est Geoffrey Crofte qui a conçu ce fichier de bonnes pratiques (basée sur un socle proposé par Automattic), n'hésitez pas à le contacter sur son site perso [CreativeJuiz](http://www.creativejuiz.fr/) si vous avez la moindre question à son propos.

gulpfile.js

@@ -1,43 +1,55 @@
-// Requires
+const gulp = require('gulp');
-var gulp = require('gulp');
-
-// Include plugins
 var sass = require('gulp-sass');
-var concat = require('gulp-concat');
+var postcss = require('gulp-postcss');
-var rename = require('gulp-rename');
+var CombineMQ = require('postcss-combine-media-query');
-var minifycss = require('gulp-minify-css');
+var autoprefixer = require('autoprefixer');
-// var sourcemaps = require('gulp-sourcemaps');
+var CSSnano = require('cssnano');
-var autoprefixer = require('gulp-autoprefixer');
 
-
+gulp.task('css:full', () => {
-// tâche CSS = compile vers knacss.css et knacss-unminified.css
+  return gulp.src('sass/knacss.scss')
-gulp.task('css', function () {
+    .pipe(sass(
-  return gulp.src('./sass/knacss.scss')
+      {
-    .pipe(sass())
+      outputStyle: 'expanded'
-    .pipe(autoprefixer())
+      }))
-    .pipe(rename('knacss-unminified.css'))
+    .pipe(
-    .pipe(gulp.dest('./css/'))
+      postcss([
-    .pipe(rename('knacss.css'))
+        autoprefixer, // ajoute les préfixes vendeurs
-    //.pipe(sourcemaps.init())
+      ]))
-    .pipe(minifycss())
+    .pipe(gulp.dest('css/knacss-full'));
-    //.pipe(sourcemaps.write('.', {includeContent: false}))
-    .pipe(gulp.dest('./css/'));
 });
 
-gulp.task('grillade', function() {
+gulp.task('css:mini', () => {
-  return gulp.src(['./sass/_include-media/_include-media.scss','./sass/_config-variables.scss', './sass/_layout-grids.scss'])
+  return gulp.src('sass/knacss.scss')
-    .pipe(concat('grillade.scss'))
+    .pipe(sass(
-    .pipe(gulp.dest('./css/'))
+      {
-    .pipe(sass())
+      outputStyle: 'compact'
-    .pipe(autoprefixer())
+      }))
-    .pipe(minifycss())
+    .pipe(
-    .pipe(gulp.dest('./css/'));
+      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'));
 });
 
-// Watcher
+gulp.task('css:grillade', () => {
-gulp.task('watch', function() {
+  return gulp.src('sass/utils/grillade.scss')
-  gulp.watch(['./sass/*.scss'], ['css']);
+    .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'));
 });
 
+// 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'));

package.json

@@ -1,11 +1,9 @@
 {
   "name": "knacss",
-  "version": "5.0.1",
+  "version": "8.2.1",
   "homepage": "http://www.knacss.com/",
   "bugs": "https://github.com/alsacreations/KNACSS/issues",
-  "author": [
+  "author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
-    "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)"
-  ],
   "contributors": [
     "Raphaël GOETTER, Alsacreations"
   ],
@@ -16,7 +14,6 @@
     "framework",
     "reset",
     "responsive",
-    "less",
     "sass",
     "rwd",
     "boilerplate",
@@ -27,16 +24,14 @@
     "url": "https://github.com/alsacreations/KNACSS"
   },
   "license": "WTFPL",
-  "dependencies": {},
   "devDependencies": {
-    "gulp": "latest",
+    "gulp": "^4.0.2",
-    "gulp-rename": "latest",
+    "gulp-postcss": "^8.0.0",
-    "gulp-less": "latest",
+    "gulp-sass": "^4.1.0"
-    "gulp-sass": "latest",
-    "gulp-concat": "latest",
-    "gulp-minify-css": "latest",
-    "gulp-autoprefixer": "latest",
-    "gulp-sourcemaps": "latest"
   },
-  "engines": {}
+  "dependencies": {
+    "autoprefixer": "^9.7.1",
+    "postcss-combine-media-query": "^1.0.1",
+    "cssnano": "^4.1.10"
+  }
 }

sass/_config-variables.scss

@@ -1,70 +0,0 @@
-// Config file and project variables
-
-// font sizes
-$base-font-size : 1.4rem !default; // ex. 1.4rem would be "14px" equivalent
-$line-height    : 1.5 !default; // equiv line-height 1.5
-$h1-size        : 3.2rem !default; // equiv "32px"
-$h2-size        : 2.8rem !default; // equiv "28px"
-$h3-size        : 2.4rem !default; // equiv "24px"
-$h4-size        : 2.0rem !default; // equiv "20px"
-$h5-size        : 1.8rem !default; // equiv "18px"
-$h6-size        : 1.6rem !default; // equiv "16px"
-
-// font stacks
-$font-stack-common    : sans-serif !default; // common font
-$font-stack-headings  : sans-serif !default; // headings font
-$font-stack-monospace : consolas, courier, monospace !default; // monospace font
-
-// font colors
-$base-color             : #000 !default; // text color on body and content
-$alpha-color            : #000 !default; // text color on primary elements
-$beta-color             : #000 !default; // text color on secondary elements
-$headings-color         : #000 !default; // text color on headings
-$headings-1-color       : #000 !default; // text color on headings level 1
-$headings-2-color       : #000 !default; // text color on headings level 2
-$headings-3-color       : #000 !default; // text color on headings level 3
-$base-color-link        : #333 !default; // base links color
-$base-color-link-hover  : #000 !default; // base hovered/focused links color
-
-// backgrounds
-$base-background      : #fff !default; // body background color
-$alpha-background     : #fff !default; // primary elements background color
-$beta-background      : #fff !default; // secondary elements background color
-
-// spacings (choose unit you prefer)
-$tiny-value             : .5rem !default; // tiny value for margins / paddings
-$tiny-plus-value        : .7rem !default; // tiny+ value for margins / paddings
-$small-value            : 1rem !default; // small value for margins / paddings
-$small-plus-value       : 1.5rem !default; // small+ value for margins / paddings
-$medium-value           : 2rem !default; // medium value for margins / paddings
-$medium-plus-value      : 3rem !default; // medium+ value for margins / paddings
-$large-value            : 4rem !default; // large value for margins / paddings
-$large-plus-value       : 6rem !default; // large value for margins / paddings
-$extra-large-value      : 8rem !default; // extra large value for margins / paddings
-$extra-large-plus-value : 12rem !default; // extra large value for margins / paddings
-$ultra-large-value      : 16rem !default; // ultra large value for margins / paddings
-$ultra-large-plus-value : 20rem !default; // ultra large value for margins / paddings
-
-// breakpoints (overrides include-media.scss) (choose unit you prefer)
-// doc : http://include-media.com/documentation/
-$breakpoints: (
-  tiny-screen       : 320px,
-  tiny-plus-screen  : 480px,
-  small-screen      : 640px,
-  small-plus-screen : 768px,
-  medium-screen     : 960px,
-  medium-plus-screen: 1024px,
-  large-screen      : 1280px,
-  large-plus-screen : 1440px,
-  extra-large-screen: 1600px,
-  ultra-large-screen: 1920px
-);
-
-// grids variables (choose unit you prefer)
-$grid-gutter:  2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
-$grid-number:  4 !default; // number of equal columns
-$grid-left:    2 !default; // left side of uneven columns
-$grid-right:   1 !default; // right side of uneven columns
-
-//kna-namespace (default : null)
-$kna-namespace: null !default;

sass/_include-media/_include-media.scss

@@ -1,568 +0,0 @@
-@charset 'UTF-8';
-
-//     _            _           _                           _ _
-//    (_)          | |         | |                         | (_)
-//     _ _ __   ___| |_   _  __| | ___   _ __ ___   ___  __| |_  __ _
-//    | | '_ \ / __| | | | |/ _` |/ _ \ | '_ ` _ \ / _ \/ _` | |/ _` |
-//    | | | | | (__| | |_| | (_| |  __/ | | | | | |  __/ (_| | | (_| |
-//    |_|_| |_|\___|_|\__,_|\__,_|\___| |_| |_| |_|\___|\__,_|_|\__,_|
-//
-//      Simple, elegant and maintainable media queries in Sass
-//                        v1.4.3
-//
-//                http://include-media.com
-//
-//         Authors: Eduardo Boucas (@eduardoboucas)
-//                  Hugo Giraudel (@hugogiraudel)
-//
-//      This project is licensed under the terms of the MIT license
-
-
-////
-/// include-media library public configuration
-/// @author Eduardo Boucas
-/// @access public
-////
-
-
-///
-/// Creates a list of global breakpoints
-///
-/// @example scss - Creates a single breakpoint with the label `phone`
-///  $breakpoints: ('phone': 320px);
-///
-$breakpoints: (
-  'phone': 320px,
-  'tablet': 768px,
-  'desktop': 1024px
-) !default;
-
-
-///
-/// Creates a list of static expressions or media types
-///
-/// @example scss - Creates a single media type (screen)
-///  $media-expressions: ('screen': 'screen');
-///
-/// @example scss - Creates a static expression with logical disjunction (OR operator)
-///  $media-expressions: (
-///    'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)'
-///  );
-///
-$media-expressions: (
-  'screen': 'screen',
-  'print': 'print',
-  'handheld': 'handheld',
-  'landscape': '(orientation: landscape)',
-  'portrait': '(orientation: portrait)',
-  'retina2x': '(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)',
-  'retina3x': '(-webkit-min-device-pixel-ratio: 3), (min-resolution: 350dpi)'
-) !default;
-
-
-///
-/// Defines a number to be added or subtracted from each unit when declaring breakpoints with exclusive intervals
-///
-/// @example scss - Interval for pixels is defined as `1` by default
-///  @include media('>128px') {}
-///
-///  /* Generates: */
-///  @media (min-width: 129px) {}
-///
-/// @example scss - Interval for ems is defined as `0.01` by default
-///  @include media('>20em') {}
-///
-///  /* Generates: */
-///  @media (min-width: 20.01em) {}
-///
-/// @example scss - Interval for rems is defined as `0.1` by default, to be used with `font-size: 62.5%;`
-///  @include media('>2.0rem') {}
-///
-///  /* Generates: */
-///  @media (min-width: 2.1rem) {}
-///
-$unit-intervals: (
-  'px': 1,
-  'em': 0.01,
-  'rem': 0.1
-) !default;
-
-///
-/// Defines whether support for media queries is available, useful for creating separate stylesheets
-/// for browsers that don't support media queries.
-///
-/// @example scss - Disables support for media queries
-///  $im-media-support: false;
-///  @include media('>=tablet') {
-///    .foo {
-///      color: tomato;
-///    }
-///  }
-///
-///  /* Generates: */
-///  .foo {
-///    color: tomato;
-///  }
-///
-$im-media-support: true !default;
-
-///
-/// Selects which breakpoint to emulate when support for media queries is disabled. Media queries that start at or
-/// intercept the breakpoint will be displayed, any others will be ignored.
-///
-/// @example scss - This media query will show because it intercepts the static breakpoint
-///  $im-media-support: false;
-///  $im-no-media-breakpoint: 'desktop';
-///  @include media('>=tablet') {
-///    .foo {
-///      color: tomato;
-///    }
-///  }
-///
-///  /* Generates: */
-///  .foo {
-///    color: tomato;
-///  }
-///
-/// @example scss - This media query will NOT show because it does not intercept the desktop breakpoint
-///  $im-media-support: false;
-///  $im-no-media-breakpoint: 'tablet';
-///  @include media('>=desktop') {
-///    .foo {
-///      color: tomato;
-///    }
-///  }
-///
-///  /* No output */
-///
-$im-no-media-breakpoint: 'desktop' !default;
-
-///
-/// Selects which media expressions are allowed in an expression for it to be used when media queries
-/// are not supported.
-///
-/// @example scss - This media query will show because it intercepts the static breakpoint and contains only accepted media expressions
-///  $im-media-support: false;
-///  $im-no-media-breakpoint: 'desktop';
-///  $im-no-media-expressions: ('screen');
-///  @include media('>=tablet', 'screen') {
-///    .foo {
-///      color: tomato;
-///    }
-///  }
-///
-///   /* Generates: */
-///   .foo {
-///     color: tomato;
-///   }
-///
-/// @example scss - This media query will NOT show because it intercepts the static breakpoint but contains a media expression that is not accepted
-///  $im-media-support: false;
-///  $im-no-media-breakpoint: 'desktop';
-///  $im-no-media-expressions: ('screen');
-///  @include media('>=tablet', 'retina2x') {
-///    .foo {
-///      color: tomato;
-///    }
-///  }
-///
-///  /* No output */
-///
-$im-no-media-expressions: ('screen', 'portrait', 'landscape') !default;
-
-////
-/// Cross-engine logging engine
-/// @author Hugo Giraudel
-/// @access private
-////
-
-
-///
-/// Log a message either with `@error` if supported
-/// else with `@warn`, using `feature-exists('at-error')`
-/// to detect support.
-///
-/// @param {String} $message - Message to log
-///
-@function log($message) {
-  @if feature-exists('at-error') {
-    @error $message;
-  } @else {
-    @warn $message;
-    $_: noop();
-  }
-
-  @return $message;
-}
-
-
-///
-/// Wrapper mixin for the log function so it can be used with a more friendly
-/// API than `@if log('..') {}` or `$_: log('..')`. Basically, use the function
-/// within functions because it is not possible to include a mixin in a function
-/// and use the mixin everywhere else because it's much more elegant.
-///
-/// @param {String} $message - Message to log
-///
-@mixin log($message) {
-  @if log($message) {}
-}
-
-
-///
-/// Function with no `@return` called next to `@warn` in Sass 3.3
-/// to trigger a compiling error and stop the process.
-///
-@function noop() {}
-
-///
-/// Determines whether a list of conditions is intercepted by the static breakpoint.
-///
-/// @param {Arglist}   $conditions  - Media query conditions
-///
-/// @return {Boolean} - Returns true if the conditions are intercepted by the static breakpoint
-///
-@function im-intercepts-static-breakpoint($conditions...) {
-  $no-media-breakpoint-value: map-get($breakpoints, $im-no-media-breakpoint);
-
-  @if not $no-media-breakpoint-value {
-    @if log('`#{$im-no-media-breakpoint}` is not a valid breakpoint.') {}
-  }
-
-  @each $condition in $conditions {
-    @if not map-has-key($media-expressions, $condition) {
-      $operator: get-expression-operator($condition);
-      $prefix: get-expression-prefix($operator);
-      $value: get-expression-value($condition, $operator);
-
-      // scss-lint:disable SpaceAroundOperator
-      @if ($prefix == 'max' and $value <= $no-media-breakpoint-value) or
-          ($prefix == 'min' and $value > $no-media-breakpoint-value) {
-        @return false;
-      }
-    } @else if not index($im-no-media-expressions, $condition) {
-      @return false;
-    }
-  }
-
-  @return true;
-}
-
-////
-/// Parsing engine
-/// @author Hugo Giraudel
-/// @access private
-////
-
-
-///
-/// Get operator of an expression
-///
-/// @param {String} $expression - Expression to extract operator from
-///
-/// @return {String} - Any of `>=`, `>`, `<=`, `<`, `≥`, `≤`
-///
-@function get-expression-operator($expression) {
-  @each $operator in ('>=', '>', '<=', '<', '≥', '≤') {
-    @if str-index($expression, $operator) {
-      @return $operator;
-    }
-  }
-
-  // It is not possible to include a mixin inside a function, so we have to
-  // rely on the `log(..)` function rather than the `log(..)` mixin. Because
-  // functions cannot be called anywhere in Sass, we need to hack the call in
-  // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
-  // Sass 3.3, change this line in `@if log(..) {}` instead.
-  $_: log('No operator found in `#{$expression}`.');
-}
-
-
-///
-/// Get dimension of an expression, based on a found operator
-///
-/// @param {String} $expression - Expression to extract dimension from
-/// @param {String} $operator - Operator from `$expression`
-///
-/// @return {String} - `width` or `height` (or potentially anything else)
-///
-@function get-expression-dimension($expression, $operator) {
-  $operator-index: str-index($expression, $operator);
-  $parsed-dimension: str-slice($expression, 0, $operator-index - 1);
-  $dimension: 'width';
-
-  @if str-length($parsed-dimension) > 0 {
-    $dimension: $parsed-dimension;
-  }
-
-  @return $dimension;
-}
-
-
-///
-/// Get dimension prefix based on an operator
-///
-/// @param {String} $operator - Operator
-///
-/// @return {String} - `min` or `max`
-///
-@function get-expression-prefix($operator) {
-  @return if(index(('<', '<=', '≤'), $operator), 'max', 'min');
-}
-
-
-///
-/// Get value of an expression, based on a found operator
-///
-/// @param {String} $expression - Expression to extract value from
-/// @param {String} $operator - Operator from `$expression`
-///
-/// @return {Number} - A numeric value
-///
-@function get-expression-value($expression, $operator) {
-  $operator-index: str-index($expression, $operator);
-  $value: str-slice($expression, $operator-index + str-length($operator));
-
-  @if map-has-key($breakpoints, $value) {
-    $value: map-get($breakpoints, $value);
-  } @else {
-    $value: to-number($value);
-  }
-
-  $interval: map-get($unit-intervals, unit($value));
-
-  @if not $interval {
-    // It is not possible to include a mixin inside a function, so we have to
-    // rely on the `log(..)` function rather than the `log(..)` mixin. Because
-    // functions cannot be called anywhere in Sass, we need to hack the call in
-    // a dummy variable, such as `$_`. If anybody ever raise a scoping issue with
-    // Sass 3.3, change this line in `@if log(..) {}` instead.
-    $_: log('Unknown unit `#{unit($value)}`.');
-  }
-
-  @if $operator == '>' {
-    $value: $value + $interval;
-  } @else if $operator == '<' {
-    $value: $value - $interval;
-  }
-
-  @return $value;
-}
-
-
-///
-/// Parse an expression to return a valid media-query expression
-///
-/// @param {String} $expression - Expression to parse
-///
-/// @return {String} - Valid media query
-///
-@function parse-expression($expression) {
-  // If it is part of $media-expressions, it has no operator
-  // then there is no need to go any further, just return the value
-  @if map-has-key($media-expressions, $expression) {
-    @return map-get($media-expressions, $expression);
-  }
-
-  $operator: get-expression-operator($expression);
-  $dimension: get-expression-dimension($expression, $operator);
-  $prefix: get-expression-prefix($operator);
-  $value: get-expression-value($expression, $operator);
-
-  @return '(#{$prefix}-#{$dimension}: #{$value})';
-}
-
-///
-/// Slice `$list` between `$start` and `$end` indexes
-///
-/// @access private
-///
-/// @param {List} $list - List to slice
-/// @param {Number} $start [1] - Start index
-/// @param {Number} $end [length($list)] - End index
-///
-/// @return {List} Sliced list
-///
-@function slice($list, $start: 1, $end: length($list)) {
-  @if length($list) < 1 or $start > $end {
-    @return ();
-  }
-
-  $result: ();
-
-  @for $i from $start through $end {
-    $result: append($result, nth($list, $i));
-  }
-
-  @return $result;
-}
-
-////
-/// String to number converter
-/// @author Hugo Giraudel
-/// @access private
-////
-
-
-///
-/// Casts a string into a number
-///
-/// @param {String | Number} $value - Value to be parsed
-///
-/// @return {Number}
-///
-@function to-number($value) {
-  @if type-of($value) == 'number' {
-    @return $value;
-  } @else if type-of($value) != 'string' {
-    $_: log('Value for `to-number` should be a number or a string.');
-  }
-
-  $first-character: str-slice($value, 1, 1);
-  $result: 0;
-  $digits: 0;
-  $minus: ($first-character == '-');
-  $numbers: ('0': 0, '1': 1, '2': 2, '3': 3, '4': 4, '5': 5, '6': 6, '7': 7, '8': 8, '9': 9);
-
-  // Remove +/- sign if present at first character
-  @if ($first-character == '+' or $first-character == '-') {
-    $value: str-slice($value, 2);
-  }
-
-  @for $i from 1 through str-length($value) {
-    $character: str-slice($value, $i, $i);
-
-    @if not (index(map-keys($numbers), $character) or $character == '.') {
-      @return to-length(if($minus, -$result, $result), str-slice($value, $i))
-    }
-
-    @if $character == '.' {
-      $digits: 1;
-    } @else if $digits == 0 {
-      $result: $result * 10 + map-get($numbers, $character);
-    } @else {
-      $digits: $digits * 10;
-      $result: $result + map-get($numbers, $character) / $digits;
-    }
-  }
-
-  @return if($minus, -$result, $result);
-}
-
-
-///
-/// Add `$unit` to `$value`
-///
-/// @param {Number} $value - Value to add unit to
-/// @param {String} $unit - String representation of the unit
-///
-/// @return {Number} - `$value` expressed in `$unit`
-///
-@function to-length($value, $unit) {
-  $units: ('px': 1px, 'cm': 1cm, 'mm': 1mm, '%': 1%, 'ch': 1ch, 'pc': 1pc, 'in': 1in, 'em': 1em, 'rem': 1rem, 'pt': 1pt, 'ex': 1ex, 'vw': 1vw, 'vh': 1vh, 'vmin': 1vmin, 'vmax': 1vmax);
-
-  @if not index(map-keys($units), $unit) {
-    $_: log('Invalid unit `#{$unit}`.');
-  }
-
-  @return $value * map-get($units, $unit);
-}
-
-///
-/// This mixin aims at redefining the configuration just for the scope of
-/// the call. It is helpful when having a component needing an extended
-/// configuration such as custom breakpoints (referred to as tweakpoints)
-/// for instance.
-///
-/// @author Hugo Giraudel
-///
-/// @param {Map} $tweakpoints [()] - Map of tweakpoints to be merged with `$breakpoints`
-/// @param {Map} $tweak-media-expressions [()] - Map of tweaked media expressions to be merged with `$media-expression`
-///
-/// @example scss - Extend the global breakpoints with a tweakpoint
-///  @include media-context(('custom': 678px)) {
-///    .foo {
-///      @include media('>phone', '<=custom') {
-///       // ...
-///      }
-///    }
-///  }
-///
-/// @example scss - Extend the global media expressions with a custom one
-///  @include media-context($tweak-media-expressions: ('all': 'all')) {
-///    .foo {
-///      @include media('all', '>phone') {
-///       // ...
-///      }
-///    }
-///  }
-///
-/// @example scss - Extend both configuration maps
-///  @include media-context(('custom': 678px), ('all': 'all')) {
-///    .foo {
-///      @include media('all', '>phone', '<=custom') {
-///       // ...
-///      }
-///    }
-///  }
-///
-@mixin media-context($tweakpoints: (), $tweak-media-expressions: ()) {
-  // Save global configuration
-  $global-breakpoints: $breakpoints;
-  $global-media-expressions: $media-expressions;
-
-  // Update global configuration
-  $breakpoints: map-merge($breakpoints, $tweakpoints) !global;
-  $media-expressions: map-merge($media-expressions, $tweak-media-expressions) !global;
-
-  @content;
-
-  // Restore global configuration
-  $breakpoints: $global-breakpoints !global;
-  $media-expressions: $global-media-expressions !global;
-}
-
-////
-/// include-media public exposed API
-/// @author Eduardo Boucas
-/// @access public
-////
-
-
-///
-/// Generates a media query based on a list of conditions
-///
-/// @param {Arglist}   $conditions  - Media query conditions
-///
-/// @example scss - With a single set breakpoint
-///  @include media('>phone') { }
-///
-/// @example scss - With two set breakpoints
-///  @include media('>phone', '<=tablet') { }
-///
-/// @example scss - With custom values
-///  @include media('>=358px', '<850px') { }
-///
-/// @example scss - With set breakpoints with custom values
-///  @include media('>desktop', '<=1350px') { }
-///
-/// @example scss - With a static expression
-///  @include media('retina2x') { }
-///
-/// @example scss - Mixing everything
-///  @include media('>=350px', '<tablet', 'retina3x') { }
-///
-@mixin media($conditions...) {
-  // scss-lint:disable SpaceAroundOperator
-  @if ($im-media-support and length($conditions) == 0) or
-      (not $im-media-support and im-intercepts-static-breakpoint($conditions...)) {
-    @content;
-  } @else if ($im-media-support and length($conditions) > 0) {
-    @media #{unquote(parse-expression(nth($conditions, 1)))} {
-      // Recursive call
-      @include media(slice($conditions, 2)...) {
-        @content;
-      }
-    }
-  }
-}

sass/_layout-general.scss

@@ -1,142 +0,0 @@
-/* ----------------------------- */
-/* ==Global Layout               */
-/* ----------------------------- */
-
-/* module, gains superpower "BFC" Block Formating Context */
-.mod,
-.bfc {
-  overflow: hidden;
-}
-
-/* blocks that needs to be placed under floats */
-.clear,
-.#{$kna-namespace}line,
-.#{$kna-namespace}row {
-  clear: both;
-}
-
-/* blocks that must contain floats */
-.clearfix,
-.#{$kna-namespace}line {
-  &::after {
-    content: "";
-    display: table;
-    clear: both;
-    border-collapse: collapse;
-  }
-}
-
-/* simple blocks alignment */
-.#{$kna-namespace}left {
-  margin-right: auto;
-}
-
-.#{$kna-namespace}right {
-  margin-left: auto;
-}
-
-.#{$kna-namespace}center {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* text and contents alignment */
-.#{$kna-namespace}txtleft {
-  text-align: left;
-}
-
-.#{$kna-namespace}txtright {
-  text-align: right;
-}
-
-.#{$kna-namespace}txtcenter {
-  text-align: center;
-}
-
-/* floating elements */
-.#{$kna-namespace}fl {
-  float: left;
-}
-
-img.#{$kna-namespace}fl {
-  margin-right: $small-value;
-}
-
-.#{$kna-namespace}fr {
-  float: right;
-}
-
-img.#{$kna-namespace}fr {
-  margin-left: $small-value;
-}
-
-img.#{$kna-namespace}fl,
-img.#{$kna-namespace}fr {
-  margin-bottom: $tiny-value;
-}
-
-/* table layout */
-.#{$kna-namespace}row {
-  display: table;
-  table-layout: fixed;
-  width: 100%;
-}
-
-.#{$kna-namespace}row > *,
-.#{$kna-namespace}col {
-  display: table-cell;
-  vertical-align: top;
-}
-
-/* no table-cell for script tag when body is a .row */
-body > script {
-  display: none !important;
-}
-
-/* inline-block */
-.#{$kna-namespace}inbl {
-  display: inline-block;
-  vertical-align: top;
-}
-
-/* flexbox layout
-http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html
-*/
-
-[class*="#{$kna-namespace}flex-container"] {
-  display : flex;
-  flex-wrap: wrap;
-}
-
-.#{$kna-namespace}flex-container-h {
-  flex-direction: row;
-}
-
-.#{$kna-namespace}flex-container-v {
-  flex-direction: column;
-}
-
-.#{$kna-namespace}flex-item-fluid {
-  flex: 1;
-  min-width: 0;
-}
-
-.#{$kna-namespace}flex-item-first,
-.#{$kna-namespace}grid-item-first {
-  order : -1;
-}
-
-.#{$kna-namespace}flex-item-medium,
-.#{$kna-namespace}grid-item-medium {
-  order : 0;
-}
-
-.#{$kna-namespace}flex-item-last,
-.#{$kna-namespace}grid-item-last {
-  order : 1;
-}
-
-.#{$kna-namespace}flex-item-center,
-.#{$kna-namespace}grid-item-center {
-  margin: auto;
-}

sass/_layout-grids.scss

@@ -1,165 +0,0 @@
-/* ---------------------------------- */
-/* ==Grid Layout (grillade)           */
-/* ---------------------------------- */
-
-// Tuto : http://www.alsacreations.com/tuto/lire/1659-une-grille-responsive-avec-flexbox-et-LESS.html
-// Demo : http://codepen.io/raphaelgoetter/pen/ZYjwEB
-
-// Usage in vanilla CSS:
-// - <div class="grid-4"> for an equal fourth columns grid container
-// - <div class="grid-2-1"> for an uneven columns grid container
-
-// Usage with preprocessors : if you're using Sass, you can config grids variables :
-// n = number of columns (default = 4) / g = gutter value (default = 1em)
-// example : .grid-perso { @include grid(12, 10px); }
-// ... or uneven grids :
-// left = left ratio column (default = 2) / right = right ratio column (default = 1)
-// example : .grid-perso { @include uneven-grid(2, 1, 10px); }
-
-/* grid container */
-[class*="#{$kna-namespace}grid-"] {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin-left: -$grid-gutter;
-}
-
-/* grid childs */
-[class*="#{$kna-namespace}grid-"] > * {
-  box-sizing: border-box;
-  flex: 0 0 auto;
-  width: calc(100% - #{$grid-gutter} - .01px);// @bugfix IE https://github.com/alsacreations/KNACSS/issues/133;
-  min-width: 0;
-  min-height: 0;
-  margin-left: $grid-gutter;
-  @include media('>tiny-screen', '<=small-screen') {
-    & {
-      width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
-    }
-    &.grid-item-double {
-      width: calc(100% - #{$grid-gutter} - .01px);
-    }
-  }
-}
-
-// Sass mixins for *equal* columns grid container
-// example : .grid-perso { @include grid(12); }
-@mixin grid($grid-number:$grid-number,$newgutter:$grid-gutter) {
-  @if $newgutter != $grid-gutter {
-    margin-left: -$newgutter;
-  }
-  & > * {
-    width: calc(100% * 1 / #{$grid-number} - #{$newgutter} - .01px);
-    @if $newgutter != $grid-gutter {
-      margin-left: $newgutter;
-    }
-  }
-  & > .#{$kna-namespace}grid-item-double {
-    width: calc(100% * 2 / #{$grid-number} - #{$newgutter});
-  }
-}
-
-// Examples : will be compiled in CSS
-@include media('>small-screen') {
-  @for $i from 2 through 12 {
-    [class*="#{$kna-namespace}grid-#{$i}"] {
-        @include grid(#{$i});
-    }
-  }
-}
-
-/* Responsive grid */
-// example : .grid-4-small-2 will be 1 column (tiny) then 2 columns (small) then 4 columns
-@include media('>tiny-screen', '<=small-screen') {
-  [class*="-small-4"] > * {
-    width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-4"] > .grid-item-double {
-    width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-3"] > * {
-    width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-3"] > .grid-item-double {
-    width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-2"] > * {
-    width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-2"] > .grid-item-double {
-    width: calc(100% - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-1"] > * {
-    width: calc(100% - #{$grid-gutter} - .01px);
-  }
-  [class*="-small-1"] > .grid-item-double {
-    width: calc(100% - #{$grid-gutter} - .01px);
-  }
-}
-
-
-// Sass mixins for *unequal* columns grid container
-// example : .grid-perso { @include uneven-grid(2, 1); }
-@mixin uneven-grid($grid-left:$grid-left, $grid-right:$grid-right, $newgutter:$grid-gutter) {
-  @if $newgutter != $grid-gutter {
-    margin-left: -$newgutter;
-  }
-  > * {
-    @if $newgutter != $grid-gutter {
-      margin-left: $newgutter;
-      width: calc(100% - #{$newgutter});
-    }
-  }
-  @include media('>small-screen') {
-    & > :nth-child(odd) {
-      $size: ($grid-left / ($grid-left + $grid-right)) * 100%;
-      width: calc(#{$size} - #{$newgutter});
-    }
-    & > :nth-child(even) {
-      $size: ($grid-right / ($grid-left + $grid-right)) * 100%;
-      width: calc(#{$size} - #{$newgutter});
-    }
-  }
-}
-
-
-// Examples : will be compiled in CSS
-
-.#{$kna-namespace}grid-2-1 {
-  @include uneven-grid(2,1);
-}
-
-.#{$kna-namespace}grid-1-2 {
-  @include uneven-grid(1,2);
-}
-
-.#{$kna-namespace}grid-3-1 {
-  @include uneven-grid(3,1);
-}
-
-.#{$kna-namespace}grid-1-3 {
-  @include uneven-grid(1,3);
-}
-
-.#{$kna-namespace}grid-3-2 {
-  @include uneven-grid(3,2);
-}
-
-.#{$kna-namespace}grid-2-3 {
-  @include uneven-grid(2,3);
-}
-
-.#{$kna-namespace}grid-4-1 {
-  @include uneven-grid(4,1);
-}
-
-.#{$kna-namespace}grid-1-4 {
-  @include uneven-grid(1,4);
-}
-
-.#{$kna-namespace}pull {
-  margin-right: auto;
-}
-.#{$kna-namespace}push {
-  margin-left: auto;
-}

sass/_library-base.scss

@@ -1,195 +0,0 @@
-/* ----------------------------- */
-/* ==Base (basic styles)         */
-/* ----------------------------- */
-
-/* switching to border-box model for all elements */
-html {
-  box-sizing: border-box;
-}
-
-* {
-  box-sizing: inherit;
-}
-
-ul,
-ol {
-  padding-left: 2em;
-}
-
-img {
-  vertical-align: middle;
-}
-
-/* height auto only for non SVG images */
-img:not([src$=".svg"]) {
-  height: auto;
-}
-
-blockquote,
-figure {
-  margin-left: 0;
-  margin-right: 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 */
-  /* thanks to @guardian, @victorbritopro and @eQRoeil */
-  font-size: calc(1em * 0.625);
-}
-
-body {
-  font-size: $base-font-size;
-  background-color: $base-background;
-  color: $base-color;
-  font-family: $font-stack-common;
-  line-height: $line-height;
-}
-
-a {
-  color: $base-color-link;
-  &:hover, &:focus, &:active {
-    color: $base-color-link-hover;
-  }
-}
-
-/* font-sizing for content */
-p,
-.#{$kna-namespace}p-like,
-ul,
-ol,
-dl,
-blockquote,
-pre,
-td,
-th,
-label,
-textarea,
-caption,
-details,
-figure {
-  margin-top: 0.75em;
-  margin-bottom: 0;
-  line-height: $line-height;
-}
-
-h1, .#{$kna-namespace}h1-like {
-  font-size: $h1-size;
-  font-family: $font-stack-headings;
-}
-
-h2, .#{$kna-namespace}h2-like {
-  font-size: $h2-size;
-  font-family: $font-stack-headings;
-}
-
-h3, .#{$kna-namespace}h3-like {
-  font-size: $h3-size;
-}
-
-h4, .#{$kna-namespace}h4-like {
-  font-size: $h4-size;
-}
-
-h5, .#{$kna-namespace}h5-like {
-  font-size: $h5-size;
-}
-
-h6, .#{$kna-namespace}h6-like {
-  font-size: $h6-size;
-}
-
-/* alternate font-sizing */
-.#{$kna-namespace}smaller {
-  font-size: 0.6em;
-}
-
-.#{$kna-namespace}small {
-  font-size: 0.8em;
-}
-
-.#{$kna-namespace}big {
-  font-size: 1.2em;
-}
-
-.#{$kna-namespace}bigger {
-  font-size: 1.5em;
-}
-
-.#{$kna-namespace}biggest {
-  font-size: 2em;
-}
-
-code,
-pre,
-samp,
-kbd {
-  /* IE fix */
-  white-space: pre-line;
-  white-space: pre-wrap;
-  font-family: $font-stack-monospace;
-  line-height: normal;
-}
-
-em,
-.#{$kna-namespace}italic,
-address,
-cite,
-i,
-var {
-  font-style: italic;
-}
-
-/* avoid top margins on first content element */
-p,
-.#{$kna-namespace}p-like,
-ul,
-ol,
-dl,
-blockquote,
-pre,
-h1,
-.#{$kna-namespace}h1-like,
-h2,
-.#{$kna-namespace}h2-like,
-h3,
-.#{$kna-namespace}h3-like,
-h4,
-.#{$kna-namespace}h4-like,
-h5,
-.#{$kna-namespace}h5-like,
-h6,
-.#{$kna-namespace}h6-like {
-  &:first-child {
-    margin-top: 0;
-  }
-}
-
-/* avoid margins on nested elements */
-li p,
-li .#{$kna-namespace}p-like,
-li ul,
-li ol {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-/* max values */
-img,
-table,
-td,
-blockquote,
-code,
-pre,
-textarea,
-input,
-video,
-svg {
-  max-width: 100%;
-}
-
-/* margin-bottom on tables */
-table {
-  margin-bottom: $medium-value;
-}

sass/_library-misc.scss

@@ -1,48 +0,0 @@
-/* ----------------------------- */
-/* ==Misc (skip links, hyphens)  */
-/* ----------------------------- */
-
-/* styling skip links */
-.#{$kna-namespace}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;
-    }
-  }
-}
-
-// hyphens on tiny screens
-@include media('<=tiny-screen') {
-  /* 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 small screens
-@include media('<=tiny-screen') {
-  .no-wrapping {
-    word-wrap: normal;
-    hyphens: manual;
-  }
-}

sass/_library-styling.scss

@@ -1,113 +0,0 @@
-/* ----------------------------- */
-/* ==Stylings (minor stylings)   */
-/* ----------------------------- */
-
-/* styling elements */
-code, kbd, mark {
-  border-radius: 2px;
-}
-
-kbd {
-  padding: 0 2px;
-  border: 1px solid #999;
-}
-
-code {
-  padding: 2px 4px;
-  background: rgba(0,0,0,0.04);
-  color: #b11;
-}
-
-pre code {
-  padding: 0;
-  background: none;
-  color: inherit;
-  border-radius: 0;
-}
-
-mark {
-  padding:2px 4px;
-}
-
-sup,
-sub {
-  vertical-align: 0;
-}
-
-sup {
-  bottom: 1ex;
-}
-
-sub {
-  top: 0.5ex;
-}
-
-blockquote {
-  position: relative;
-  padding-left: 3em;
-}
-
-blockquote::before {
-  content: "\201C";
-  position: absolute;
-  left: 0;
-  top: 0;
-  font-family: georgia, serif;
-  font-size: 5em;
-  line-height: 0.9;
-  color: rgba(0, 0, 0, .3);
-}
-
-blockquote > footer {
-  margin-top: .75em;
-  font-size: 0.9em;
-  color: rgba(0, 0, 0, .7);
-}
-
-blockquote > footer::before {
-  content: "\2014 \0020";
-}
-
-q {
-  font-style: normal;
-}
-
-q,
-.#{$kna-namespace}q {
-  quotes: "“\00a0" "\00a0”";
-}
-
-q:lang(fr),
-.#{$kna-namespace}q: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;
-}
-
-/* tables */
-table,
-.#{$kna-namespace}table {
-  border: 1px solid #ccc;
-}
-
-caption {
-  padding: $small-value;
-  color: #555;
-  font-style: italic;
-}
-
-td,
-th {
-  padding: 0.3em 0.8em;
-  border: 1px #aaa dotted;
-  text-align: left;
-}

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 {
-  margin: 0 0 1.5em;
-  overflow: hidden;
-}
-
-.comment-navigation .nav-previous,
-.paging-navigation .nav-previous,
-.post-navigation .nav-previous {
-  float: left;
-  width: 50%;
-}
-
-.comment-navigation .nav-next,
-.paging-navigation .nav-next,
-.post-navigation .nav-next {
-  float: right;
-  text-align: right;
-  width: 50%;
-}
-
-// 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 categorie
-.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;
-}

sass/_normalize/_normalize.scss

@@ -1,419 +0,0 @@
-/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */
-
-/**
- * 1. Change the default font family in all browsers (opinionated).
- * 2. Prevent adjustments of font size after orientation changes in IE and iOS.
- */
-
-html {
-  font-family: sans-serif; /* 1 */
-  -ms-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%; /* 2 */
-}
-
-/**
- * Remove the margin in all browsers (opinionated).
- */
-
-body {
-  margin: 0;
-}
-
-/* HTML5 display definitions
-   ========================================================================== */
-
-/**
- * Add the correct display in IE 9-.
- * 1. Add the correct display in Edge, IE, and Firefox.
- * 2. Add the correct display in IE.
- */
-
-article,
-aside,
-details, /* 1 */
-figcaption,
-figure,
-footer,
-header,
-main, /* 2 */
-menu,
-nav,
-section,
-summary { /* 1 */
-  display: block;
-}
-
-/**
- * Add the correct display in IE 9-.
- */
-
-audio,
-canvas,
-progress,
-video {
-  display: inline-block;
-}
-
-/**
- * Add the correct display in iOS 4-7.
- */
-
-audio:not([controls]) {
-  display: none;
-  height: 0;
-}
-
-/**
- * Add the correct vertical alignment in Chrome, Firefox, and Opera.
- */
-
-progress {
-  vertical-align: baseline;
-}
-
-/**
- * Add the correct display in IE 10-.
- * 1. Add the correct display in IE.
- */
-
-template, /* 1 */
-[hidden] {
-  display: none;
-}
-
-/* Links
-   ========================================================================== */
-
-/**
- * 1. Remove the gray background on active links in IE 10.
- * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
- */
-
-a {
-  background-color: transparent; /* 1 */
-  -webkit-text-decoration-skip: objects; /* 2 */
-}
-
-/**
- * Remove the outline on focused links when they are also active or hovered
- * in all browsers (opinionated).
- */
-
-a:active,
-a:hover {
-  outline-width: 0;
-}
-
-/* Text-level semantics
-   ========================================================================== */
-
-/**
- * 1. Remove the bottom border in Firefox 39-.
- * 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 */
-}
-
-/**
- * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
- */
-
-b,
-strong {
-  font-weight: inherit;
-}
-
-/**
- * Add the correct font weight in Chrome, Edge, and Safari.
- */
-
-b,
-strong {
-  font-weight: bolder;
-}
-
-/**
- * Add the correct font style in Android 4.3-.
- */
-
-dfn {
-  font-style: italic;
-}
-
-/**
- * Correct the font size and margin on `h1` elements within `section` and
- * `article` contexts in Chrome, Firefox, and Safari.
- */
-
-h1 {
-  font-size: 2em;
-  margin: 0.67em 0;
-}
-
-/**
- * Add the correct background and color in IE 9-.
- */
-
-mark {
-  background-color: #ff0;
-  color: #000;
-}
-
-/**
- * Add the correct font size in all browsers.
- */
-
-small {
-  font-size: 80%;
-}
-
-/**
- * Prevent `sub` and `sup` elements from affecting the line height in
- * all browsers.
- */
-
-sub,
-sup {
-  font-size: 75%;
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-}
-
-sub {
-  bottom: -0.25em;
-}
-
-sup {
-  top: -0.5em;
-}
-
-/* Embedded content
-   ========================================================================== */
-
-/**
- * Remove the border on images inside links in IE 10-.
- */
-
-img {
-  border-style: none;
-}
-
-/**
- * Hide the overflow in IE.
- */
-
-svg:not(:root) {
-  overflow: hidden;
-}
-
-/* Grouping content
-   ========================================================================== */
-
-/**
- * 1. Correct the inheritance and scaling of font size in all browsers.
- * 2. Correct the odd `em` font sizing in all browsers.
- */
-
-code,
-kbd,
-pre,
-samp {
-  font-family: monospace, monospace; /* 1 */
-  font-size: 1em; /* 2 */
-}
-
-/**
- * Add the correct margin in IE 8.
- */
-
-figure {
-  margin: 1em 40px;
-}
-
-/**
- * 1. Add the correct box sizing in Firefox.
- * 2. Show the overflow in Edge and IE.
- */
-
-hr {
-  box-sizing: content-box; /* 1 */
-  height: 0; /* 1 */
-  overflow: visible; /* 2 */
-}
-
-/* Forms
-   ========================================================================== */
-
-/**
- * 1. Change font properties to `inherit` in all browsers (opinionated).
- * 2. Remove the margin in Firefox and Safari.
- */
-
-button,
-input,
-select,
-textarea {
-  font: inherit; /* 1 */
-  margin: 0; /* 2 */
-}
-
-/**
- * Restore the font weight unset by the previous rule.
- */
-
-optgroup {
-  font-weight: bold;
-}
-
-/**
- * Show the overflow in IE.
- * 1. Show the overflow in Edge.
- */
-
-button,
-input { /* 1 */
-  overflow: visible;
-}
-
-/**
- * Remove the inheritance of text transform in Edge, Firefox, and IE.
- * 1. Remove the inheritance of text transform in Firefox.
- */
-
-button,
-select { /* 1 */
-  text-transform: none;
-}
-
-/**
- * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
- *    controls in Android 4.
- * 2. Correct the inability to style clickable types in iOS and Safari.
- */
-
-button,
-html [type="button"], /* 1 */
-[type="reset"],
-[type="submit"] {
-  -webkit-appearance: button; /* 2 */
-}
-
-/**
- * Remove the inner border and padding in Firefox.
- */
-
-button::-moz-focus-inner,
-[type="button"]::-moz-focus-inner,
-[type="reset"]::-moz-focus-inner,
-[type="submit"]::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
-/**
- * Restore the focus styles unset by the previous rule.
- */
-
-button:-moz-focusring,
-[type="button"]:-moz-focusring,
-[type="reset"]:-moz-focusring,
-[type="submit"]:-moz-focusring {
-  outline: 1px dotted ButtonText;
-}
-
-/**
- * Change the border, margin, and padding in all browsers (opinionated).
- */
-
-fieldset {
-  border: 1px solid #c0c0c0;
-  margin: 0 2px;
-  padding: 0.35em 0.625em 0.75em;
-}
-
-/**
- * 1. Correct the text wrapping in Edge and IE.
- * 2. Correct the color inheritance from `fieldset` elements in IE.
- * 3. Remove the padding so developers are not caught out when they zero out
- *    `fieldset` elements in all browsers.
- */
-
-legend {
-  box-sizing: border-box; /* 1 */
-  color: inherit; /* 2 */
-  display: table; /* 1 */
-  max-width: 100%; /* 1 */
-  padding: 0; /* 3 */
-  white-space: normal; /* 1 */
-}
-
-/**
- * Remove the default vertical scrollbar in IE.
- */
-
-textarea {
-  overflow: auto;
-}
-
-/**
- * 1. Add the correct box sizing in IE 10-.
- * 2. Remove the padding in IE 10-.
- */
-
-[type="checkbox"],
-[type="radio"] {
-  box-sizing: border-box; /* 1 */
-  padding: 0; /* 2 */
-}
-
-/**
- * Correct the cursor style of increment and decrement buttons in Chrome.
- */
-
-[type="number"]::-webkit-inner-spin-button,
-[type="number"]::-webkit-outer-spin-button {
-  height: auto;
-}
-
-/**
- * 1. Correct the odd appearance in Chrome and Safari.
- * 2. Correct the outline style in Safari.
- */
-
-[type="search"] {
-  -webkit-appearance: textfield; /* 1 */
-  outline-offset: -2px; /* 2 */
-}
-
-/**
- * Remove the inner padding and cancel buttons in Chrome and Safari on OS X.
- */
-
-[type="search"]::-webkit-search-cancel-button,
-[type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
-}
-
-/**
- * Correct the text style of placeholders in Chrome, Edge, and Safari.
- */
-
-::-webkit-input-placeholder {
-  color: inherit;
-  opacity: 0.54;
-}
-
-/**
- * 1. Correct the inability to style clickable types in iOS and Safari.
- * 2. Change font properties to `inherit` in Safari.
- */
-
-::-webkit-file-upload-button {
-  -webkit-appearance: button; /* 1 */
-  font: inherit; /* 2 */
-}

sass/_object-forms.scss

@@ -1,110 +0,0 @@
-/* ----------------------------- */
-/* ==Forms                       */
-/* ----------------------------- */
-
-/* thanks to HTML5boilerplate,
-* github.com/nathansmith/formalize and www.sitepen.com
-*/
-
-/* buttons */
-.#{$kna-namespace}btn {
-  display: inline-block;
-}
-
-/* forms items */
-form,
-fieldset {
-  border: none;
-}
-
-input,
-button,
-select,
-label,
-.#{$kna-namespace}btn {
-  font-family: inherit;
-  font-size: inherit;
-}
-
-button,
-input,
-optgroup,
-select,
-textarea {
-  color: $base-color;
-}
-
-label {
-  vertical-align: middle;
-  cursor: pointer;
-}
-
-legend {
-  border: 0;
-  white-space: normal;
-}
-
-textarea {
-  min-height: 5em;
-  vertical-align: top;
-  font-family: inherit;
-  font-size: inherit;
-  resize: vertical;
-}
-
-select {
-  -webkit-appearance: menulist-button;
-}
-
-/* if select styling bugs on WebKit */
-/* select { -webkit-appearance: none; } */
-
-/* 'x' appears on right of search input when text is entered. This removes it */
-input[type="search"]::-webkit-search-decoration,
-input[type="search"]::-webkit-search-cancel-button,
-input[type="search"]::-webkit-search-results-button,
-input[type="search"]::-webkit-search-results-decoration {
-  display: none;
-}
-
-::-webkit-input-placeholder {
-  color: #777;
-}
-
-input:-moz-placeholder,
-textarea:-moz-placeholder {
-  color: #777;
-}
-
-.#{$kna-namespace}btn:focus,
-input[type="button"]:focus,
-button:focus {
-  -webkit-tap-highlight-color: transparent;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-}
-
-/* unstyled forms */
-
-button.#{$kna-namespace}unstyled,
-input[type="button"].#{$kna-namespace}unstyled,
-input[type="submit"].#{$kna-namespace}unstyled,
-input[type="reset"].#{$kna-namespace}unstyled {
-  padding: 0;
-  border: none;
-  line-height: 1;
-  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;
-  }
-}

sass/_object-tables.scss

@@ -1,28 +0,0 @@
-/* ----------------------------- */
-/* ==Tables                      */
-/* ----------------------------- */
-
-table,
-.#{$kna-namespace}table {
-  width: 100%;
-  max-width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-  vertical-align: top;
-}
-
-.#{$kna-namespace}table {
-  display: table;
-}
-
-#recaptcha_table,
-.#{$kna-namespace}table-auto {
-  table-layout:auto;
-}
-
-td,
-th {
-  vertical-align: top;
-  min-width: $medium-value;
-  cursor: default;
-}

sass/_override-helpers.scss

@@ -1,357 +0,0 @@
-/* ---------------------------------- */
-/* ==Helpers                          */
-/* ---------------------------------- */
-
-/* State Helpers */
-/* ------------- */
-
-/* invisible for all */
-.is-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,
-[disabled] {
-  opacity: 0.5;
-  pointer-events: none;
-  cursor: not-allowed;
-  filter: grayscale(1);
-}
-
-ul.is-unstyled,
-ul.unstyled {
-  list-style: none;
-  padding-left: 0;
-}
-
-/* Width Helpers */
-/* ------------- */
-
-/* blocks widths (percentage and pixels) */
-.#{$kna-namespace}w10 {
-  width: 10%;
-}
-
-.#{$kna-namespace}w20 {
-  width: 20%;
-}
-
-.#{$kna-namespace}w25 {
-  width: 25%;
-}
-
-.#{$kna-namespace}w30 {
-  width: 30%;
-}
-
-.#{$kna-namespace}w33 {
-  width: 33.3333%;
-}
-
-.#{$kna-namespace}w40 {
-  width: 40%;
-}
-
-.#{$kna-namespace}w50 {
-  width: 50%;
-}
-
-.#{$kna-namespace}w60 {
-  width: 60%;
-}
-
-.#{$kna-namespace}w66 {
-  width: 66.6666%;
-}
-
-.#{$kna-namespace}w70 {
-  width: 70%;
-}
-
-.#{$kna-namespace}w75 {
-  width: 75%;
-}
-
-.#{$kna-namespace}w80 {
-  width: 80%;
-}
-
-.#{$kna-namespace}w90 {
-  width: 90%;
-}
-
-.#{$kna-namespace}w100 {
-  width: 100%;
-}
-
-.#{$kna-namespace}w50p {
-  width: 50px;
-}
-
-.#{$kna-namespace}w100p {
-  width: 100px;
-}
-
-.#{$kna-namespace}w150p {
-  width: 150px;
-}
-
-.#{$kna-namespace}w200p {
-  width: 200px;
-}
-
-.#{$kna-namespace}w300p {
-  width: 300px;
-}
-
-@include media('>=400px') {
-  .#{$kna-namespace}w400p {
-    width: 400px;
-  }
-
-  .#{$kna-namespace}w500p {
-    width: 500px;
-  }
-
-  .#{$kna-namespace}w600p {
-    width: 600px;
-  }
-}
-
-@include media('>=700px') {
-
-  .#{$kna-namespace}w700p {
-    width: 700px;
-  }
-
-  .#{$kna-namespace}w800p {
-    width: 800px;
-  }
-}
-
-@include media('>=960px') {
-  .#{$kna-namespace}w960p {
-    width: 960px;
-  }
-
-  .#{$kna-namespace}mw960p {
-    max-width: 960px;
-  }
-
-  .#{$kna-namespace}w1140p {
-    width: 1140px;
-  }
-
-  .#{$kna-namespace}mw1140p {
-    max-width: 1140px;
-  }
-}
-
-.#{$kna-namespace}wauto {
-  width: auto;
-}
-
-/* Spacing Helpers */
-/* --------------- */
-
-.#{$kna-namespace}man,
-.#{$kna-namespace}ma0 {
-  margin: 0;
-}
-
-.#{$kna-namespace}pan,
-.#{$kna-namespace}pa0 {
-  padding: 0;
-}
-
-.#{$kna-namespace}mas {
-  margin: $small-value;
-}
-
-.#{$kna-namespace}mam {
-  margin: $medium-value;
-}
-
-.#{$kna-namespace}mal {
-  margin: $large-value;
-}
-
-.#{$kna-namespace}pas {
-  padding: $small-value;
-}
-
-.#{$kna-namespace}pam {
-  padding: $medium-value;
-}
-
-.#{$kna-namespace}pal {
-  padding: $large-value;
-}
-
-.#{$kna-namespace}mtn,
-.#{$kna-namespace}mt0 {
-  margin-top: 0;
-}
-
-.#{$kna-namespace}mts {
-  margin-top: $small-value;
-}
-
-.#{$kna-namespace}mtm {
-  margin-top: $medium-value;
-}
-
-.#{$kna-namespace}mtl {
-  margin-top: $large-value;
-}
-
-.#{$kna-namespace}mrn,
-.#{$kna-namespace}mr0 {
-  margin-right: 0;
-}
-
-.#{$kna-namespace}mrs {
-  margin-right: $small-value;
-}
-
-.#{$kna-namespace}mrm {
-  margin-right: $medium-value;
-}
-
-.#{$kna-namespace}mrl {
-  margin-right: $large-value;
-}
-
-.#{$kna-namespace}mbn,
-.#{$kna-namespace}mb0 {
-  margin-bottom: 0;
-}
-
-.#{$kna-namespace}mbs {
-  margin-bottom: $small-value;
-}
-
-.#{$kna-namespace}mbm {
-  margin-bottom: $medium-value;
-}
-
-.#{$kna-namespace}mbl {
-  margin-bottom: $large-value;
-}
-
-.#{$kna-namespace}mln,
-.#{$kna-namespace}ml0 {
-  margin-left: 0;
-}
-
-.#{$kna-namespace}mls {
-  margin-left: $small-value;
-}
-
-.#{$kna-namespace}mlm {
-  margin-left: $medium-value;
-}
-
-.#{$kna-namespace}mll {
-  margin-left: $large-value;
-}
-
-.#{$kna-namespace}mauto {
-  margin: auto;
-}
-
-.#{$kna-namespace}mtauto {
-  margin-top: auto;
-}
-
-.#{$kna-namespace}mrauto {
-  margin-right: auto;
-}
-
-.#{$kna-namespace}mbauto {
-  margin-bottom: auto;
-}
-
-.#{$kna-namespace}mlauto {
-  margin-left: auto;
-}
-
-.#{$kna-namespace}ptn,
-.#{$kna-namespace}pt0 {
-  padding-top: 0;
-}
-
-.#{$kna-namespace}pts {
-  padding-top: $small-value;
-}
-
-.#{$kna-namespace}ptm {
-  padding-top: $medium-value;
-}
-
-.#{$kna-namespace}ptl {
-  padding-top: $large-value;
-}
-
-.#{$kna-namespace}prn,
-.#{$kna-namespace}pr0 {
-  padding-right: 0;
-}
-
-.#{$kna-namespace}prs {
-  padding-right: $small-value;
-}
-
-.#{$kna-namespace}prm {
-  padding-right: $medium-value;
-}
-
-.#{$kna-namespace}prl {
-  padding-right: $large-value;
-}
-
-.#{$kna-namespace}pbn,
-.#{$kna-namespace}pb0 {
-  padding-bottom: 0;
-}
-
-.#{$kna-namespace}pbs {
-  padding-bottom: $small-value;
-}
-
-.#{$kna-namespace}pbm {
-  padding-bottom: $medium-value;
-}
-
-.#{$kna-namespace}pbl {
-  padding-bottom: $large-value;
-}
-
-.#{$kna-namespace}pln,
-.#{$kna-namespace}pl0 {
-  padding-left: 0;
-}
-
-.#{$kna-namespace}pls {
-  padding-left: $small-value;
-}
-
-.#{$kna-namespace}plm {
-  padding-left: $medium-value;
-}
-
-.#{$kna-namespace}pll {
-  padding-left: $large-value;
-}

sass/_override-responsive.scss

@@ -1,342 +0,0 @@
-/* -------------------------- */
-/* ==Responsive helpers       */
-/* -------------------------- */
-
-/* large screens */
-/* ------------- */
-
-@include media('>=large-screen') {
-
-  /* layouts for large screens */
-  .#{$kna-namespace}large-hidden {
-    display: none !important;
-  }
-
-  .#{$kna-namespace}large-visible {
-    display: block !important;
-  }
-
-  .#{$kna-namespace}large-no-float {
-    float: none;
-  }
-
-  .#{$kna-namespace}large-inbl {
-    display: inline-block;
-    float: none;
-    vertical-align: top;
-  }
-  .#{$kna-namespace}large-row {
-    display: table;
-    table-layout: fixed;
-    width: 100% !important;
-  }
-  .#{$kna-namespace}large-col {
-    display: table-cell;
-    vertical-align: top;
-  }
-
-  /* widths for large screens */
-  .#{$kna-namespace}large-w25 {
-    width: 25% !important;
-  }
-
-  .#{$kna-namespace}large-w33 {
-    width: 33.3333% !important;
-  }
-
-  .#{$kna-namespace}large-w50 {
-    width: 50% !important;
-  }
-
-  .#{$kna-namespace}large-w66 {
-    width: 66.6666% !important;
-  }
-
-  .#{$kna-namespace}large-w75 {
-    width: 75% !important;
-  }
-
-  .#{$kna-namespace}large-w100,
-  .#{$kna-namespace}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 */
-  .#{$kna-namespace}large-man,
-  .#{$kna-namespace}large-ma0 {
-    margin: 0 !important;
-  }
-}
-
-/* medium screens */
-/* -------------- */
-
-@include media('>=medium-screen', '<large-screen') {
-
-  /* layouts for medium screens */
-  .#{$kna-namespace}medium-hidden {
-    display: none !important;
-  }
-
-  .#{$kna-namespace}medium-visible {
-    display: block !important;
-  }
-
-  .#{$kna-namespace}medium-no-float {
-    float: none;
-  }
-
-  .#{$kna-namespace}medium-inbl {
-    display: inline-block;
-    float: none;
-    vertical-align: top;
-  }
-
-  .#{$kna-namespace}medium-row {
-    display: table;
-    table-layout: fixed;
-    width: 100% !important;
-  }
-
-  .#{$kna-namespace}medium-col {
-    display: table-cell;
-    vertical-align: top;
-  }
-
-  /* widths for medium screens */
-  .#{$kna-namespace}medium-w25 {
-    width: 25% !important;
-  }
-
-  .#{$kna-namespace}medium-w33 {
-    width: 33.3333% !important;
-  }
-
-  .#{$kna-namespace}medium-w50 {
-    width: 50% !important;
-  }
-
-  .#{$kna-namespace}medium-w66 {
-    width: 66.6666% !important;
-  }
-
-  .#{$kna-namespace}medium-w75 {
-    width: 75% !important;
-  }
-
-  .#{$kna-namespace}medium-w100,
-  .#{$kna-namespace}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 */
-  .#{$kna-namespace}medium-man,
-  .#{$kna-namespace}medium-ma0 {
-    margin: 0 !important;
-  }
-}
-
-/* small screens */
-/* ------------- */
-
-@include media('>=small-screen', '<medium-screen') {
-
-  /* layouts for small screens */
-  .#{$kna-namespace}small-hidden {
-    display: none !important;
-  }
-
-  .#{$kna-namespace}small-visible {
-    display: block !important;
-  }
-
-  .#{$kna-namespace}small-no-float {
-    float: none;
-  }
-
-  .#{$kna-namespace}small-inbl {
-    display: inline-block;
-    float: none;
-    vertical-align: top;
-  }
-
-  .#{$kna-namespace}small-row {
-    display: table !important;
-    table-layout: fixed !important;
-    width: 100% !important;
-  }
-
-  .#{$kna-namespace}small-col {
-    display: table-cell !important;
-    vertical-align: top !important;
-  }
-
-  /* widths for small screens */
-  .#{$kna-namespace}small-w25 {
-    width: 25% !important;
-  }
-
-  .#{$kna-namespace}small-w33 {
-    width: 33.3333% !important;
-  }
-
-  .#{$kna-namespace}small-w50 {
-    width: 50% !important;
-  }
-
-  .#{$kna-namespace}small-w66 {
-    width: 66.6666% !important;
-  }
-
-  .#{$kna-namespace}small-w75 {
-    width: 75% !important;
-  }
-
-  .#{$kna-namespace}small-w100,
-  .#{$kna-namespace}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 */
-  .#{$kna-namespace}small-man,
-  .#{$kna-namespace}small-ma0 {
-    margin: 0 !important;
-  }
-
-  .#{$kna-namespace}small-pan,
-  .#{$kna-namespace}small-pa0 {
-    padding: 0 !important;
-  }
-
-}
-
-/* tiny screens */
-/* ------------ */
-
-@include media('<small-screen') {
-
-  /* quick small resolution reset */
-  .#{$kna-namespace}mod,
-  .#{$kna-namespace}col,
-  fieldset {
-    display: block !important;
-    float: none !important;
-    clear: none !important;
-    width: auto !important;
-    margin-left: 0 !important;
-    margin-right: 0 !important;
-    border: 0;
-  }
-
-  .#{$kna-namespace}flex-container {
-    flex-direction: column;
-  }
-
-  .#{$kna-namespace}row {
-    display: block !important;
-    width: 100% !important;
-  }
-
-  /* layouts for tiny screens */
-  .#{$kna-namespace}tiny-hidden {
-    display: none !important;
-  }
-
-  .#{$kna-namespace}tiny-visible {
-    display: block !important;
-  }
-
-  .#{$kna-namespace}tiny-no-float {
-    float: none;
-  }
-
-  .#{$kna-namespace}tiny-inbl {
-    display: inline-block;
-    float: none;
-    vertical-align: top;
-  }
-
-  .#{$kna-namespace}tiny-row {
-    display: table !important;
-    table-layout: fixed !important;
-    width: 100% !important;
-  }
-
-  .#{$kna-namespace}tiny-col {
-    display: table-cell !important;
-    vertical-align: top !important;
-  }
-
-  th,
-  td {
-    display: block;
-    width: auto;
-    text-align: left;
-  }
-
-  thead {
-    display: none;
-  }
-
-  /* widths for tiny screens */
-  .#{$kna-namespace}tiny-w25 {
-    width: 25% !important;
-  }
-
-  .#{$kna-namespace}tiny-w33 {
-    width: 33.3333% !important;
-  }
-
-  .#{$kna-namespace}tiny-w50 {
-    width: 50% !important;
-  }
-
-  .#{$kna-namespace}tiny-w66 {
-    width: 66.6666% !important;
-  }
-
-  .#{$kna-namespace}tiny-w75 {
-    width: 75% !important;
-  }
-
-  .#{$kna-namespace}tiny-w100,
-  .#{$kna-namespace}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 */
-  .#{$kna-namespace}tiny-man,
-  .#{$kna-namespace}tiny-ma0 {
-    margin: 0 !important;
-  }
-
-  .#{$kna-namespace}tiny-pan,
-  .#{$kna-namespace}tiny-pa0 {
-    padding: 0 !important;
-  }
-
-}

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.";
+  }
+}

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;

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%;
+}

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;
+}

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;
+}

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;
+}

sass/base/_reset-print.scss

@@ -17,37 +17,38 @@
   }
 
   p,
-  .#{$kna-namespace}p-like,
+  .p-like,
   h1,
-  .#{$kna-namespace}h1-like,
+  .h1-like,
   h2,
-  .#{$kna-namespace}h2-like,
+  .h2-like,
   h3,
-  .#{$kna-namespace}h3-like,
+  .h3-like,
   h4,
-  .#{$kna-namespace}h4-like,
+  .h4-like,
   h5,
-  .#{$kna-namespace}h5-like,
+  .h5-like,
   h6,
-  .#{$kna-namespace}h6-like,
+  .h6-like,
   blockquote,
+  label,
   ul,
   ol {
     color: #000;
     margin: auto;
   }
 
-  .#{$kna-namespace}print {
+  .print {
     display: block;
   }
 
-  .#{$kna-namespace}no-print {
+  .no-print {
     display: none;
   }
 
   /* no orphans, no widows */
   p,
-  .#{$kna-namespace}p-like,
+  .p-like,
   blockquote {
     orphans: 3;
     widows: 3;
@@ -69,11 +70,11 @@
 
   /* no breaks after these elements */
   h1,
-  .#{$kna-namespace}h1-like,
+  .h1-like,
   h2,
-  .#{$kna-namespace}h2-like,
+  .h2-like,
   h3,
-  .#{$kna-namespace}h3-like,
+  .h3-like,
   caption {
     page-break-after: avoid;
   }

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);
+}

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;
+    }
+  }
+}

sass/components/_checkbox.scss

@@ -0,0 +1,58 @@
+/*
+ * 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
+ */
+
+.checkbox {
+  border-radius: $checkbox-border-radius;
+}
+
+.checkbox {
+  -webkit-appearance: none;
+  appearance: none;
+  width: $checkbox-size;
+  height: $checkbox-size;
+  vertical-align: text-bottom;
+  box-shadow: inset 0 0 0 1px $primary;
+  background-color: $checkbox-color;
+  transition: background-color 0.15s;
+  cursor: pointer;
+}
+
+.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;
+}

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»" "“" "”";
+  }
+}

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;
+}

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;
+}

sass/knacss.scss

@@ -1,60 +1,32 @@
 /*!
-* www.KNACSS.com V5.0.1 (24 mai 2016) @author: Alsacreations, Raphael Goetter
+* KNACSS Reborn: Just keep it simple!
+* @author: Alsacreations
+* v8.2 2022/01
 * Licence WTFPL http://www.wtfpl.net/
 */
 
-/* ----------------------------- */
+// IMPORTANT : Seuls les fichiers "Noyau" et "Utilitaires" sont importés par défaut. Ajoutez les fichiers de composants si nécessaires dans votre projet.
-/* ==Table Of Content            */
-/* ----------------------------- */
 
-/* 1- Normalize (basic reset) */
+// NOYAU
-/* 2- Base (basic styles) */
+@import "abstracts/variables-sass";
-/* 3- Print (print quick reset) */
+@import "abstracts/mixins-sass";
-/* 4- Stylings (minor stylings) */
-/* 5- Misc (skip links, hyphens) */
-/* (6- WordPress reset (disabled by default)) */
-/* 7- Global Layout (alignment, modules, positionning) */
-/* 8- Grid Layout (grillade) */
-/* 9- Tables (data tables consistency) */
-/* 10- Forms (forms consistency) */
-/* 11- Helpers (width and spacers helpers) */
-/* 12- Responsive (Responsive Web Design helpers) */
 
-/* ---------------------------------- */
+@import "base/reset-base";
-/* ==Normalize (basic reset)          */
+@import "base/reset-accessibility";
-/* ---------------------------------- */
+@import "base/reset-forms";
+@import "base/reset-print";
+@import "base/layout";
 
-@import "_normalize/_normalize.scss"; // normalize (basic reset)
+// UTILITAIRES
-@import "_include-media/_include-media.scss"; // include-media
+@import "utils/utils-global";
+@import "utils/utils-font-sizes";
+@import "utils/utils-spacers";
+@import "utils/grillade";
 
-// WARNING : you should comment the following @import (config)
+// COMPOSANTS (à ajouter au besoin)
-// and move config file from knacss folder to your own project folder!
+// @import "components/button";
-@import "_config-variables.scss";
+// @import "components/burger";
-
+// @import "components/checkbox";
-// Libraries
+// @import "components/radio";
-@import "_library-base.scss"; // basic styles
+// @import "components/select";
-@import "_library-print.scss"; // print quick reset
+// @import "components/quote";
-@import "_library-styling.scss"; // minor stylings
-@import "_library-misc.scss"; // skip links, hyphens
-// @import "_library-wordpress.scss"; // WordPress reset and basic styles
-
-// Layout
-@import "_layout-general.scss"; // alignment, modules, positionning
-@import "_layout-grids.scss"; // grids
-
-// Objects
-@import "_object-tables.scss"; // data tables consistency
-@import "_object-forms.scss"; // forms consistency
-
-// Overrides
-@import "_override-helpers.scss"; // width and spacers helpers
-@import "_override-responsive.scss"; // Responsive Web Design helpers
-
-
-/* ----------------------------- */
-/* ==Own stylesheet              */
-/* ----------------------------- */
-
-/* Here should go your own CSS styles */
-// You can also link them with a Sass @import
-// @import "my-styles";

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;
+      }
+    }
+  }
+}

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;
+    }
+  }
+}

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;
+      }
+    }
+  }
+
+}

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};
+      }
+    }
+  }
+}