taille de base 100% (et non plus 62.5%) et corrections Grillade
This commit is contained in:
Raphaël Goetter
parent
b9f1adc09a
commit
4d8ce9b36e
8 changed files with 1693 additions and 1637 deletions
|
|
@ -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
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
File diff suppressed because one or more lines are too long
|
|
@ -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)",
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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: (
|
||||
@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,
|
||||
"30": 1.875rem,
|
||||
"50": 3.125rem,
|
||||
"100": 6.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 */
|
||||
@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 */
|
||||
@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 {
|
||||
/* 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};
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue