Update README.md

supprime une dépendance inutilisée

.browserslistrc

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

.editorconfig

@@ -0,0 +1,7 @@
+root = true
+
+[*]
+end_of_line = lf
+indent_style = space
+indent_size = 2
+charset = utf-8

.gitignore

@@ -93,6 +93,7 @@ DocProject/Help/*.hhp
 DocProject/Help/Html2
 DocProject/Help/html
 
+
 # Click-Once directory
 publish
 
@@ -162,3 +163,16 @@ pip-log.txt
 # Mac crap
 .DS_Store
 /README 1.md
+*.cfg
+
+# parce qu'on s'en fout
+*.log
+
+# parce que trop lourd, ...
+node_modules/
+package-lock.json
+yarn.lock
+
+# parce que certaines personnes utilisent de vrais IDEs
+.idea
+*.iml

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,37 +1,14 @@
-KNACSS
+# KNACSS
-======
-http://www.knacss.com
 
-KNACSS is a minimalist, responsive and extensible style sheet to kick-start your HTML / CSS projects. 
+**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.**
 
-Designed by [Alsacreations agency](http://alsacreations.fr) and used on a daily basis in production, KNACSS is not only a lightweight documented framework but also a CSS reset, adapted to every project no matter its size.
+## Documentation version v8 (v8 = Reborn)
 
-It handles basic elements, box sizing, margins, floats, simple and complex aligns, positioning, layout grids, gutters, old IE fallbacks and last but not least responsiveness, everything automagically!
+- Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
+- [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
 
-Installation
+## Documentation anciennes versions (v7)
------------
-There is nothing to install. It is only a CSS file you can call as usual in the head of your document with a link element:
 
-    <link rel="stylesheet" href="knacss.css" media="all">
+- [**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)
 
-You can also install KNACSS with [Bower](http://bower.io/) : ```bower install knacss```
-
-&hellip; Or you can also choose the KNACSS Builder : http://knacss.com/builder/
-
-
-Usage
------
-KNACSS is a collection of ready to use styles and snippets to kick-start your project. Feel free to use it as a “reset”, then make it grow to suit your needs.
-Take the time to read the documentation before jumping in. Indeed, KNACSS doesn’t always suit beginners’ needs since a little thing can have big consequences.
-
-## Vendor Prefixes 
-
-If you use one of the pre-processed version of KNACSS (LESS / Sass), beware that all the properties are declared **without vendor prefixes** (-webkit-,-moz-,-ms-,…), to gain clarity, and length of initial code.
-
-You will certainly need to add these vendor prefixes yourself (this is usually done automatically today with Autoprefixer, [Mixture](http://mixture.io), [Prepros](http://alphapixels.com/prepros/), [Grunt](http://gruntjs.com), etc.).
-
-Useful links
-------------
-* Website and download : http://knacss.com
-* Documentation : http://knacss.com/doc.html
-* Commented code : http://knacss.com/knacss.html

bower.json

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

@@ -0,0 +1,357 @@
+# 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)
+
+- 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>
+- 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
+- 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`
+- renommage des éléments de grilles : `.flex-item-double` --> `.grid-item-double` (plus cohérent)
+- ajout des éléments de layout : `.grid-item-first`, `.grid-item-medium` et `.grid-item-last`
+- ajout de Table des Matières dans la feuille de style non minifiée
+- adaptation des fichiers gulpfile, package.json et bower.json
+- mise à jour de la documentation
+
+## Changelog v4.4.5 (1er avril 2016)
+
+- 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)
+
+- 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)
+
+- ajout du patch `min-width: 0` sur les flex-items de grilles
+
+## 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
+
+## 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
+- la taille de police de base est à présent de "1.4rem" et non un calcul en `em` à partir d'une valeur en pixels
+- suppression de `@font-stack-universal` devenue inutile (servait dans les grilles inline-block)
+- suppression de "helvetica, arial" dans les font-stacks par défaut (seul reste "sans-serif")
+- ajout d'une classe `.bfc` (actuellement alias de l'existante `.mod`)
+- 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)
+
+- 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)
+
+- 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)
+
+- ajout des classes `.pull` et `.push` pour les offsets des grilles
+- corrections de la doc Print et Commencer
+- corrections de nommages reliquats : `.flexitem-double` -> `.flex-item-double`
+- suppression des styles graphiques pour tableaux alternate et striped
+- modifications sur la classe `.visually-hidden`
+
+## 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)
+
+- 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)
+
+- 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)
+
+- 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)
+
+- Ajout de !default aux variables SASS dans le fichier `_00-config.scss`
+- Flex-container enhancement
+- select element enhancement on webkit
+- correction largeurs des grilles pour IE
+- correction de divers doublons
+
+## 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)
+
+- 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)
+
+- 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)
+
+- 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)
+
+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).
+
+Anciens noms :
+
+```
+.flexbox, .flexbox-h
+.flexbox-v
+.flexitem-fluid
+.flexitem-center
+.flexitem-first, .flexitem-medium, .flexitem-last
+```
+
+Nouveaux noms :
+
+```
+.flex-container, .flex-container-h
+.flex-container-v
+.flex-item-fluid
+.flex-item-center
+.flex-item-first, .flex-item-medium, .flex-item-last
+```
+
+## Changelog v4.1.1 (30 mars 2015)
+
+## Vite fait
+
+- grosse remise à jour, orientée vers les technos modernes (flexbox, rem, calc, ...) et moins de "bidouille"
+- fin du support d'IE6-IE8 Si vous souhaitez utiliser KNACSS sur d'anciens navigateurs, préférez la [Version 3](https://github.com/raphaelgoetter/KNACSS/tree/3.1.0)
+- ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
+- un grand merci à @7studio pour ses conseils et observations sur la version beta de KNACSS 4.0
+- attention : rétrocompatibilité non préservée pour certaines classes ( .left, .start, .txtleft, .fl, .table-, .flex-start, .flex-end)
+- attention : rétrocompatibilité non préservée pour les grilles de mise en page (passage à flexbox et simplification de la structure)
+
+## Done
+
+- documentation en français
+- PDF pense-bête mis à jour : <http://knacss.com/KNACSS-cheatsheet.pdf>
+- gros ménage de printemps (gros nettoyage de tous les espaces et tabulations disgrâcieux)
+- dans la section "quick print reset", ajout des classes .p-like, h1-like, h2-like etc.
+- mise en commun globale de tous les styles p avec .p-like (h1 et h1-like, etc.).
+- déplacement et commentaire sur la règle body > script
+- correction du bug des height: auto sur les images au format SVG
+- meilleure intégration de box-sizing
+- suppression du fichier dédié aux réglages des bugs des anciennes versions d'IE6-IE8
+- fin du support d'IE9 pour les grilles : KNACSS v4 compatible IE10+ pour ce qui concerne les mises en page en grilles (flexbox FTW!)
+- réorganisation des fichiers (le fichier dédié "IE.css" disparait, le fichier "booleans" devient "misc" (plus cohérent), le fichier "gmaps" est désormais inclus dans "misc")
+- ajout des préfixes ".table-" devant les styles de décoration des tableaux
+- suppression du fichier icons.css, statistiquement inutile en pratique
+- meilleure cohérence de nommage entre .left, .start, .txtleft, .fl
+- ajout d'un fichier de reset dédié à WordPress
+- refonte intégrale des grilles en Flexbox (et en plus ça marche sur IE10 !)
+- ajout d'un fichier .editorconfig (<http://editorconfig.org/>)
+- passage des :before/:after en ::before/::after
+- ajout de sourcemaps CSS
+- suppression des images noir et blanc forcées en media print
+- correction de la formule LESS `{calc(1em * .625);`
+- ajout du reset [normalize.css](http://necolas.github.io/normalize.css/)
+- mise à jour du générateur de gabarits [Schnaps.it](http://schnaps.it/)

gulpfile.js

@@ -0,0 +1,55 @@
+const gulp = require('gulp');
+var sass = require('gulp-sass');
+var postcss = require('gulp-postcss');
+var CombineMQ = require('postcss-combine-media-query');
+var autoprefixer = require('autoprefixer');
+var CSSnano = require('cssnano');
+
+gulp.task('css:full', () => {
+  return gulp.src('sass/knacss.scss')
+    .pipe(sass(
+      {
+      outputStyle: 'expanded'
+      }))
+    .pipe(
+      postcss([
+        autoprefixer, // ajoute les préfixes vendeurs
+      ]))
+    .pipe(gulp.dest('css/knacss-full'));
+});
+
+gulp.task('css:mini', () => {
+  return gulp.src('sass/knacss.scss')
+    .pipe(sass(
+      {
+      outputStyle: 'compact'
+      }))
+    .pipe(
+      postcss([
+        CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
+        autoprefixer, // ajoute les préfixes vendeurs
+        CSSnano // minification 
+      ]))
+    .pipe(gulp.dest('css/knacss-mini'));
+});
+
+gulp.task('css:grillade', () => {
+  return gulp.src('sass/utils/grillade.scss')
+    .pipe(sass(
+      {
+      outputStyle: 'compact'
+      }))
+    .pipe(
+      postcss([
+        CombineMQ, // rassemble les Media Queries (parfait pour les classes utilitaires)
+        autoprefixer, // ajoute les préfixes vendeurs
+        CSSnano // minification 
+      ]))
+    .pipe(gulp.dest('css/grillade'));
+});
+
+// Tâche BUILD : tapez "gulp" ou "gulp build"
+gulp.task('build', gulp.series('css:full', 'css:mini', 'css:grillade'));
+
+// Tâche par défaut
+gulp.task('default', gulp.series('build'));

less/_00-config.less

@@ -1,65 +0,0 @@
-// Config file : variables, mixins, ...
-
-// font sizes
-@base-font-size	: 14px; // if "14px" then 1em = 14px
-@line-height	: 1.5; // equiv line-height 1.5
-@h1-size		: 3.2rem; // equiv "32px"
-@h2-size		: 2.8rem; // equiv "28px"
-@h3-size		: 2.4rem; // equiv "24px"
-@h4-size		: 2.0rem; // equiv "20px"
-@h5-size		: 1.8rem; // equiv "18px"
-@h6-size		: 1.6rem; // equiv "16px"
-
-// font stacks
-@font-stack-common		: Helvetica, Arial, sans-serif; // common font
-@font-stack-headings	: Helvetica, Arial, sans-serif; // headings font
-@font-stack-monospace	: Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
-@font-stack-universal	: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
-
-// font colors
-@base-color					: #000; // text color on body and content
-@primary-color				: #000; // text color on primary elements
-@secondary-color			: #000; // text color on secondary elements
-@headings-color				: #000; // text color on headings
-@base-color-link			: #333; // base links color
-@base-color-link-hover		: #000; // base hovered/focused links color
-
-// backgrounds
-@base-background		: #fff; // body background color
-@primary-background		: #fff; // primary elements background color
-@secondary-background	: #fff; // secondary elements background color
-
-// spacings (choose unit you prefer)
-@tiny-value				: 5px; // tiny value for margins / paddings
-@small-value			: 10px; // small value for margins / paddings
-@medium-value			: 20px; // medium value for margins / paddings
-@large-value			: 40px; // large value for margins / paddings
-@extra-large-value		: 80px; // extra large value for margins / paddings
-@ultra-large-value		: 160px; // ultra large value for margins / paddings
-
-// breakpoints (choose unit you prefer)
-@tiny-screen			: 480px; // tiny screens media query (less than 480px)
-@small-screen			: 768px; // screens between 481px and 768px
-@medium-screen			: 1024px; // screens between 769px and 1024px
-@large-screen			: 1280px; // screens between 1025px and 1280px
-@extra-large-screen		: 1600px; // screens between 1281px and 1600px
-@ultra-large-screen		: 1920px; // ultra large screens
-
-// misc (choose unit you prefer)
-@gutter		: 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
-
-// LESS mixins : don't touch or you'll be banned ;)
-// px to em/rem 
-.rem(@size, @bf: @base-font-size){
-	@rem: @size / 10;
-	font-size: unit(round(@base-font-size * @size /10), px);
-	font-size: unit(@rem, rem);
-}
-.em(@size, @bf: @base-font-size){
-	@em: @size / @bf;
-	font-size: unit(round(@em,2), em);
-}
-.px(@size, @bf: @base-font-size){
-	@px: @size * @bf;
-	font-size: unit(round(@px,2), px);
-}

less/_01-base.less

@@ -1,370 +0,0 @@
-/*!
-* www.KNACSS.com V3.1.0 (2014-10-20) @author: Raphael Goetter, Alsacreations
-* Licence WTFPL http://www.wtfpl.net/
-*/
-
-/* ----------------------------- */
-/* == soft reset                 */
-/* ----------------------------- */
-
-/* switching box model for all elements */
-* {
-	box-sizing: border-box;
-}
-
-/* soft reset */
-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-
-ul,
-ol {
-	padding-left: 2em;
-}
-
-ul.unstyled {
-	list-style: none;
-}
-
-img {
-	height: auto;
-	vertical-align: middle;
-	border: 0;
-}
-
-blockquote,
-figure {
-	margin-left: 0;
-	margin-right: 0;
-}
-
-audio,
-canvas,
-video {
-	display: inline-block;
-}
-
-svg:not(:root) {
-	overflow: hidden;
-}
-
-/* ----------------------------- */
-/* == typography                 */
-/* ----------------------------- */
-
-
-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);
-	
-	/* disallow text zooming on orientation change (non standard property) */
-	-webkit-text-size-adjust: 100%;
-	    -ms-text-size-adjust: 100%;
-}
-
-body {
-	
-	/* set body font-size in em (1.4em equiv "14px") */
-	font-size: unit((@base-font-size / 10), em);
-	
-	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,
-.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,
-.h1-like {
-	font-size: @h1-size;
-	font-family: @font-stack-headings;
-}
-
-h2,
-.h2-like {
-	font-size: @h2-size;
-	font-family: @font-stack-headings;
-}
-
-h3,
-.h3-like {
-	font-size: @h3-size;
-}
-
-h4,
-.h4-like {
-	font-size: @h4-size;
-}
-
-h5,
-.h5-like {
-	font-size: @h5-size;
-}
-
-h6,
-.h6-like {
-	font-size: @h6-size;
-}
-
-/* alternate font-sizing */
-.smaller {
-	.em(@base-font-size - 4);
-}
-
-.small {
-	.em(@base-font-size - 2);
-}
-
-.big {
-	.em(@base-font-size + 2);
-}
-
-.bigger {
-	.em(@base-font-size + 4);
-}
-
-.biggest {
-	.em(@base-font-size + 6);
-}
-
-code, 
-pre,
-samp,
-kbd {
-	/* IE fix */
-	white-space: pre-line; 
-	white-space: pre-wrap;
-	font-family: @font-stack-monospace;
-	line-height: normal;
-}
-
-em,
-.italic,
-address,
-cite,
-dfn,
-i,
-var {
-	font-style: italic;
-}
-
-strong,
-.bold {
-	font-weight: bold;
-}
-
-small,
-sub,
-sup {
-	font-size: smaller;
-}
-
-/* ----------------------------- */
-/* == hiding content             */
-/* ----------------------------- */
-
-/* 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(1px, 1px, 1px, 1px) !important;
-}
-
-body > script {
-	display: none !important;
-}
-
-@media (max-width: @small-screen) {
-	.no-small-screen {
-		display: none;
-	}
-}
-
-@media (min-width: @large-screen) {
-	.no-large-screen {
-		display: none;
-	}
-}
-
-/* ----------------------------- */
-/* == browsers consistency       */
-/* ----------------------------- */
-
-/* avoid top margins on first content element */
-p,
-.p-like, 
-ul, 
-ol, 
-dl,
-blockquote, 
-pre,
-h1, 
-h2, 
-h3, 
-h4, 
-h5, 
-h6 {
-	&:first-child {
-		margin-top: 0;
-	}
-}
-
-/* avoid margins on nested elements */
-li p,
-li .p-like,
-li ul,
-li ol {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-/* max values */
-img, 
-table, 
-td, 
-blockquote, 
-code, 
-pre, 
-textarea, 
-input, 
-video {
-	max-width: 100%;
-}
-
-/* margin-bottom on tables */
-table {
-	margin-bottom: @medium-value;
-}
-
-/* ----------------------------- */
-/* ==layout and modules          */
-/* ----------------------------- */
-
-/* float layout */
-/* module, gains superpower "BFC" Block Formating Context */
-.mod { 
-	overflow: hidden;
-}
-
-/* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
-	clear: both;
-}
-
-/* blocks that must contain floats */
-.clearfix,
-.line {
-	&:after {
-		content: "";
-		display: table;
-		clear: both;
-		border-collapse: collapse;
-	}
-}
-
-/* table layout */
-.row {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-}
-
-.row > *,
-.col {
-	display: table-cell;
-	vertical-align: top;
-}
-
-/* inline-block */
-.inbl {
-	display: inline-block;
-	vertical-align: top;
-}
-
-/* alignments (blocks and inline) */
-/* ------------------------------ */
-
-/* left (or starting) elements */
-.left,
-.start {
-	float: left;
-}
-
-img.left,
-img.start  {
-	margin-right: @small-value;
-}
-
-/* right (or ending) elements */
-.right,
-.end {
-	float: right;
-}
-
-img.right,
-img.end {
-	margin-left: @small-value;
-}
-
-img.left, 
-img.right,
-img.start, 
-img.end {
-	margin-bottom: @tiny-value;
-}
-
-.center    {
-	margin-left: auto; 
-	margin-right: auto;
-}
-
-.txtleft   {
-	text-align: left;
-}
-
-.txtright  {
-	text-align: right;
-}
-
-.txtcenter {
-	text-align: center;
-}

less/_02-helpers.less

@@ -1,287 +0,0 @@
-/* ---------------------------------- */
-/* ==visual helpers                   */
-/* .. use them with parcimony !       */
-/* ---------------------------------- */
-
-/* blocks widths (percentage and pixels) */
-.w10 {
-	width: 10%;
-}
-
-.w20 {
-	width: 20%;
-}
-
-.w25 { 
-	width: 25%; 
-}
-
-.w30 { 
-	width: 30%; 
-}
-
-.w33 { 
-	width: 33.3333%; 
-}
-
-.w40 { 
-	width: 40%; 
-}
-
-.w50 { 
-	width: 50%; 
-}
-
-.w60 { 
-	width: 60%; 
-}
-
-.w66 { 
-	width: 66.6666%; 
-}
-
-.w70 { 
-	width: 70%; 
-}
-
-.w75 { 
-	width: 75%; 
-}
-
-.w80 { 
-	width: 80%; 
-}
-
-.w90 { 
-	width: 90%; 
-}
-
-.w100   { 
-	width: 100%; 
-}
-
-
-.w50p   { 
-	width: 50px; 
-}
-
-.w100p  { 
-	width: 100px; 
-}
-
-.w150p  { 
-	width: 150px; 
-}
-
-.w200p  { 
-	width: 200px; 
-}
-
-.w300p  { 
-	width: 300px; 
-}
-
-.w400p  { 
-	width: 400px; 
-}
-
-.w500p  { 
-	width: 500px; 
-}
-
-.w600p  { 
-	width: 600px; 
-}
-
-.w700p  { 
-	width: 700px; 
-}
-
-.w800p  { 
-	width: 800px; 
-}
-
-.w960p  { 
-	width: 960px; 
-}
-
-.mw960p { 
-	max-width: 960px; 
-}
-
-.w1140p  { 
-	width: 1140px; 
-}
-
-.mw1140p { 
-	max-width: 1140px; 
-}
-
-.wauto  { 
-	width: auto; 
-}
-
-/* spacing helpers
-p,m = padding,margin
-a,t,r,b,l = all,top,right,bottom,left
-s,m,l,n = small, medium, large, none
-*/
-.man { 
-	margin: 0; 
-}
-
-.pan { 
-	padding: 0; 
-}
-
-.mas { 
-	margin: @small-value; 
-}
-
-.mam { 
-	margin: @medium-value; 
-}
-
-.mal { 
-	margin: @large-value; 
-}
-
-.pas { 
-	padding: @small-value; 
-}
-
-.pam { 
-	padding: @medium-value; 
-}
-
-.pal { 
-	padding: @large-value; 
-}
-
-.mtn { 
-	margin-top: 0; 
-}
-
-.mts { 
-	margin-top: @small-value; 
-}
-
-.mtm { 
-	margin-top: @medium-value; 
-}
-
-.mtl { 
-	margin-top: @large-value; 
-}
-
-.mrn { 
-	margin-right: 0; 
-}
-
-.mrs { 
-	margin-right: @small-value; 
-}
-
-.mrm { 
-	margin-right: @medium-value; 
-}
-
-.mrl { 
-	margin-right: @large-value; 
-}
-
-.mbn { 
-	margin-bottom: 0; 
-}
-
-.mbs { 
-	margin-bottom: @small-value; 
-}
-
-.mbm { 
-	margin-bottom: @medium-value; 
-}
-
-.mbl { 
-	margin-bottom: @large-value; 
-}
-
-.mln { 
-	margin-left: 0; 
-}
-
-.mls { 
-	margin-left: @small-value; 
-}
-
-.mlm { 
-	margin-left: @medium-value; 
-}
-
-.mll { 
-	margin-left: @large-value; 
-}
-
-.ptn { 
-	padding-top: 0; 
-}
-
-.pts { 
-	padding-top: @small-value; 
-}
-
-.ptm { 
-	padding-top: @medium-value; 
-}
-
-.ptl { 
-	padding-top: @large-value; 
-}
-
-.prn { 
-	padding-right: 0; 
-}
-
-.prs { 
-	padding-right: @small-value; 
-}
-
-.prm { 
-	padding-right: @medium-value; 
-}
-
-.prl { 
-	padding-right: @large-value; 
-}
-
-.pbn { 
-	padding-bottom: 0; 
-}
-
-.pbs { 
-	padding-bottom: @small-value; 
-}
-
-.pbm { 
-	padding-bottom: @medium-value; 
-}
-
-.pbl { 
-	padding-bottom: @large-value; 
-}
-
-.pln { 
-	padding-left: 0; 
-}
-
-.pls { 
-	padding-left: @small-value; 
-}
-
-.plm { 
-	padding-left: @medium-value; 
-}
-
-.pll { 
-	padding-left: @large-value; 
-}

less/_03-grids.less

@@ -1,175 +0,0 @@
-/* ---------------------------------- */
-/* ==classic grids                    */
-/* .. use it when gutter size matters */
-/* ---------------------------------- */
-
-/* grids inspired from SUIT https://github.com/suitcss/suit */
-
-/* overall container of grids */
-.grid { 
-	overflow: hidden;
-}
-
-/* global styles for direct child ex. .grid3 */
-.grid > * { 
-	display: block;
-	padding: 0;
-	/* gutter value */
-	margin-left: -@gutter;
-	text-align: left;
-}
-
-/* global styles for each "cell" */
-.grid > * > * { 
-	display: inline-block;
-	/* gutter value */
-	padding-left: @gutter;
-	margin-left: 0;
-	vertical-align: top;
-}
-
-/* whitespace fixing for modern browsers including IE9+ */
-:root .grid {
-	font-size: 0;
-	/* fallback for IE9+ */
-	text-justify: distribute-all-lines;
-}
-
-:root .grid > * > * {
-	/* fallback for Opera Mini */
-	font-size: @base-font-size;
-	font-size: unit((@base-font-size / 10), rem);
-}
-
-/* Opera hack */
-.opera:-o-prefocus,
-.grid > * {
-	word-spacing: -0.43em;
-}
-
-.grid2 > * {
-	width: 50%;
-}
-
-.grid3 > * {
-	width: 33.333%;
-}
-
-.grid4 > * {
-	width: 25%;
-}
-
-.grid5 > * {
-	width: 20%;
-}
-
-.grid6 > * {
-	width: 16.667%;
-}
-
-.grid8 > * {
-	width: 12.5%;
-}
-
-.grid10 > * {
-	width: 10%;
-}
-
-.grid12 > * {
-	width: 8.333%;
-}
-
-/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * { 
-	width: 66.666%; 
-}
-
-.grid1-2 > *:first-child,
-.grid2-1 > * + * { 
-	width: 33.333%; 
-}
-
-.grid1-3 > *:first-child,
-.grid3-1 > * + * { 
-	width: 25%; 
-}
-
-.grid3-1 > *:first-child,
-.grid1-3 > * + * { 
-	width: 75%; 
-}
-
-/* ---------------------------------- */
-/* ==autogrids                        */
-/* .. to automatically justify blocs  */
-/* ---------------------------------- */
-
-/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
-
-/* container of autogrids */
-[class*="autogrid"] { 
-	text-align: justify;
-}
-
-[class*="autogrid"]:after {
-	content: "";
-	display: inline-block;
-	width: 100%; 
-}
-
-[class*="autogrid"] > * {
-	display: inline-block;
-	vertical-align: top;
-	text-align: left;
-}
-
-/* whitespace fixing for modern browsers including IE9+ */
-:root [class*="autogrid"] {
-	font-size: 0;
-	/* fallback for IE9+ */
-	text-justify: distribute-all-lines;
-}
-
-:root [class*="autogrid"] > * {
-	/* fallback for Opera Mini */
-	font-size: @base-font-size;
-	font-size: unit((@base-font-size / 10), rem);
-}
-
-/* Opera hack */
-[class*="autogrid"]:-o-prefocus {
-	word-spacing: -0.43em;
-}
-
-.autogrid2 > * {
-	width: 49%;
-}
-
-.autogrid3 > * {
-	width: 32%;
-}
-
-.autogrid4 > * {
-	width: 23.6%;
-}
-
-.autogrid5 > * {
-	width: 19%;
-}
-
-.autogrid6 > * {
-	width: 15%;
-}
-
-.autogrid8 > * {
-	width: 10.8%;
-}
-
-.autogrid10 > * {
-	width: 9%;
-}
-
-.autogrid12 > * {
-	width: 6.4%;
-}

less/_04-tables.less

@@ -1,38 +0,0 @@
-/* ----------------------------- */
-/* ==tables                      */
-/* ----------------------------- */
-
-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: @small-value;
-	color: #555;
-	font-style: italic;	
-}
-
-td,
-th {
-	padding: 0.3em 0.8em;
-	border: 1px #aaa dotted;
-	vertical-align: top;
-	min-width: @medium-value;
-	cursor: default;
-	text-align: left;
-}

less/_05-forms.less

@@ -1,89 +0,0 @@
-/* ----------------------------- */
-/* ==forms                       */
-/* ----------------------------- */
-
-/* thanks to HTML5boilerplate,
-* github.com/nathansmith/formalize and www.sitepen.com
-*/
-
-/* buttons */
-.btn {
-	display: inline-block;
-}
-
-/* forms items */
-form,
-fieldset {
-	border: none;
-}
-
-input,
-button,
-select,
-label,
-.btn {
-	vertical-align: middle;
-	font-family: inherit;
-	font-size: inherit;
-}
-
-label { 
-	display: inline-block;
-	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;
-}
-
-/* clickable input types in iOS */
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-	cursor: pointer;
-	-webkit-appearance: button; 
-}
-
-input[type="search"] {
-	-webkit-appearance: textfield;
-}
-
-/* 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;
-}
-
-/* Removes inner padding and border in FF3+ */
-button::-moz-focus-inner,
-input[type='button']::-moz-focus-inner,
-input[type='reset']::-moz-focus-inner,
-input[type='submit']::-moz-focus-inner {
-	border: 0;
-	padding: 0;
-}

