dbroqua/KNACSS
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
This commit is contained in:
Raphaël Goetter 2021-04-26 10:52:10 +02:00
parent b9f1adc09a
commit 4d8ce9b36e
8 changed files with 1693 additions and 1637 deletions
Download patch file Download diff file Expand all files Collapse all files

45
sass/abstracts/_variables-sass.scss
View file

@ -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-plus: map-get($spacers, "2") !default;
$spacer-small: map-get($spacers, "3") !default;
$spacer-small-plus: map-get($spacers, "4") !default;
$spacer-medium: map-get($spacers, "5") !default;
$spacer-medium-plus: map-get($spacers, "6") !default;
$spacer-large: map-get($spacers, "7") !default;
$spacer-tiny: map-get($spacers, "2") !default;
$spacer-tiny-plus: map-get($spacers, "5") !default;
$spacer-small: map-get($spacers, "8") !default;
$spacer-small-plus: map-get($spacers, "10") !default;
$spacer-medium: map-get($spacers, "16") !default;
$spacer-medium-plus: map-get($spacers, "20") !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-base: 1.6rem;
$font-size-html: 100%;
$font-size-base: 1rem;
// Font weights
$weight-light: 200;

10
sass/knacss.scss
View file

@ -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";

72
sass/utils/grillade.scss
View file

@ -1,21 +1,29 @@
/* --------------------------------------- */
/* ==Grillade : ultra light Grid Layout */
/* --------------------------------------- */
// Grillade is heavily inspired by tailwindcss.com Grid utility classes
/* -------------------------------------------------- */
/* ==Grillade : système de micro-grille de KNACSS */
/* ------------------------------------------------ */
// Grillade est directement inspiré tailwindcss.com et de ses classes utilitaires
// use these variables only for a standalone Grillade
// in KNACSS, you shall modify variables file instead
$grid-columns: 6 !default;
// Les variables ci-dessous ne sont appliquées que si elles n'ont pas été renseignées
// dans le fichiers de variables de KNACSS.
$gaps: (
"0": 0,
"10": 0.625rem,
"16": 1rem,
"20": 1.25rem,
"30": 1.875rem,
"50": 3.125rem,
"100": 6.25rem,
);
@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;
@ -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 {
@media (min-width: #{$bpv}) {
/* 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));
}
@ -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 {
@media (min-width: #{$bpv}) {
/* gap au sein des breakpoints */
@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
@for $i from 1 through $grid-columns {
@each $bp, $bpv in $breakpoints {
@media (min-width: #{$bpv}) {
/* 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};
}