Update README.md

supprime une dépendance inutilisée

README.md

@@ -1,14 +1,8 @@
 # KNACSS
 
-<https://www.knacss.com/>
+**Né en 2012 et après plus de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations est officiellement obsolète, n'est plus maintenu et ne sera plus mis à jour.**
 
-KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui permet de commencer un projet à partir de zéro tout en tenant compte de bonnes pratiques générales (accessibilité, performance, responsive webdesign, grille de mise en forme).
+## Documentation version v8 (v8 = Reborn)
-
-**Né en 2012 et après près de 10 années de bons et loyaux services, le projet initial « KNACSS » d'Alsacréations laisse place à une toute nouvelle version, totalement remaniée : KNACSS Reborn.**
-
-## 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)
@@ -18,34 +12,3 @@ KNACSS, c'est une sorte de feuille de style CSS "reset" sur-vitaminée qui perme
 - [**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,5 +1,9 @@
 # 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
@@ -93,7 +97,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-tiny`)
+  - renommage des variables d'espacement (`$tiny-value` -> `$spacer-micro`)
   - automatisation des classes utilitaires via Sass
   - suppression du namespace "kna-"
 - refonte :

gulpfile.js

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

sass/base/_reset-base.scss

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

sass/base/_reset-forms.scss

@@ -112,7 +112,7 @@ fieldset {
 legend {
   display: table;
   max-width: 100%;
-  padding: 0 $spacer-tiny;
+  padding: 0 $spacer-micro;
   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-small-plus;
+  padding: $spacer-small $spacer-medium;
   cursor: pointer;
   user-select: none;
   transition: 0.25s;
@@ -38,12 +38,12 @@
 .btn,
 .button {
   &--small {
-    padding: $spacer-tiny-plus $spacer-small;
+    padding: $spacer-micro-plus $spacer-small;
     font-size: .8em;
   }
 
   &--big {
-    padding: $spacer-small-plus $spacer-medium;
+    padding: $spacer-medium $spacer-medium;
     font-size: 1.4em;
   }
 

sass/components/_checkbox.scss

@@ -12,7 +12,7 @@
  */
 
 $checkbox-color: $white;
-$checkbox-background: $color-alpha;
+$checkbox-background: $primary;
 $checkbox-size: 2rem;
 $checkbox-border-radius: 4px;
 
@@ -30,8 +30,7 @@ $checkbox-border-radius: 4px;
   width: $checkbox-size;
   height: $checkbox-size;
   vertical-align: text-bottom;
-  outline: 0;
+  box-shadow: inset 0 0 0 1px $primary;
-  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: $color-alpha;
+$radio-color: $primary;
 $radio-background: $white;
 $radio-size: 2rem;
 $radio-border-radius: 50%;
@@ -30,8 +30,7 @@ $radio-border-radius: 50%;
   width: $radio-size;
   height: $radio-size;
   vertical-align: text-bottom;
-  outline: 0;
+  box-shadow: inset 0 0 0 1px $primary;
-  box-shadow: inset 0 0 0 1px $color-alpha;
   background-color: $radio-background;
   transition: background-size 0.15s;
   cursor: pointer;
@@ -55,5 +54,5 @@ $radio-border-radius: 50%;
   background-size: 70% 70%;
   background-position: center;
   background-repeat: no-repeat;
-  background-color: $color-alpha;
+  background-color: $primary;
 }

sass/knacss.scss

@@ -1,7 +1,7 @@
 /*!
 * KNACSS Reborn: Just keep it simple!
 * @author: Alsacreations
-* v8.0.4 2021/04
+* v8.2 2022/01
 * Licence WTFPL http://www.wtfpl.net/
 */