less/_06-icons.less

@@ -1,160 +0,0 @@
-/* ----------------------------- */
-/* ==icons and bullets	         */
-/* ----------------------------- */
-
-.icon {display: inline-block;}
-
-.icon:before,
-.icon.after:after {
-	content: "";
-	display: inline-block;
-	vertical-align: middle;
-	position: relative; top: -0.1em;
-	margin: 0 0.3em 0 0;
-	font: 1.4em/1 sans-serif;
-	color: #000;
-	text-shadow: 1px 1px 0 rgba(0,0,0,.1);
-	speak: none;
-}
-
-@media (min-device-width: @small-screen) {
-	.icon:before,
-	.icon.after:after {
-		font: 1em/0.6 sans-serif;
-		-webkit-transform: rotateZ(0.05deg);
-	}
-}
-
-.icon.after:after {
-	margin: 0 0 0 8px;
-}
-
-.icon.after:before {
-	content: "" !important;
-}
-
-.icon-rate:before,
-.icon-rate.after:after {
-	content: "\2605";
-}
-
-.icon-unrate:before,
-.icon-unrate.after:after{
-	content: "\2606";
-}
-
-.icon-check:before,
-.icon-check.after:after{
-	content: "\2713";
-}
-
-.icon-uncheck:before,
-.icon-uncheck.after:after{
-	content: "\2717";
-}
-
-.icon-cloud:before,
-.icon-cloud.after:after {
-	content: "\2601";
-}
-
-.icon-dl:before,
-.icon-dl.after:after {
-	content: "\21E3";
-	font-weight: bold;
-}
-
-.icon-cross:before,
-.icon-cross.after:after {
-	content: "\2716";
-	font-weight: bold;
-}
-
-.icon-arrow1:before, 
-.icon-arrow1.after:after {
-	content: "\2192";
-	position: relative; 
-		top: -0.15em;
-}
-
-.icon-arrow2:before,
-.icon-arrow2.after:after {
-	content: "\279E";
-}
-
-.icon-arrow3:before,
-.icon-arrow3.after:after {
-	content: "\279A";
-}
-
-.icon-bracket1:before,
-.icon-bracket1.after:after {
-	content: "\2039";
-	font-weight: bold;
-	font-size: 1.6em;
-	position: relative; 
-		top: -0.15em;
-}
-
-.icon-bracket2:before,
-.icon-bracket2.after:after {
-	content: "\203A";
-	font-weight: bold;
-	font-size: 1.6em;
-	position: relative; 
-		top: -0.15em;
-}
-
-.icon-up:before,
-.icon-up.after:after {
-	content: "\25B2";
-}
-
-.icon-down:before,
-.icon-down.after:after {
-	content: "\25BC";
-}
-
-.icon-bull:before,
-.icon-bull.after:after {
-	content: "\2022";
-	font-size: 1.2em;
-	top: -0.05em;
-}
-
-.icon-bull2:before,
-.icon-bull2.after:after {
-	content: "\25E6";
-	top: -0.05em;
-}
-
-.icon-bull3:before,
-.icon-bull3.after:after{
-	content: "\2023";
-	font-size: 1.6em;
-	top: -0.05em;
-}
-
-.icon-nav:before,
-.icon-nav.after:after {
-	content: "\2261";
-	font-weight: bold;
-}
-
-.icon-losange:before,
-.icon-losange.after:after {
-	content: "\25C6";
-}
-
-.icon-asteri:before,
-.icon-asteri.after:after {
-	content: "\2731";
-	font-weight: bold;
-}
-
-.icon-mail:before,
-.icon-mail.after:after {
-	content: "\2709";
-	font-size: 1.6em;
-	top: -.05em;
-}

less/_07-flexbox.less

@@ -1,29 +0,0 @@
-/* flexbox layout 
-Tutorial: http://knacss.com/demos/tutoriel.html#flex */
-.flex {
-	display : flex;
-}
-
-.flex-h {
-	flex-direction: row;
-}
-
-.flex-v {
-	flex-direction: column;
-}
-
-.flex-fluid {
-	flex: 1;
-}
-
-.flex-start {
-	order : -1;
-}
-
-.flex-mid {
-	order : 1;
-}
-
-.flex-end {
-	order : 42;
-}

less/_08-rwd.less

@@ -1,404 +0,0 @@
-/* ----------------------------- */
-/* ==desktop and HD devices      */
-/* ----------------------------- */
-
-@media (min-width: (@medium-screen + 1)) {
-	/* rules for big resources and big screens like: background-images, font-faces, etc. */
-}
-
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
-	/* style adjustments for high density devices */
-}
-
-/* ---------------------------------- */
-/* ==Responsive large                 */
-/* ---------------------------------- */
-
-@media (min-width: (@medium-screen + 1)) {
-
-	/* layouts for large screens */
-	.large-hidden { 
-		display: none !important; 
-	}
-	
-	.large-visible { 
-		display: block !important; 
-	}
-	
-	.large-no-float {
-		float: none; 
-	}
-	
-	.large-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.large-row {
-		display: table;
-		table-layout: fixed;
-		width: 100% !important;
-	}
-	.large-col {
-		display: table-cell;
-		vertical-align: top;
-	}
-
-	/* widths for large screens */
-	.large-w25 { 
-		width: 25% !important; 
-	}
-	
-	.large-w33 { 
-		width: 33.3333% !important; 
-	}
-	
-	.large-w50 { 
-		width: 50% !important; 
-	}
-	
-	.large-w66 { 
-		width: 66.6666% !important; 
-	}
-	
-	.large-w75 { 
-		width: 75% !important; 
-	}
-	
-	.large-w100,
-	.large-wauto {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-
-	/* margins for large screens */
-	.large-man { 
-		margin: 0 !important; 
-	}
-	
-	/* grid rwd for large screens */
-	.grid5 > *,
-	.grid6 > *,
-	.grid8 > *,
-	.grid10 > *,
-	.grid12 > * {
-		width: 33.333%;
-	}
-	
-	/* autogrid rwd for large screens */
-	.autogrid5 > *,
-	.autogrid6 > *,
-	.autogrid8 > *,
-	.autogrid10 > *,
-	.autogrid12 > * {
-		width: 32%;
-	}
-}
-
-/* ---------------------------------- */
-/* ==Responsive medium                */
-/* ---------------------------------- */
-
-@media (min-width: (@small-screen + 1)) and (max-width: @medium-screen) {
-
-	/* layouts for medium screens */
-	.medium-hidden { 
-		display: none !important; 
-	}
-	
-	.medium-visible { 
-		display: block !important; 
-	}
-	
-	.medium-no-float {
-		float: none; 
-	}
-	
-	.medium-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.medium-row {
-		display: table;
-		table-layout: fixed;
-		width: 100% !important;
-	}
-	.medium-col {
-		display: table-cell;
-		vertical-align: top;
-	}
-
-	/* widths for medium screens */
-	.medium-w25 { 
-		width: 25% !important; 
-	}
-	
-	.medium-w33 { 
-		width: 33.3333% !important; 
-	}
-	
-	.medium-w50 { 
-		width: 50% !important; 
-	}
-	
-	.medium-w66 { 
-		width: 66.6666% !important; 
-	}
-	
-	.medium-w75 { 
-		width: 75% !important; 
-	}
-	
-	.medium-w100,
-	.medium-wauto {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-
-	/* margins for medium screens */
-	.medium-man { 
-		margin: 0 !important; 
-	}
-}
-
-/* ---------------------------------- */
-/* ==Responsive small                 */
-/* ---------------------------------- */
-
-@media (min-width: (@tiny-screen + 1)) and (max-width: @small-screen) {
-	
-	/* quick small resolution reset */
-	.mod,
-	.col,
-	fieldset {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-
-	/* quick reset in small resolution and less */
-	.w600p,
-	.w700p,
-	.w800p,
-	.w960p,
-	.mw960p {
-		width: auto;
-		float: none;
-	} 
-
-	/* layouts for small screens */
-	.small-hidden { 
-		display: none !important; 
-	}
-	
-	.small-visible { 
-		display: block !important; 
-	}
-	
-	.small-no-float {
-		float: none; 
-	}
-	
-	.small-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.small-row {
-		display: table !important;
-		table-layout: fixed !important;
-		width: 100% !important;
-	}
-	.small-col {
-		display: table-cell !important;
-		vertical-align: top !important;
-	}
-
-	/* widths for small screens */
-	.small-w25 { 
-		width: 25% !important; 
-	}
-	
-	.small-w33 { 
-		width: 33.3333% !important; 
-	}
-	
-	.small-w50 { 
-		width: 50% !important; 
-	}
-	
-	.small-w66 { 
-		width: 66.6666% !important; 
-	}
-	
-	.small-w75 { 
-		width: 75% !important; 
-	}
-	
-	.small-w100,
-	.small-wauto  {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-	
-	/* margins for small screens */
-	.small-man { 
-		margin: 0 !important; 
-	}
-	
-	.small-pan { 
-		padding: 0 !important; 
-	}
-	
-	/* grid rwd for small screens */
-	.grid3 > *,
-	.grid4 > *,
-	.grid5 > *,
-	.grid6 > *,
-	.grid8 > *,
-	.grid10 > *,
-	.grid12 > * {
-		width: 50%;
-	}
-	
-	/* autogrid rwd for small screens */
-	.autogrid5 > *,
-	.autogrid6 > *,
-	.autogrid8 > *,
-	.autogrid10 > *,
-	.autogrid12 > * {
-		width: 49% !important;
-	}
-}
-
-/* ---------------------------------- */
-/* ==Responsive tiny                  */
-/* ---------------------------------- */
-
-@media (max-width: @tiny-screen) {
-	
-	.w300p,
-	.w400p,
-	.w500p {
-		width: auto;
-		float: none;
-	}
-	
-	.row { 
-		display: block !important;
-		width: 100% !important;
-	}
-
-	/* layouts for tiny screens */
-	.tiny-hidden { 
-		display: none !important; 
-	}
-	
-	.tiny-visible { 
-		display: block !important; 
-	}
-	
-	.tiny-no-float {
-		float: none;
-	}
-	
-	.tiny-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	
-	.tiny-row {
-		display: table !important;
-		table-layout: fixed !important;
-		width: 100% !important;
-	}
-	
-	.tiny-col {
-		display: table-cell !important;
-		vertical-align: top !important;
-	}
-	
-	th,
-	td {
-		display: block !important;
-		width: auto !important;
-		text-align: left !important;
-	}
-	
-	thead { 
-		display: none; 
-	}
-
-	/* widths for tiny screens */
-	.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;
-	}
-	
-	/* margins for tiny screens */
-	.tiny-man { 
-		margin: 0 !important; 
-	}
-	
-	.tiny-pan { 
-		padding: 0 !important; 
-	}
-	
-	/* grid rwd for tiny screens */
-	.grid > * > * {
-		width: 100% !important;
-	}
-	
-	/* autogrid rwd for tiny screens */
-	[class*="autogrid"] > * {
-		width: 100% !important;
-	}
-}
-

less/_09-print.less

@@ -1,86 +0,0 @@
-/* quick print reset */
-@media print {
-	
-	* {
-		background: transparent !important;
-		box-shadow: none !important;
-		text-shadow: none !important;
-	}
-	
-	body {
-		width: auto !important;
-		margin: auto !important;
-		font-family: serif;
-		font-size: 12pt;
-		background-color: #fff !important;
-		color: #333 !important;
-	}
-	
-	p,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6,
-	blockquote,
-	ul,
-	ol {
-		color: #000 !important;
-		margin: auto !important;
-	}
-	
-	.print {
-		display: block; 
-	}
-	
-	.no-print {
-		display: none;
-	}
-	
-	img { 
-		filter: grayscale(100%);
-	}
-	
-	/* no orphans, no widows */
-	p,
-	blockquote {
-		orphans: 3; 
-		widows: 3;
-	}
-	
-	/* no breaks inside these elements */
-	blockquote,
-	ul,
-	ol {
-		page-break-inside: avoid; 
-	}
-	
-	/* page break before main headers */
-	h1 {
-		page-break-before: always; 
-	}
-	
-	/* no breaks after these elements */
-	h1,
-	h2,
-	h3,
-	caption {
-		page-break-after: avoid; 
-	}
-	
-	a {
-		color: #000 !important;
-		text-decoration: underline !important;
-	}
-	
-	/* displaying URLs */
-	a[href]:after {
-		content: " (" attr(href) ")"; 
-	}
-	
-	a[href^="javascript:"]:after,
-	a[href^="#"]:after {
-		content: "";
-	}
-}

less/_10-booleans.less

@@ -1,41 +0,0 @@
-/* ----------------------------- */
-/* ==skip-hyphens                */
-/* ----------------------------- */
-
-/* styling skip links */
-
-.skip-links {
-	position: absolute;
-	
-	& a {
-		position: absolute;
-		overflow: hidden;
-		clip: rect(1px, 1px, 1px, 1px);
-		padding: 0.5em;
-		background: black;
-		color: white;
-		text-decoration: none;
-		
-		&:focus {
-			position: static;
-			overflow: visible;
-			clip: auto;
-		}
-	}
-}
-
-// hyphens
-@media (max-width: @small-screen) {
-	/* you shall not pass */
-	div,
-	textarea,
-	table,
-	td,
-	th,
-	code,
-	pre,
-	samp {
-		word-wrap: break-word;
-		hyphens: auto;
-	}
-}

less/_11-gmaps.less

@@ -1,18 +0,0 @@
-/* ----------------------------- */
-/* ==gmaps support               */
-/* ----------------------------- */
-
-/* Google Gmap3 bug fix on images */
-.gm-style img {
-	height: 100%;
-}
-
-:not(.gm-style) img {
-	height: auto;
-}
-
-.gm-style img,
-.gmnoscreen img,
-.gmnoprint img {
-	max-width: none !important;
-}

less/_12-ie.less

@@ -1,107 +0,0 @@
-/* ----------------------------- */
-/* ==IE6, IE7, IE8 support       */
-/* ----------------------------- */
-	
-/* Active box-sizing for IE6/IE7 */
-/* @source https://github.com/Schepp/box-sizing-polyfill */
-
-.ie67 * {
-	behavior: url(/js/boxsizing.htc);
-}
-
-.ie678 h1, .ie678 .h1-like {
-	@em: @h1-size * 10 / @base-font-size;
-	font-size: unit(round(@em,2), em);
-}
-
-.ie678 h2, .ie678 .h2-like {
-	@em: @h2-size * 10 / @base-font-size;
-	font-size: unit(round(@em,2), em);
-}
-
-.ie678 h3, .ie678 .h3-like {
-	@em: @h3-size * 10 / @base-font-size;
-	font-size: unit(round(@em,2), em);
-}
-
-.ie678 h4, .ie678 .h4-like {
-	@em: @h4-size * 10 / @base-font-size;
-	font-size: unit(round(@em,2), em);
-}
-
-.ie678 h5, .ie678 .h5-like {
-	@em: @h5-size * 10 / @base-font-size;
-	font-size: unit(round(@em,2), em);
-}
-
-.ie678 h6, .ie678 .h6-like {
-	@em: @h6-size * 10 / @base-font-size;
-	font-size: unit(round(@em,2), em);
-}
-
-/* @bugfix for IE8 */
-.ie678 img {
-	width: auto; 
-}
-
-.ie678 .gm-style img {
-	height: 100%;
-}
-
-/* hasLayout for IE6/IE7 */
-.clearfix,
-.line,
-.mod,
-.row,
-.col {
-	*zoom: 1;
-}
-
-/*! inline-block and table-cell for IE6/IE7 */
-/*! warning: .col needs width on IE6/IE7 */
-.btn,
-.col,
-.inbl {
-	*display: inline;
-	*zoom: 1;
-}
-
-/* old syntax of clip for IE6/IE7 */
-.visually-hidden { 
-	*clip: rect(1px 1px 1px 1px); 
-}
-
-/* IE8 grid hack */
-.ie8 .grid > *,
-.ie8 [class*="autogrid"] > * {
-	letter-spacing: -0.31em;
-	text-rendering: optimizespeed;
-}
-
-.ie8 .grid > * > *,
-.ie8 [class*="autogrid"] > * > *{
-	letter-spacing: normal;
-	word-spacing: normal;
-	text-rendering: auto;
-}
-
-/* IE7 grid hack */
-.grid > * > *,
-[class*="autogrid"] > * > *{
-	*display: inline;
-	*zoom: 1;
-}
-
-/* forms */
-/* Corrects excess space around these inputs in IE8/9 */
-.ie678 input[type="checkbox"],
-.ie678 input[type="radio"] {
-	padding: 0; 
-}
-
-/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
-.ie678 textarea {
-	overflow: auto; 
-}
-
-

less/_13-styling.less

@@ -1,136 +0,0 @@
-/* ----------------------------- */
-/* ==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: none;
-	background: none;
-	color: inherit;
-	border-radius: 0;
-}
-
-mark {
-	padding:2px 4px;
-	background: #ff0;
-}
-
-sup,
-sub {
-	vertical-align: 0;
-	position: relative;
-}
-
-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,
-.q {
-	quotes: "“\00a0" "\00a0”";
-}
-
-q:lang(fr),
-.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;
-}
-
-/* alternate tables */
-.alternate { border: 0; }
-.alternate tbody { 
-	border: 1px solid #ccc; 
-}
-
-.alternate thead tr > * + * {
-	border-left: 0;
-}
-
-.alternate tbody tr > * + * {
-	border-left: 1px solid #ccc;
-}
-
-/* alternate-vert tables */
-.alternate-vert { 
-	border: 0;
-	border-right: 1px solid #ccc;
-}
-
-.alternate-vert tr > :first-child {
-	border-bottom: 0;
-}
-
-.alternate-vert tr > * + * {
-	border-top: 1px solid #ccc;
-}
-
-/* striped tables */
-.striped tbody tr:nth-child(odd) {
-	background: #eee;
-	background: rgba(0, 0, 0, .05);
-}
-
-/* striped-vert tables */
-.striped-vert tr > :first-child {
-	background: #eee;
-	background: rgba(0, 0, 0, .05);
-}

less/knacss.less

@@ -1,28 +0,0 @@
-// LESS config file
-// (you should comment this line and move config file from vendor/knacss folder to your own folder)
-@import "_00-config";
-
-// LESS base styles
-@import "_01-base"; // reset, config and basic layout
-
-// LESS files : chose the ones you need
-@import "_02-helpers"; // width and spacers visually classes
-@import "_03-grids"; // grids and autogrids
-@import "_04-tables"; 
-@import "_05-forms";
-@import "_06-icons"; // UTF-8 icons
-@import "_07-flexbox";
-@import "_08-rwd"; // Responsive Web Design helpers
-@import "_09-print";
-@import "_10-booleans"; // skip links and hyphens
-@import "_11-gmaps"; // Google maps bugs fix
-@import "_12-ie"; // IE6, IE7, IE8 support
-@import "_13-styling"; // minor stylings 
-
-/* ----------------------------- */
-/* ==own stylesheet              */
-/* ----------------------------- */
-
-/* Here should go your own CSS styles */
-/* You can also link them with a LESS @import */
-/* @import "my-styles.less"; */

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "knacss",
+  "version": "8.2.1",
+  "homepage": "http://www.knacss.com/",
+  "bugs": "https://github.com/alsacreations/KNACSS/issues",
+  "author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
+  "contributors": [
+    "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": "https://github.com/alsacreations/KNACSS/tree/master/css",
+  "keywords": [
+    "css",
+    "framework",
+    "reset",
+    "responsive",
+    "sass",
+    "rwd",
+    "boilerplate",
+    "workflow"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alsacreations/KNACSS"
+  },
+  "license": "WTFPL",
+  "devDependencies": {
+    "gulp": "^4.0.2",
+    "gulp-postcss": "^8.0.0",
+    "gulp-sass": "^4.1.0"
+  },
+  "dependencies": {
+    "autoprefixer": "^9.7.1",
+    "postcss-combine-media-query": "^1.0.1",
+    "cssnano": "^4.1.10"
+  }
+}

sass/_00-config.scss

@@ -1,80 +0,0 @@
-// Config file : variables, mixins, ...
-
-// font sizes
-$base-font-size	: 14px; // if "14px" then 1em = 14px
-$line-height	: 1.5; // equiv line-height 1.5
-$h1-size		: 3.2rem; // equiv "32px"
-$h2-size		: 2.8rem; // equiv "28px"
-$h3-size		: 2.4rem; // equiv "24px"
-$h4-size		: 2.0rem; // equiv "20px"
-$h5-size		: 1.8rem; // equiv "18px"
-$h6-size		: 1.6rem; // equiv "16px"
-
-// font stacks
-$font-stack-common		: Helvetica, Arial, sans-serif; // common font
-$font-stack-headings	: Helvetica, Arial, sans-serif; // headings font
-$font-stack-monospace	: Consolas, 'DejaVu Sans Mono', Courier, monospace; // monospace font
-$font-stack-universal	: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif; // universal stack
-
-// font colors
-$base-color					: #000; // text color on body and content
-$primary-color				: #000; // text color on primary elements
-$secondary-color			: #000; // text color on secondary elements
-$headings-color				: #000; // text color on headings
-$base-color-link			: #333; // base links color
-$base-color-link-hover		: #000; // base hovered/focused links color
-
-// backgrounds
-$base-background		: #fff; // body background color
-$primary-background		: #fff; // primary elements background color
-$secondary-background	: #fff; // secondary elements background color
-
-// spacings (choose unit you prefer)
-$tiny-value				: 5px; // tiny value for margins / paddings
-$small-value			: 10px; // small value for margins / paddings
-$medium-value			: 20px; // medium value for margins / paddings
-$large-value			: 40px; // large value for margins / paddings
-$extra-large-value		: 80px; // extra large value for margins / paddings
-$ultra-large-value		: 160px; // ultra large value for margins / paddings
-
-// breakpoints (choose unit you prefer)
-$tiny-screen			: 480px; // tiny screens media query (less than 480px)
-$small-screen			: 768px; // screens between 481px and 768px
-$medium-screen			: 1024px; // screens between 769px and 1024px
-$large-screen			: 1280px; // screens between 1025px and 1280px
-$extra-large-screen		: 1600px; // screens between 1281px and 1600px
-$ultra-large-screen		: 1920px; // ultra large screens
-
-// misc (choose unit you prefer)
-$gutter		: 20px; // gutter value for grid layouts. Unit can be: %, px, em, rem
-
-// Sass mixins : don't touch or you'll be banned ;)
-// px to em/rem 
-
-@mixin rem($size) {	
-	@if unitless($size) {
-	 	font-size: ($size * 1rem) / 1rem * $base-font-size;
-	 	font-size: $size * 1rem;
-	}
-	@else {
-	  @warn "Please make sure `$size` is unitless."
-	}
-}
-@mixin em($size) {	
-	@if unitless($size) {
-		$bf: $base-font-size / 1px;
-	 	font-size: $size / $bf * 1em;
-	}
-	@else {
-	  @warn "Please make sure `$size` is unitless."
-	}
-}
-@mixin px($size) {	
-	@if unitless($size) {
-		$bf: $base-font-size / 1px;
-	 	font-size: $size * $bf * 1px;
-	}
-	@else {
-	  @warn "Please make sure `$size` is unitless."
-	}
-}

sass/_01-base.scss

@@ -1,365 +0,0 @@
-/*!
-* www.KNACSS.com V3.1.0 (2014-10-20) @author: Raphael Goetter, Alsacreations (with help from Hugo Giraudel)
-* Licence WTFPL http://www.wtfpl.net/
-*/
-
-/* ----------------------------- */
-/* == soft reset                 */
-/* ----------------------------- */
-
-/* switching box model for all elements */
-* {
-	box-sizing: border-box;
-}
-
-/* soft reset */
-html,
-body {
-	margin: 0;
-	padding: 0;
-}
-
-ul,
-ol {
-	padding-left: 2em;
-}
-
-ul.unstyled {
-	list-style: none;
-}
-
-img {
-	height: auto;
-	vertical-align: middle;
-	border: 0;
-}
-
-blockquote,
-figure {
-	margin-left: 0;
-	margin-right: 0;
-}
-
-audio,
-canvas,
-video {
-	display: inline-block;
-}
-
-svg:not(:root) {
-	overflow: hidden;
-}
-
-/* ----------------------------- */
-/* == typography                 */
-/* ----------------------------- */
-
-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);
-	
-	/* disallow text zooming on orientation change (non standard property) */
-	-webkit-text-size-adjust: 100%;
-	    -ms-text-size-adjust: 100%;
-}
-
-body {
-	
-	/* set body font-size in em (1.4em equiv "14px") */
-	font-size: ($base-font-size / 10px) + em;
-	
-	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,
-.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, .h1-like {
-	font-size: $h1-size;
-	font-family: $font-stack-headings;
-}
-
-h2, .h2-like {
-	font-size: $h2-size;
-	font-family: $font-stack-headings;
-}
-
-h3, .h3-like {
-	font-size: $h3-size;
-}
-
-h4, .h4-like {
-	font-size: $h4-size;
-}
-
-h5, .h5-like {
-	font-size: $h5-size;
-}
-
-h6, .h6-like {
-	font-size: $h6-size;
-}
-
-/* alternate font-sizing */
-.smaller {
-	@include em($base-font-size / 1px - 4);
-}
-
-.small {
-	@include em($base-font-size / 1px - 2);
-}
-
-.big {
-	@include em($base-font-size / 1px + 2);
-}
-
-.bigger {
-	@include em($base-font-size / 1px + 4);
-}
-
-.biggest {
-	@include em($base-font-size / 1px + 6);
-}
-
-code, 
-pre,
-samp,
-kbd {
-	/* IE fix */
-	white-space: pre-line;
-	white-space: pre-wrap;
-	font-family: $font-stack-monospace;
-	line-height: normal;
-}
-
-em,
-.italic,
-address,
-cite,
-dfn,
-i,
-var {
-	font-style: italic;
-}
-
-strong,
-.bold {
-	font-weight: bold;
-}
-
-small,
-sub,
-sup {
-	font-size: smaller;
-}
-
-/* ----------------------------- */
-/* == hiding content             */
-/* ----------------------------- */
-
-/* hidden but not for assistance tools, Yahoo! method */
-.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;
-}
-
-body > script {
-	display: none !important;
-}
-
-@media (max-width: $small-screen) {
-	.no-small-screen {
-		display: none;
-	}
-}
-
-@media (min-width: $large-screen) {
-	.no-large-screen {
-		display: none;
-	}
-}
-
-/* ----------------------------- */
-/* == browsers consistency       */
-/* ----------------------------- */
-
-/* avoid top margins on first content element */
-p, 
-.p-like, 
-ul, 
-ol, 
-dl,
-blockquote, 
-pre,
-h1, 
-h2, 
-h3, 
-h4, 
-h5, 
-h6 {
-	&:first-child {
-		margin-top: 0;
-	}
-}
-
-/* avoid margins on nested elements */
-li p,
-li .p-like,
-li ul,
-li ol {
-	margin-top: 0;
-	margin-bottom: 0;
-}
-
-/* max values */
-img, 
-table, 
-td, 
-blockquote, 
-code, 
-pre, 
-textarea, 
-input, 
-video {
-	max-width: 100%;
-}
-
-/* margin-bottom on tables */
-table { 
-	margin-bottom: $medium-value; 
-}
-
-
-/* ----------------------------- */
-/* ==layout and modules          */
-/* ----------------------------- */
-
-/* float layout */
-/* module, gains superpower "BFC" Block Formating Context */
-.mod { 
-	overflow: hidden;
-}
-
-/* blocks that needs to be placed under floats */
-.clear,
-.line,
-.row {
-	clear: both;
-}
-
-/* blocks that must contain floats */
-.clearfix,
-.line {
-	&:after {
-		content: "";
-		display: table;
-		clear: both;
-		border-collapse: collapse;
-	}
-}
-
-/* table layout */
-.row {
-	display: table;
-	table-layout: fixed;
-	width: 100%;
-}
-
-.row > *,
-.col {
-	display: table-cell;
-	vertical-align: top;
-}
-
-/* inline-block */
-.inbl {
-	display: inline-block;
-	vertical-align: top;
-}
-
-
-/* alignments (blocks and inline) */
-/* ------------------------------ */
-
-/* left (or starting) elements */
-.left,
-.start {
-	float: left;
-}
-
-img.left,
-img.start  {
-	margin-right: $small-value;
-}
-
-/* right (or ending) elements */
-.right,
-.end {
-	float: right;
-}
-
-img.right,
-img.end {
-	margin-left: $small-value;
-}
-
-img.left, 
-img.right,
-img.start, 
-img.end {
-	margin-bottom: $tiny-value;
-}
-
-.center    { 
-	margin-left: auto; 
-	margin-right: auto; 
-}
-
-.txtleft   { 
-	text-align: left; 
-}
-
-.txtright  { 
-	text-align: right; 
-}
-
-.txtcenter { 
-	text-align: center; 
-}

sass/_02-helpers.scss

@@ -1,286 +0,0 @@
-/* ---------------------------------- */
-/* ==visual helpers                   */
-/* .. use them with parcimony !       */
-/* ---------------------------------- */
-
-/* blocks widths (percentage and pixels) */
-.w10    { 
-	width: 10%; 
-}
-
-.w20    { 
-	width: 20%; 
-}
-
-.w25    { 
-	width: 25%; 
-}
-
-.w30    { 
-	width: 30%; 
-}
-
-.w33    { 
-	width: 33.3333%; 
-}
-
-.w40    { 
-	width: 40%; 
-}
-
-.w50    { 
-	width: 50%; 
-}
-
-.w60    { 
-	width: 60%; 
-}
-
-.w66    { 
-	width: 66.6666%; 
-}
-
-.w70    { 
-	width: 70%; 
-}
-
-.w75    { 
-	width: 75%; 
-}
-
-.w80    { 
-	width: 80%; 
-}
-
-.w90    { 
-	width: 90%; 
-}
-
-.w100   { 
-	width: 100%; 
-}
-
-.w50p   { 
-	width: 50px; 
-}
-
-.w100p  { 
-	width: 100px; 
-}
-
-.w150p  { 
-	width: 150px; 
-}
-
-.w200p  { 
-	width: 200px; 
-}
-
-.w300p  { 
-	width: 300px; 
-}
-
-.w400p  { 
-	width: 400px; 
-}
-
-.w500p  { 
-	width: 500px; 
-}
-
-.w600p  { 
-	width: 600px; 
-}
-
-.w700p  { 
-	width: 700px; 
-}
-
-.w800p  { 
-	width: 800px; 
-}
-
-.w960p  { 
-	width: 960px; 
-}
-
-.mw960p { 
-	max-width: 960px; 
-}
-
-.w1140p  { 
-	width: 1140px; 
-}
-
-.mw1140p { 
-	max-width: 1140px; 
-}
-
-.wauto  { 
-	width: auto; 
-}
-
-/* spacing helpers
-p,m = padding,margin
-a,t,r,b,l = all,top,right,bottom,left
-s,m,l,n = small, medium, large, none
-*/
-.man { 
-	margin: 0; 
-}
-
-.pan { 
-	padding: 0; 
-}
-
-.mas { 
-	margin: $small-value; 
-}
-
-.mam {
-	margin: $medium-value; 
-}
-
-.mal { 
-	margin: $large-value; 
-}
-
-.pas { 
-	padding: $small-value; 
-}
-
-.pam { 
-	padding: $medium-value; 
-}
-
-.pal { 
-	padding: $large-value; 
-}
-
-.mtn { 
-	margin-top: 0; 
-}
-
-.mts { 
-	margin-top: $small-value; 
-}
-
-.mtm { 
-	margin-top: $medium-value; 
-}
-
-.mtl { 
-	margin-top: $large-value; 
-}
-
-.mrn { 
-	margin-right: 0; 
-}
-
-.mrs {
-	margin-right: $small-value; 
-}
-
-.mrm { 
-	margin-right: $medium-value; 
-}
-
-.mrl { 
-	margin-right: $large-value; 
-}
-
-.mbn { 
-	margin-bottom: 0; 
-}
-
-.mbs { 
-	margin-bottom: $small-value; 
-}
-
-.mbm { 
-	margin-bottom: $medium-value; 
-}
-
-.mbl { 
-	margin-bottom: $large-value; 
-}
-
-.mln { 
-	margin-left: 0; 
-}
-
-.mls { 
-	margin-left: $small-value; 
-}
-
-.mlm { 
-	margin-left: $medium-value; 
-}
-
-.mll { 
-	margin-left: $large-value; 
-}
-
-.ptn { 
-	padding-top: 0; 
-}
-
-.pts { 
-	padding-top: $small-value; 
-}
-
-.ptm { 
-	padding-top: $medium-value; 
-}
-
-.ptl { 
-	padding-top: $large-value; 
-}
-
-.prn { 
-	padding-right: 0; 
-}
-
-.prs { 
-	padding-right: $small-value; 
-}
-
-.prm { 
-	padding-right: $medium-value; 
-}
-
-.prl { 
-	padding-right: $large-value; 
-}
-
-.pbn { 
-	padding-bottom: 0; 
-}
-
-.pbs { 
-	padding-bottom: $small-value; 
-}
-
-.pbm { 
-	padding-bottom: $medium-value; 
-}
-
-.pbl { 
-	padding-bottom: $large-value; 
-}
-
-.pln { 
-	padding-left: 0; 
-}
-
-.pls { 
-	padding-left: $small-value; 
-}
-
-.plm { 
-	padding-left: $medium-value; 
-}
-
-.pll { 
-	padding-left: $large-value; 
-}

sass/_03-grids.scss

@@ -1,175 +0,0 @@
-/* ---------------------------------- */
-/* ==classic grids                    */
-/* .. use it when gutter size matters */
-/* ---------------------------------- */
-
-/* grids inspired from SUIT https://github.com/suitcss/suit */
-
-/* overall container of grids */
-.grid { 
-	overflow: hidden;
-}
-
-/* global styles for direct child ex. .grid3 */
-.grid > * { 
-	display: block;
-	padding: 0;
-	/* gutter value */
-	margin-left: -$gutter;
-	text-align: left;
-}
-
-/* global styles for each "cell" */
-.grid > * > * { 
-	display: inline-block;
-	/* gutter value */
-	padding-left: $gutter;
-	margin-left: 0;
-	vertical-align: top;
-}
-
-/* whitespace fixing for modern browsers including IE9+ */
-:root .grid {
-	font-size: 0;
-	/* fallback for IE9+ */
-	text-justify: distribute-all-lines;
-}
-
-:root .grid > * > * {
-	/* fallback for Opera Mini */
-	font-size: $base-font-size;
-	font-size: ($base-font-size / 10px) + rem;
-}
-
-/* Opera hack */
-.opera:-o-prefocus,
-.grid > * {
-	word-spacing: -0.43em;
-}
-
-.grid2 > * {
-	width: 50%;
-}
-
-.grid3 > * {
-	width: 33.333%;
-}
-
-.grid4 > * {
-	width: 25%;
-}
-
-.grid5 > * {
-	width: 20%;
-}
-
-.grid6 > * {
-	width: 16.667%;
-}
-
-.grid8 > * {
-	width: 12.5%;
-}
-
-.grid10 > * {
-	width: 10%;
-}
-
-.grid12 > * {
-	width: 8.333%;
-}
-
-/* unequal grids (1-2, 2-1, 1-3 and 3-1) for 2 blocks */
-.grid2-1 > *:first-child,
-.grid1-2 > * + * { 
-	width: 66.666%; 
-}
-
-.grid1-2 > *:first-child,
-.grid2-1 > * + * { 
-	width: 33.333%; 
-}
-
-.grid1-3 > *:first-child,
-.grid3-1 > * + * { 
-	width: 25%; 
-}
-
-.grid3-1 > *:first-child,
-.grid1-3 > * + * { 
-	width: 75%; 
-}
-
-/* ---------------------------------- */
-/* ==autogrids                        */
-/* .. to automatically justify blocs  */
-/* ---------------------------------- */
-
-/* Demo : http://codepen.io/raphaelgoetter/pen/Kqehf */
-
-/* container of autogrids */
-[class*="autogrid"] { 
-	text-align: justify;
-}
-
-[class*="autogrid"]:after {
-	content: "";
-	display: inline-block;
-	width: 100%; 
-}
-
-[class*="autogrid"] > * {
-	display: inline-block;
-	vertical-align: top;
-	text-align: left;
-}
-
-/* whitespace fixing for modern browsers including IE9+ */
-:root [class*="autogrid"] {
-	font-size: 0;
-	/* fallback for IE9+ */
-	text-justify: distribute-all-lines;
-}
-
-:root [class*="autogrid"] > * {
-	/* fallback for Opera Mini */
-	font-size: $base-font-size;
-	font-size: ($base-font-size / 10px) + rem;
-}
-
-/* Opera hack */
-[class*="autogrid"]:-o-prefocus {
-	word-spacing: -0.43em;
-}
-
-.autogrid2 > * {
-	width: 49%;
-}
-
-.autogrid3 > * {
-	width: 32%;
-}
-
-.autogrid4 > * {
-	width: 23.6%;
-}
-
-.autogrid5 > * {
-	width: 19%;
-}
-
-.autogrid6 > * {
-	width: 15%;
-}
-
-.autogrid8 > * {
-	width: 10.8%;
-}
-
-.autogrid10 > * {
-	width: 9%;
-}
-
-.autogrid12 > * {
-	width: 6.4%;
-}

sass/_04-tables.scss

@@ -1,38 +0,0 @@
-/* ----------------------------- */
-/* ==tables                      */
-/* ----------------------------- */
-
-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: $small-value;
-	color: #555;
-	font-style: italic;	
-}
-
-td,
-th {
-	padding: 0.3em 0.8em;
-	border: 1px #aaa dotted;
-	vertical-align: top;
-	min-width: $medium-value;
-	cursor: default;
-	text-align: left;
-}

