README.md

@@ -1,8 +1,14 @@
 # KNACSS
 
-**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.**
+<https://www.knacss.com/>
 
-## Documentation version v8 (v8 = Reborn)
+KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign, grille de mise en forme).
+
+**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.**
+
+## Documentation version actuelle (v8 = Reborn)
+
+**Important : la version actuelle (v8.0.x) de KNACSS est encore en période de tests afin de s'adapter aux besoins de l'agence Alsacréations. Elle est partagée au public mais est susceptible d'évoluer à tout moment. Le niveau de version v8.1 marquera la première étape de sa stabilisation.**
 
 - Site web de présentation de KNACSS Reborn : <https://www.knacss.com/>
 - [**Documentation KNACSS Reborn**](https://www.knacss.com/doc.html)
@@ -12,3 +18,34 @@
 - [**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)
 
+## Modulaire
+
+Principe de briques modulaires :
+
+- KNACSS Reborn est constitué uniquement des fichiers "Core".
+- Les fichiers "Utils" seront des briques optionnelles (= les `@import` seront commentés par défaut).
+
+```scss
+// CORE
+@import "abstracts/variables-sass";
+
+@import "base/reset-base";
+@import "base/reset-accessibility";
+@import "base/reset-forms";
+@import "base/reset-print";
+@import "base/layout";
+
+@import "abstracts/mixins-sass";
+
+// UTILITY CLASSES
+@import "utils/utils-global";
+@import "utils/utils-spacers";
+@import "utils/grillade";
+
+// COMPONENTS (add them only if you need)
+// @import "components/button";
+// @import "components/burger";
+// @import "components/checkbox";
+// @import "components/radio";
+// @import "components/quote";
+```

changelog.md

@@ -1,9 +1,5 @@
 # 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
@@ -97,7 +93,7 @@ Né en 2012 et après près de 10 années de bons et loyaux services, le projet
   - 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`)
+  - renommage des variables d'espacement (`$tiny-value` -> `$spacer-tiny`)
   - automatisation des classes utilitaires via Sass
   - suppression du namespace "kna-"
 - refonte :

gulpfile.js

@@ -4,6 +4,7 @@ var postcss = require('gulp-postcss');
 var CombineMQ = require('postcss-combine-media-query');
 var autoprefixer = require('autoprefixer');
 var CSSnano = require('cssnano');
+var rename = require('gulp-rename');
 
 gulp.task('css:full', () => {
   return gulp.src('sass/knacss.scss')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "knacss",
-  "version": "8.2.1",
+  "version": "8.0.4",
   "homepage": "http://www.knacss.com/",
   "bugs": "https://github.com/alsacreations/KNACSS/issues",
   "author": "Raphaël GOETTER, Alsacreations (http://www.alsacreations.fr)",
@@ -32,6 +32,7 @@
   "dependencies": {
     "autoprefixer": "^9.7.1",
     "postcss-combine-media-query": "^1.0.1",
-    "cssnano": "^4.1.10"
+    "cssnano": "^4.1.10",
+    "gulp-rename": "^2.0.0"
   }
 }

sass/abstracts/_variables-sass.scss

@@ -10,7 +10,7 @@
 $breakpoints: (
   sm: 576px,
   md: 992px,
-  lg: 1400px,
+  lg: 1330px,
 ) !default;
 
 $small: map-get($breakpoints, sm) !default;
@@ -21,31 +21,37 @@ $large: map-get($breakpoints, lg) !default;
 // Spacers
 // ----------------
 
-$spacer: 1rem;
 $spacers: (
-  "0": 0, // none
+  "0": 0,
-  "1": 1px, // mono
+  // none
-  "2": 0.125rem, // nano
+  "2": 0.125rem,
-  "4": 0.25rem, // micro
+  // tiny
-  "8": 0.5rem, // mini
+  "5": 0.313rem,
-  "12": 0.75rem, // small
+  // tiny-plus
-  "16": 1rem, // medium
+  "8": 0.5rem,
-  "20": 1.25rem, // large
+  // small
-  "24": 1.5rem, // wide
+  "10": 0.625rem,
-  "36": 2.25rem, // ultra
+  // small-plus
+  "16": 1rem,
+  // medium
+  "20": 1.25rem,
+  // medium-plus
+  "24": 1.5rem,
+  // large
+  "36": 2.25rem,
+  // large-plus
   "auto": auto,
-);
+) !default;
 
-$spacer-none: map-get($spacers, "0");
+$spacer-none: map-get($spacers, "0") !default;
-$spacer-mono: map-get($spacers, "1");
+$spacer-tiny: map-get($spacers, "2") !default;
-$spacer-nano: map-get($spacers, "2");
+$spacer-tiny-plus: map-get($spacers, "5") !default;
-$spacer-micro: map-get($spacers, "4");
+$spacer-small: map-get($spacers, "8") !default;
-$spacer-mini: map-get($spacers, "8");
+$spacer-small-plus: map-get($spacers, "10") !default;
-$spacer-small: map-get($spacers, "12");
+$spacer-medium: map-get($spacers, "16") !default;
-$spacer-medium: map-get($spacers, "16");
+$spacer-medium-plus: map-get($spacers, "20") !default;
-$spacer-large: map-get($spacers, "20");
+$spacer-large: map-get($spacers, "24") !default;
-$spacer-wide: map-get($spacers, "24");
+$spacer-large-plus: map-get($spacers, "36") !default;
-$spacer-ultra: map-get($spacers, "36");
 
 // ----------------
 // Grid layout
@@ -66,10 +72,11 @@ $gaps: (
 // Fonts
 // ----------------
 
-// Familles de fonts
+// Font families
-$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-base: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-$font-family-headings: $font-family-base;
+  Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
-$font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+$font-family-headings: sans-serif;
+$font-family-monospace: consolas, courier, monospace;
 $line-height-base: 1.5;
 
 // Font sizes
@@ -85,13 +92,13 @@ $font-size: (
   "30": 1.875rem,
   "36": 2.25rem,
   "base": 1rem,
-  "inherit": inherit,
+  "inherit": "inherit",
 );
 
 $font-size-html: 100%;
 $font-size-base: 1rem;
 
-// Graisses des Fonts
+// Font weights
 $weight-light: 200;
 $weight-book: 300;
 $weight-regular: 400;
@@ -102,56 +109,42 @@ $weight-bold: 700;
 // Couleurs
 // ----------------
 
-// Variables niveaux de gris
+// Palette de couleur (à ne pas utiliser en variables sauf $white and $black)
+$white: #ffffff;
+$black: #000000;
 
-$gray-100: #f8f9fa;
+$color-gray-1: #f7fafc;
-$gray-200: #e9ecef;
+$color-gray-2: #abc3c2;
-$gray-300: #dee2e6;
+$color-gray-3: #454d5d;
-$gray-400: #ced4da;
+$color-gray-4: #212529;
-$gray-500: #adb5bd;
-$gray-600: #6c757d;
-$gray-700: #495057;
-$gray-800: #343a40;
-$gray-900: #212529;
-$white: #FFFFFF;
-$black: #0F0F0F;
 
+$color-blue-1: #0275d8;
+$color-blue-2: #04527b;
+$color-blue-3: #033651;
 
-// Variables couleurs globales
+// Palette non agnostic (à utiliser en variables)
 
-$body-color: $gray-900;
+$color-alpha: $color-gray-1; // couleurs fréquentes
-$body-bg: $white;
+$color-beta: $color-gray-3;
+$color-gamma: $color-gray-4;
 
-$primary: #6fa939; // Couleur dominante. Elle peut s'appliquer à la fois à des surfaces ou à des contenus.
+$color-delta: $color-blue-1;
-$primary-accent: #4e920f; // Modifieur de couleur dominante (survol, bordure)
+$color-epsilon: $color-blue-2;
-$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.
+$color-gradient-alpha: linear-gradient(
-$secondary-accent: #027da7; // Modifieur de couleur d'accentuation (survol, bordure)
+  to left bottom,
-$on-secondary: $white; // Contenus affichés par-dessus une couche $secondary
+  $color-alpha,
-
+  $color-beta
-// 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;
 
+$color-alternate-1: #5cb85c; // couleurs moins fréquentes
+$color-alternate-1b: #4d9c4d;
+$color-alternate-2: #5bc0de;
+$color-alternate-2b: #4fa8c4;
+$color-alternate-3: #f0ad4e;
+$color-alternate-3b: #d19644;
+$color-alternate-4: #d9534f;
+$color-alternate-4b: #be4945;
 
 // Links
 $link-decoration: underline;
@@ -161,13 +154,14 @@ $link-decoration-hover: underline;
 $radius-none: 0;
 $radius-small: 0.5rem;
 $radius-medium: 1rem;
-$radius-large: 20rem;
+$radius-large: 2rem;
 $radius-circle: 50%;
 
 // ----------------
 // Liste des propriétés utilitaires (note display: grid se trouve dans Grillade)
 // ----------------
-$utils: ((hidden, display, none),
+$utils: (
+  (hidden, display, none),
   (block, display, block),
   (inline, display, inline),
   (inline-block, display, inline-block),
@@ -188,7 +182,7 @@ $utils: ((hidden, display, none),
   (text-uppercase, text-transform, uppercase),
   (text-lowercase, text-transform, lowercase),
   (text-smaller, font-size, smaller),
-  (text-larger, font-size, larger),
+  (text-bigger, font-size, bigger),
   (text-left, text-align, left),
   (text-center, text-align, center),
   (text-right, text-align, right),
@@ -227,4 +221,5 @@ $utils: ((hidden, display, none),
   (align-bottom, vertical-align, bottom),
   (align-middle, vertical-align, middle),
   (item-first, order, -100),
-  (item-last, order, 100)) !default;
+  (item-last, order, 100)
+) !default;

sass/base/_reset-base.scss

@@ -4,16 +4,15 @@
 
 /*
  * 1. Switch to border-box model for all elements
- * 2. Avoid min-width: auto on flex and grid items
+ * 2. Avoid min-width: auto and min-height: auto on flex and grid children
  */
 
 *,
 *::before,
 *::after {
-  box-sizing: border-box;
+  box-sizing: border-box; /* 1 */
-  /* 1 */
+  min-width: 0; /* 2 */
-  min-width: 0;
+  min-height: 0; /* 2 */
-  /* 2 */
 }
 
 /*
@@ -24,12 +23,9 @@
 
 html {
   font-size: $font-size-html;
-  -webkit-tap-highlight-color: transparent;
+  -webkit-tap-highlight-color: transparent; /* 1 */
-  /* 1 */
+  -webkit-text-size-adjust: 100%; /* 2 */
-  -webkit-text-size-adjust: 100%;
+  overflow-wrap: break-word; /* 3 */
-  /* 2 */
-  overflow-wrap: break-word;
-  /* 3 */
 }
 
 body {
@@ -37,8 +33,8 @@ body {
   font-family: $font-family-base;
   font-size: $font-size-base;
   line-height: $line-height-base;
-  background-color: $body-bg;
+  background-color: $white;
-  color: $body-color;
+  color: $color-gamma;
 }
 
 /*
@@ -57,7 +53,7 @@ h5,
 .h5-like,
 h6,
 .h6-like {
-  color: $gray-900;
+  color: $color-gamma;
 }
 
 /*
@@ -65,14 +61,14 @@ h6,
  */
 
 a {
-  color: $gray-600;
+  color: $color-beta;
   text-decoration: $link-decoration;
 }
 
 a:focus,
 a:hover,
 a:active {
-  color: $gray-900;
+  color: $color-gamma;
   text-decoration: $link-decoration-hover;
 }
 
@@ -82,12 +78,9 @@ a:active {
  */
 
 abbr[title] {
-  border-bottom: none;
+  border-bottom: none; /* 1 */
-  /* 1 */
+  text-decoration: underline; /* 2 */
-  text-decoration: underline;
+  text-decoration: underline dotted; /* 2 */
-  /* 2 */
-  text-decoration: underline dotted;
-  /* 2 */
 }
 
 /*
@@ -254,4 +247,4 @@ table {
   border-collapse: collapse;
   vertical-align: top;
   margin-bottom: $spacer-medium;
-}
+}

sass/base/_reset-forms.scss

@@ -112,7 +112,7 @@ fieldset {
 legend {
   display: table;
   max-width: 100%;
-  padding: 0 $spacer-micro;
+  padding: 0 $spacer-tiny;
   border: 0;
   color: inherit;
   white-space: normal;

sass/components/_button.scss

@@ -15,7 +15,7 @@
   display: inline-flex;
   justify-content: center;
   align-items: center;
-  padding: $spacer-small $spacer-medium;
+  padding: $spacer-small $spacer-small-plus;
   cursor: pointer;
   user-select: none;
   transition: 0.25s;
@@ -38,12 +38,12 @@
 .btn,
 .button {
   &--small {
-    padding: $spacer-micro-plus $spacer-small;
+    padding: $spacer-tiny-plus $spacer-small;
     font-size: .8em;
   }
 
   &--big {
-    padding: $spacer-medium $spacer-medium;
+    padding: $spacer-small-plus $spacer-medium;
     font-size: 1.4em;
   }
 

sass/components/_checkbox.scss

@@ -12,7 +12,7 @@
  */
 
 $checkbox-color: $white;
-$checkbox-background: $primary;
+$checkbox-background: $color-alpha;
 $checkbox-size: 2rem;
 $checkbox-border-radius: 4px;
 
@@ -30,7 +30,8 @@ $checkbox-border-radius: 4px;
   width: $checkbox-size;
   height: $checkbox-size;
   vertical-align: text-bottom;
-  box-shadow: inset 0 0 0 1px $primary;
+  outline: 0;
+  box-shadow: inset 0 0 0 1px $color-alpha;
   background-color: $checkbox-color;
   transition: background-color 0.15s;
   cursor: pointer;

sass/components/_radio.scss

@@ -11,7 +11,7 @@
  * radio variables (you can change them)
  */
 
-$radio-color: $primary;
+$radio-color: $color-alpha;
 $radio-background: $white;
 $radio-size: 2rem;
 $radio-border-radius: 50%;
@@ -30,7 +30,8 @@ $radio-border-radius: 50%;
   width: $radio-size;
   height: $radio-size;
   vertical-align: text-bottom;
-  box-shadow: inset 0 0 0 1px $primary;
+  outline: 0;
+  box-shadow: inset 0 0 0 1px $color-alpha;
   background-color: $radio-background;
   transition: background-size 0.15s;
   cursor: pointer;
@@ -54,5 +55,5 @@ $radio-border-radius: 50%;
   background-size: 70% 70%;
   background-position: center;
   background-repeat: no-repeat;
-  background-color: $primary;
+  background-color: $color-alpha;
 }

sass/knacss.scss

@@ -1,7 +1,7 @@
 /*!
 * KNACSS Reborn: Just keep it simple!
 * @author: Alsacreations
-* v8.2 2022/01
+* v8.0.4 2021/04
 * Licence WTFPL http://www.wtfpl.net/
 */
 
@@ -29,4 +29,4 @@
 // @import "components/checkbox";
 // @import "components/radio";
 // @import "components/select";
-// @import "components/quote";
+// @import "components/quote";