taille de base 100% (et non plus 62.5%) et corrections Grillade

changelog.md

@@ -1,6 +1,7 @@
 # Changelog
 
-- 5 mars : les classes utilitaires font à présent partie du Core
+- 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

package.json

@@ -1,6 +1,6 @@
 {
   "name": "knacss",
-  "version": "8.0.3",
+  "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)",

sass/abstracts/_variables-sass.scss

@@ -23,31 +23,35 @@ $large: map-get($breakpoints, lg) !default;
 
 $spacers: (
   "0": 0,
-  "1": 0.5rem,
+  // none
+  "2": 0.125rem,
   // tiny
-  "2": 0.75rem,
+  "5": 0.313rem,
   // tiny-plus
-  "3": 1rem,
+  "8": 0.5rem,
   // small
-  "4": 1.5rem,
+  "10": 0.625rem,
   // small-plus
-  "5": 2rem,
+  "16": 1rem,
   // medium
-  "6": 3rem,
+  "20": 1.25rem,
   // medium-plus
-  "7": 5rem,
+  "24": 1.5rem,
   // large
+  "36": 2.25rem,
+  // large-plus
   "auto": auto,
 ) !default;
 
 $spacer-none: map-get($spacers, "0") !default;
-$spacer-tiny: map-get($spacers, "1") !default;
+$spacer-tiny: map-get($spacers, "2") !default;
-$spacer-tiny-plus: map-get($spacers, "2") !default;
+$spacer-tiny-plus: map-get($spacers, "5") !default;
-$spacer-small: map-get($spacers, "3") !default;
+$spacer-small: map-get($spacers, "8") !default;
-$spacer-small-plus: map-get($spacers, "4") !default;
+$spacer-small-plus: map-get($spacers, "10") !default;
-$spacer-medium: map-get($spacers, "5") !default;
+$spacer-medium: map-get($spacers, "16") !default;
-$spacer-medium-plus: map-get($spacers, "6") !default;
+$spacer-medium-plus: map-get($spacers, "20") !default;
-$spacer-large: map-get($spacers, "7") !default;
+$spacer-large: map-get($spacers, "24") !default;
+$spacer-large-plus: map-get($spacers, "36") !default;
 
 // ----------------
 // Grid layout
@@ -55,6 +59,15 @@ $spacer-large: map-get($spacers, "7") !default;
 
 $grid-columns: 6 !default;
 
+$gaps: (
+  "0": 0,
+  "5": 0.313rem,
+  "10": 0.625rem,
+  "16": 1rem,
+  "20": 1.25rem,
+  "36": 2.25rem,
+) !default;
+
 // ----------------
 // Fonts
 // ----------------
@@ -82,8 +95,8 @@ $font-size: (
   "inherit": "inherit",
 );
 
-$font-size-html: 62.5%;
+$font-size-html: 100%;
-$font-size-base: 1.6rem;
+$font-size-base: 1rem;
 
 // Font weights
 $weight-light: 200;

sass/knacss.scss

@@ -1,13 +1,13 @@
 /*!
 * KNACSS Reborn: Just keep it simple!
 * @author: Alsacreations
-* v8.0.3 2021/05
+* v8.0.4 2021/04
 * Licence WTFPL http://www.wtfpl.net/
 */
 
-// WARNING : Only Core and Utilities are imported by default. Just add other files if you need them.
+// IMPORTANT : Seuls les fichiers "Noyau" et "Utilitaires" sont importés par défaut. Ajoutez les fichiers de composants si nécessaires dans votre projet.
 
-// CORE
+// NOYAU
 @import "abstracts/variables-sass";
 @import "abstracts/mixins-sass";
 
@@ -17,13 +17,13 @@
 @import "base/reset-print";
 @import "base/layout";
 
-// UTILITY CLASSES
+// UTILITAIRES
 @import "utils/utils-global";
 @import "utils/utils-font-sizes";
 @import "utils/utils-spacers";
 @import "utils/grillade";
 
-// COMPONENTS (add them only if you need)
+// COMPOSANTS (à ajouter au besoin)
 // @import "components/button";
 // @import "components/burger";
 // @import "components/checkbox";

sass/utils/grillade.scss

@@ -1,21 +1,29 @@
-/* --------------------------------------- */
+/* -------------------------------------------------- */
-/* ==Grillade : ultra light Grid Layout    */
+/* ==Grillade : système de micro-grille  de KNACSS   */
-/* --------------------------------------- */
+/* ------------------------------------------------ */
-// Grillade is heavily inspired by tailwindcss.com Grid utility classes
+// Grillade est directement inspiré tailwindcss.com et de ses classes utilitaires
 
-// use these variables only for a standalone Grillade
+// Les variables ci-dessous ne sont appliquées que si elles n'ont pas été renseignées
-// in KNACSS, you shall modify variables file instead
+// dans le fichiers de variables de KNACSS.
-$grid-columns: 6 !default;
 
-$gaps: (
+@if variable_exists(grid-columns) {
-  "0": 0,
+  $grid-columns: $grid-columns !global;
-  "10": 0.625rem,
+} @else {
-  "16": 1rem,
+  $grid-columns: 6 !global;
-  "20": 1.25rem,
+}
-  "30": 1.875rem,
+
-  "50": 3.125rem,
+@if variable_exists(gaps) {
-  "100": 6.25rem,
+  $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;
@@ -39,15 +47,17 @@ $gaps: (
   }
 }
 
-/* grid-template-columns classes */
+/* grid-template-columns initialisation */
 @for $i from 1 through $grid-columns {
   .grid-cols-#{$i} {
     grid-template-columns: repeat(#{$i}, minmax(0, 1fr));
   }
 }
-@for $i from 1 through $grid-columns {
+
-  @each $bp, $bpv in $breakpoints {
+/* grid-template-columns au sein des breakpoints */
-    @media (min-width: #{$bpv}) {
+@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));
       }
@@ -55,7 +65,7 @@ $gaps: (
   }
 }
 
-/* gap classes */
+/* gap initialisation */
 @each $key, $value in $gaps {
   .gap-#{$key} {
     gap: $value;
@@ -67,9 +77,11 @@ $gaps: (
     row-gap: $value;
   }
 }
-@each $key, $value in $gaps {
+
-  @each $bp, $bpv in $breakpoints {
+/* gap au sein des breakpoints */
-    @media (min-width: #{$bpv}) {
+@each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
+    @each $key, $value in $gaps {
       .#{$bp}\:gap-#{$key} {
         gap: $value;
       }
@@ -83,7 +95,7 @@ $gaps: (
   }
 }
 
-/* grid-items classes */
+/* grid-items initialisation */
 @for $i from 1 through $grid-columns {
   .col-start-#{$i} {
     grid-column-start: #{$i};
@@ -108,10 +120,12 @@ $gaps: (
   }
 }
 
-// loop for each breakpoint
+/* grid-items au sein des breakpoints */
-@for $i from 1 through $grid-columns {
+@each $bp, $bpv in $breakpoints {
-  @each $bp, $bpv in $breakpoints {
+  @media (min-width: #{$bpv}) {
-    @media (min-width: #{$bpv}) {
+    @for $i from 1 through $grid-columns {
+      // loop for each breakpoint
+
       .#{$bp}\:col-start-#{$i} {
         grid-column-start: #{$i};
       }