sass/_05-forms.scss

@@ -1,89 +0,0 @@
-/* ----------------------------- */
-/* ==forms                       */
-/* ----------------------------- */
-
-/* thanks to HTML5boilerplate,
-* github.com/nathansmith/formalize and www.sitepen.com
-*/
-
-/* buttons */
-.btn {
-	display: inline-block;
-}
-
-/* forms items */
-form,
-fieldset {
-	border: none;
-}
-
-input,
-button,
-select,
-label,
-.btn {
-	vertical-align: middle;
-	font-family: inherit;
-	font-size: inherit;
-}
-
-label { 
-	display: inline-block;
-	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;
-}
-
-/* clickable input types in iOS */
-button,
-input[type="button"],
-input[type="reset"],
-input[type="submit"] {
-	cursor: pointer;
-	-webkit-appearance: button; 
-}
-
-input[type="search"] {
-	-webkit-appearance: textfield;
-}
-
-/* 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;
-}
-
-/* Removes inner padding and border in FF3+ */
-button::-moz-focus-inner,
-input[type='button']::-moz-focus-inner,
-input[type='reset']::-moz-focus-inner,
-input[type='submit']::-moz-focus-inner {
-	border: 0;
-	padding: 0;
-}

sass/_06-icons.scss

@@ -1,159 +0,0 @@
-/* ----------------------------- */
-/* ==icons and bullets	         */
-/* ----------------------------- */
-
-.icon {display: inline-block;}
-
-.icon:before,
-.icon.after:after {
-	content: "";
-	display: inline-block;
-	vertical-align: middle;
-	position: relative; top: -0.1em;
-	margin: 0 0.3em 0 0;
-	font: 1.4em/1 sans-serif;
-	color: #000;
-	text-shadow: 1px 1px 0 rgba(0,0,0,.1);
-	speak: none;
-}
-
-@media (min-device-width: $small-screen) {
-	.icon:before,
-	.icon.after:after {
-	font: 1em/0.6 sans-serif;
-	-webkit-transform: rotateZ(0.05deg);
-	}
-}
-
-.icon.after:after {
-	margin: 0 0 0 8px;
-}
-
-.icon.after:before {
-	content: "" !important
-}
-
-.icon-rate:before,
-.icon-rate.after:after {
-	content: "\2605";
-}
-.icon-unrate:before,
-.icon-unrate.after:after{
-	content: "\2606";
-}
-
-.icon-check:before,
-.icon-check.after:after{
-	content: "\2713";
-}
-
-.icon-uncheck:before,
-.icon-uncheck.after:after{
-	content: "\2717";
-}
-
-.icon-cloud:before,
-.icon-cloud.after:after {
-	content: "\2601";
-}
-
-.icon-dl:before,
-.icon-dl.after:after {
-	content: "\21E3";
-	font-weight: bold;
-}
-
-.icon-cross:before,
-.icon-cross.after:after {
-	content: "\2716";
-	font-weight: bold;
-}
-
-.icon-arrow1:before, 
-.icon-arrow1.after:after {
-	content: "\2192";
-	position: relative; 
-		top: -0.15em;
-}
-
-.icon-arrow2:before,
-.icon-arrow2.after:after {
-	content: "\279E";
-}
-
-.icon-arrow3:before,
-.icon-arrow3.after:after {
-	content: "\279A";
-}
-
-.icon-bracket1:before,
-.icon-bracket1.after:after {
-	content: "\2039";
-	font-weight: bold;
-	font-size: 1.6em;
-	position: relative; 
-		top: -0.15em;
-}
-
-.icon-bracket2:before,
-.icon-bracket2.after:after {
-	content: "\203A";
-	font-weight: bold;
-	font-size: 1.6em;
-	position: relative; 
-		top: -0.15em;
-}
-
-.icon-up:before,
-.icon-up.after:after {
-	content: "\25B2";
-}
-
-.icon-down:before,
-.icon-down.after:after {
-	content: "\25BC";
-}
-
-.icon-bull:before,
-.icon-bull.after:after {
-	content: "\2022";
-	font-size: 1.2em;
-	top: -0.05em;
-}
-
-.icon-bull2:before,
-.icon-bull2.after:after {
-	content: "\25E6";
-	top: -0.05em;
-}
-
-.icon-bull3:before,
-.icon-bull3.after:after{
-	content: "\2023";
-	font-size: 1.6em;
-	top: -0.05em;
-}
-
-.icon-nav:before,
-.icon-nav.after:after {
-	content: "\2261";
-	font-weight: bold;
-}
-
-.icon-losange:before,
-.icon-losange.after:after {
-	content: "\25C6";
-}
-
-.icon-asteri:before,
-.icon-asteri.after:after {
-	content: "\2731";
-	font-weight: bold;
-}
-
-.icon-mail:before,
-.icon-mail.after:after {
-	content: "\2709";
-	font-size: 1.6em;
-	top: -.05em;
-}

sass/_07-flexbox.scss

@@ -1,29 +0,0 @@
-/* flexbox layout 
-Tutorial: http://knacss.com/demos/tutoriel.html#flex */
-.flex {
-	display : flex;
-}
-
-.flex-h {
-	flex-direction: row;
-}
-
-.flex-v {
-	flex-direction: column;
-}
-
-.flex-fluid {
-	flex: 1;
-}
-
-.flex-start {
-	order : -1;
-}
-
-.flex-mid {
-	order : 1;
-}
-
-.flex-end {
-	order : 42;
-}

sass/_08-rwd.scss

@@ -1,401 +0,0 @@
-/* ----------------------------- */
-/* ==desktop and HD devices      */
-/* ----------------------------- */
-
-@media (min-width: ($medium-screen + 1)) {
-/* rules for big resources and big screens like: background-images, font-faces, etc. */
-}
-
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi), (min-resolution: 2dppx) {
-/* style adjustments for high density devices */
-}
-
-/* ---------------------------------- */
-/* ==Responsive large                 */
-/* ---------------------------------- */
-
-@media (min-width: ($medium-screen + 1)) {
-
-	/* layouts for large screens */
-	.large-hidden { 
-		display: none !important; 
-	}
-	
-	.large-visible { 
-		display: block !important; 
-	}
-	
-	.large-no-float {
-		float: none; 
-	}
-	
-	.large-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.large-row {
-		display: table;
-		table-layout: fixed;
-		width: 100% !important;
-	}
-	.large-col {
-		display: table-cell;
-		vertical-align: top;
-	}
-
-	/* widths for large screens */
-	.large-w25 { 
-		width: 25% !important; 
-	}
-	
-	.large-w33 { 
-		width: 33.3333% !important; 
-	}
-	
-	.large-w50 { 
-		width: 50% !important; 
-	}
-	
-	.large-w66 { 
-		width: 66.6666% !important; 
-	}
-	
-	.large-w75 { 
-		width: 75% !important; 
-	}
-	
-	.large-w100,
-	.large-wauto {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-
-	/* margins for large screens */
-	.large-man { 
-		margin: 0 !important; 
-	}
-	
-	/* grid rwd for large screens */
-	.grid5 > *,
-	.grid6 > *,
-	.grid8 > *,
-	.grid10 > *,
-	.grid12 > * {
-		width: 33.333%;
-	}
-	
-	/* autogrid rwd for large screens */
-	.autogrid5 > *,
-	.autogrid6 > *,
-	.autogrid8 > *,
-	.autogrid10 > *,
-	.autogrid12 > * {
-		width: 32%;
-	}
-}
-
-/* ---------------------------------- */
-/* ==Responsive medium                */
-/* ---------------------------------- */
-
-@media (min-width: ($small-screen + 1)) and (max-width: $medium-screen)  {
-
-	/* layouts for medium screens */
-	.medium-hidden { 
-		display: none !important; 
-	}
-	
-	.medium-visible { 
-		display: block !important; 
-	}
-	
-	.medium-no-float {
-		float: none; 
-	}
-	
-	.medium-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.medium-row {
-		display: table;
-		table-layout: fixed;
-		width: 100% !important;
-	}
-	.medium-col {
-		display: table-cell;
-		vertical-align: top;
-	}
-
-	/* widths for medium screens */
-	.medium-w25 { 
-		width: 25% !important; 
-	}
-	
-	.medium-w33 { 
-		width: 33.3333% !important; 
-	}
-	
-	.medium-w50 { 
-		width: 50% !important; 
-	}
-	
-	.medium-w66 { 
-		width: 66.6666% !important; 
-	}
-	
-	.medium-w75 { 
-		width: 75% !important; 
-	}
-	
-	.medium-w100,
-	.medium-wauto {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-
-	/* margins for medium screens */
-	.medium-man { 
-		margin: 0 !important; 
-	}
-}
-
-/* ---------------------------------- */
-/* ==Responsive small                 */
-/* ---------------------------------- */
-
-@media (min-width: ($tiny-screen + 1)) and (max-width: $small-screen) {
-	
-	/* quick small resolution reset */
-	.mod,
-	.col,
-	fieldset {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;
-	}
-
-	/* quick reset in small resolution and less */
-	.w600p,
-	.w700p,
-	.w800p,
-	.w960p,
-	.mw960p {
-		width: auto;
-		float: none;
-	} 
-
-	/* layouts for small screens */
-	.small-hidden { 
-		display: none !important; 
-	}
-	
-	.small-visible { 
-		display: block !important; 
-	}
-	
-	.small-no-float {
-		float: none; 
-	}
-	
-	.small-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	.small-row {
-		display: table !important;
-		table-layout: fixed !important;
-		width: 100% !important;
-	}
-	.small-col {
-		display: table-cell !important;
-		vertical-align: top !important;
-	}
-
-	/* widths for small screens */
-	.small-w25 { 
-		width: 25% !important; 
-	}
-	
-	.small-w33 { 
-		width: 33.3333% !important; 
-	}
-	
-	.small-w50 { 
-		width: 50% !important; 
-	}
-	
-	.small-w66 { 
-		width: 66.6666% !important; 
-	}
-	
-	.small-w75 { 
-		width: 75% !important; 
-	}
-	
-	.small-w100,
-	.small-wauto  {
-		display: block !important;
-		float: none !important;
-		clear: none !important;
-		width: auto !important;
-		margin-left: 0 !important;
-		margin-right: 0 !important;
-		border: 0;		
-	}
-	
-	/* margins for small screens */
-	.small-man { 
-		margin: 0 !important; 
-	}
-	
-	.small-pan { 
-		padding: 0 !important; 
-	}
-	
-	/* grid rwd for small screens */
-	.grid3 > *,
-	.grid4 > *,
-	.grid5 > *,
-	.grid6 > *,
-	.grid8 > *,
-	.grid10 > *,
-	.grid12 > * {
-		width: 50%;
-	}
-	
-	/* autogrid rwd for small screens */
-	.autogrid5 > *,
-	.autogrid6 > *,
-	.autogrid8 > *,
-	.autogrid10 > *,
-	.autogrid12 > * {
-		width: 49% !important;
-	}
-}
-
-/* ---------------------------------- */
-/* ==Responsive tiny                  */
-/* ---------------------------------- */
-
-@media (max-width: $tiny-screen) {
-	
-	.w300p,
-	.w400p,
-	.w500p {
-		width: auto;
-		float: none;
-	}
-	
-	.row { 
-		display: block !important;
-		width: 100% !important;
-	}
-
-	/* layouts for tiny screens */
-	.tiny-hidden { 
-		display: none !important; 
-	}
-	
-	.tiny-visible { 
-		display: block !important; 
-	}
-	
-	.tiny-no-float {
-		float: none;
-	}
-	
-	.tiny-inbl {
-		display: inline-block;
-		float: none;
-		vertical-align: top;
-	}
-	
-	.tiny-row {
-		display: table !important;
-		table-layout: fixed !important;
-		width: 100% !important;
-	}
-	
-	.tiny-col {
-		display: table-cell !important;
-		vertical-align: top !important;
-	}
-	
-	th,
-	td {
-		display: block !important;
-		width: auto !important;
-		text-align: left !important;
-	}
-	
-	thead { display: none; }
-
-	/* widths for tiny screens */
-	.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;
-	}
-	
-	/* margins for tiny screens */
-	.tiny-man { 
-		margin: 0 !important; 
-	}
-	
-	.tiny-pan { 
-		padding: 0 !important; 
-	}
-	
-	/* grid rwd for tiny screens */
-	.grid > * > * {
-		width: 100% !important;
-	}
-	
-	/* autogrid rwd for tiny screens */
-	[class*="autogrid"] > * {
-		width: 100% !important;
-	}
-}

sass/_09-print.scss

@@ -1,85 +0,0 @@
-/* quick print reset */
-@media print {
-	* {
-		background: transparent !important;
-		box-shadow: none !important;
-		text-shadow: none !important;
-	}
-	
-	body {
-		width: auto !important;
-		margin: auto !important;
-		font-family: serif;
-		font-size: 12pt;
-		background-color: #fff !important;
-		color: #333 !important;
-	}
-	
-	p,
-	h1,
-	h2,
-	h3,
-	h4,
-	h5,
-	h6,
-	blockquote,
-	ul,
-	ol {
-		color: #000 !important;
-		margin: auto !important;
-	}
-	
-	.print {
-		display: block;
-	}
-	
-	.no-print {
-		display: none;
-	}
-	
-	img { 
-		filter: grayscale(100%);
-	}
-	
-	/* no orphans, no widows */
-	p,
-	blockquote {
-		orphans: 3; 
-		widows: 3;
-	}
-	
-	/* no breaks inside these elements */
-	blockquote,
-	ul,
-	ol {
-		page-break-inside: avoid; 
-	}
-	
-	/* page break before main headers */
-	h1 {
-		page-break-before: always; 
-	}
-	
-	/* no breaks after these elements */
-	h1,
-	h2,
-	h3,
-	caption {
-		page-break-after: avoid; 
-	}
-	
-	a {
-		color: #000 !important;
-		text-decoration: underline !important;
-	}
-	
-	/* displaying URLs */
-	a[href]:after {
-		content: " (" attr(href) ")"; 
-	}
-	
-	a[href^="javascript:"]:after,
-	a[href^="#"]:after {
-		content: "";
-	}
-}

sass/_10-booleans.scss

@@ -1,40 +0,0 @@
-/* ----------------------------- */
-/* ==skip-hyphens                */
-/* ----------------------------- */
-/* styling skip links */
-.skip-links {
-	position: absolute;
-	
-	& a {
-		position: absolute;
-		overflow: hidden;
-		clip: rect(1px, 1px, 1px, 1px);
-		padding: 0.5em;
-		background: black;
-		color: white;
-		text-decoration: none;
-
-		&:focus {
-			position: static;
-			overflow: visible;
-			clip: auto;
-		}
-	}
-}
-
-// hyphens boolean
-@media (max-width: $small-screen) {
-	/* you shall not pass */
-	div, 
-	textarea, 
-	table, 
-	td, 
-	th, 
-	code, 
-	pre, 
-	samp {
-		word-wrap: break-word;
-		hyphens: auto;
-	}
-}
-

sass/_11-gmaps.scss

@@ -1,18 +0,0 @@
-/* ----------------------------- */
-/* ==gmaps support               */
-/* ----------------------------- */
-
-/* Google Gmap3 bug fix on images */
-.gm-style img {
-	height: 100%;
-}
-
-:not(.gm-style) img {
-	height: auto;
-}
-
-.gm-style img,
-.gmnoscreen img,
-.gmnoprint img {
-	max-width: none !important;
-}

sass/_12-ie.scss

@@ -1,111 +0,0 @@
-/* ----------------------------- */
-/* ==IE6, IE7, IE8 support       */
-/* ----------------------------- */
-// IE6, 7, 8 support boolean
-$bf: $base-font-size / 1px;
-/* IE678 support */
-.ie678 h1, .ie678 .h1-like {
-	$val: $h1-size / 1rem; 
-	$em : $val * 10 / $bf;
-	font-size: $em +0em; 
-}
-
-.ie678 h2, .ie678 .h2-like {
-	$val: $h2-size / 1rem;
-	$em : $val * 10 / $bf;
-	font-size: $em +0em;
-}
-
-.ie678 h3, .ie678 .h3-like {
-	$val: $h3-size / 1rem;
-	$em : $val * 10 / $bf;
-	font-size: $em +0em;
-}
-
-.ie678 h4, .ie678 .h4-like {
-	$val: $h4-size / 1rem;
-	$em : $val * 10 / $bf;
-	font-size: $em +0em;
-}
-
-.ie678 h5, .ie678 .h5-like {
-	$val: $h5-size / 1rem;
-	$em : $val * 10 / $bf;
-	font-size: $em +0em;
-}
-
-.ie678 h6, .ie678 .h6-like {
-	$val: $h6-size / 1rem;
-	$em : $val * 10 / $bf;
-	font-size: $em +0em;
-}
-
-.ie678 img {
-	width: auto; /* @bugfix for IE8 */
-}
-
-.ie678 .gm-style img {
-	height: 100%;
-}
-
-/* hasLayout for IE6/IE7 */
-.clearfix,
-.line,
-.mod,
-.row,
-.col {
-	*zoom: 1;
-}
-
-/* inline-block and table-cell for IE6/IE7 */
-/* warning: .col needs width on IE6/IE7 */
-.btn,
-.col,
-.inbl {
-	*display: inline;
-	*zoom: 1;
-}
-.visually-hidden { 
-	*clip: rect(1px 1px 1px 1px); 
-}
-
-/* IE8 grid hack */
-.ie8 .grid > *,
-.ie8 [class*="autogrid"] > * {
-	letter-spacing: -0.31em;
-	text-rendering: optimizespeed;
-}
-
-.ie8 .grid > * > *,
-.ie8 [class*="autogrid"] > * > *{
-	letter-spacing: normal;
-	word-spacing: normal;
-	text-rendering: auto;
-}
-
-/* IE7 grid hack */
-.grid > * > *,
-[class*="autogrid"] > * > *{
-	*display: inline;
-	*zoom: 1;
-}
-
-/* forms */
- /* Corrects excess space around these inputs in IE8/9 */
-.ie678 input[type="checkbox"],
-.ie678 input[type="radio"] {
-	padding: 0;
-}
-
-/* Removes default vertical scrollbar on empty textarea in IE6/7/8/9 */
-.ie678 textarea {
-	overflow: auto;
-}
-
-/* Active box-sizing for IE6/IE7 */
-/* @source https://github.com/Schepp/box-sizing-polyfill */
-/*
-.ie67 * {
-	behavior: url(/lib/box-sizing-polyfill/boxsizing.htc);
-}
-*/

sass/_13-styling.scss

@@ -1,133 +0,0 @@
-/* ----------------------------- */
-/* ==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: none;
-	background: none;
-	color: inherit;
-	border-radius: 0;
-}
-
-mark {
-	padding:2px 4px;
-	background: #ff0;
-}
-
-sup,
-sub {
-	vertical-align: 0;
-	position: relative;
-}
-
-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,
-.q {
-	quotes: "“\00a0" "\00a0”";
-}
-
-q:lang(fr),
-.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;
-}
-
-/* alternate tables */
-.alternate { border: 0; }
-.alternate tbody { 
-	border: 1px solid #ccc; 
-}
-
-.alternate thead tr > * + * {
-	border-left: 0;
-}
-
-.alternate tbody tr > * + * {
-	border-left: 1px solid #ccc;
-}
-
-/* alternate-vert tables */
-.alternate-vert { 
-	border: 0;
-	border-right: 1px solid #ccc;
-}
-
-.alternate-vert tr > :first-child {
-	border-bottom: 0;
-}
-
-.alternate-vert tr > * + * {
-	border-top: 1px solid #ccc;
-}
-
-/* striped tables */
-.striped tbody tr:nth-child(odd) {
-	background: #eee;
-	background: rgba(0, 0, 0, .05);
-}
-
-/* striped-vert tables */
-.striped-vert tr > :first-child {
-	background: #eee;
-	background: rgba(0, 0, 0, .05);
-}

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

@@ -0,0 +1,96 @@
+/* ----------------------------- */
+/* ==Print (quick print reset)   */
+/* ----------------------------- */
+
+@media print {
+  * {
+    background: transparent !important;
+    box-shadow: none !important;
+    text-shadow: none !important;
+  }
+
+  body {
+    width: auto;
+    margin: auto;
+    font-family: serif;
+    font-size: 12pt;
+  }
+
+  p,
+  .p-like,
+  h1,
+  .h1-like,
+  h2,
+  .h2-like,
+  h3,
+  .h3-like,
+  h4,
+  .h4-like,
+  h5,
+  .h5-like,
+  h6,
+  .h6-like,
+  blockquote,
+  label,
+  ul,
+  ol {
+    color: #000;
+    margin: auto;
+  }
+
+  .print {
+    display: block;
+  }
+
+  .no-print {
+    display: none;
+  }
+
+  /* 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;
+  }
+
+  a {
+    color: #000;
+  }
+
+  /* displaying URLs
+  a[href]::after {
+    content: " (" attr(href) ")";
+  }
+  */
+
+  a[href^="javascript:"]::after,
+  a[href^="#"]::after {
+    content: "";
+  }
+}

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,28 +1,32 @@
-// Sass config file
+/*!
-// (you should comment this line and move config file from vendor/knacss folder to your own folder)
+* KNACSS Reborn: Just keep it simple!
-@import "_00-config";
+* @author: Alsacreations
+* v8.2 2022/01
+* Licence WTFPL http://www.wtfpl.net/
+*/
 
-// Sass base styles
+// IMPORTANT : Seuls les fichiers "Noyau" et "Utilitaires" sont importés par défaut. Ajoutez les fichiers de composants si nécessaires dans votre projet.
-@import "_01-base";
 
-// Sass files : chose the ones you need
+// NOYAU
-@import "_02-helpers"; // width and spacers visually classes
+@import "abstracts/variables-sass";
-@import "_03-grids"; // grids and autogrids
+@import "abstracts/mixins-sass";
-@import "_04-tables"; 
-@import "_05-forms";
-@import "_06-icons"; // UTF-8 icons
-@import "_07-flexbox";
-@import "_08-rwd"; // Responsive Web Design helpers
-@import "_09-print";
-@import "_10-booleans"; // skip links and hyphens
-@import "_11-gmaps"; // Google maps bugs fix
-@import "_12-ie"; // IE6, IE7, IE8 support
-@import "_13-styling"; // minor stylings 
 
-/* ----------------------------- */
+@import "base/reset-base";
-/* ==own stylesheet              */
+@import "base/reset-accessibility";
-/* ----------------------------- */
+@import "base/reset-forms";
+@import "base/reset-print";
+@import "base/layout";
 
-/* Here should go your own CSS styles */
+// UTILITAIRES
-/* You can also link them with a Sass @import */
+@import "utils/utils-global";
-/* @import "my-styles"; */
+@import "utils/utils-font-sizes";
+@import "utils/utils-spacers";
+@import "utils/grillade";
+
+// COMPOSANTS (à ajouter au besoin)
+// @import "components/button";
+// @import "components/burger";
+// @import "components/checkbox";
+// @import "components/radio";
+// @import "components/select";
+// @import "components/quote";

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