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

renommage des classes grid- en grillade- pour éviter tout conflit

Browse source
This commit is contained in:
Raphael 2019-07-19 10:46:41 +02:00
parent 271ff3acd5
commit 75644329fd
3 changed files with 16 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
changelog.md
View file

@ -7,9 +7,10 @@
- ajout d'une variable pour supporter ou non IE11 : `$ie: true !default;`. Activation de Grid Layout ou flexbox selon cette variable - ajout d'une variable pour supporter ou non IE11 : `$ie: true !default;`. Activation de Grid Layout ou flexbox selon cette variable
- ajout d'une variable pour supporter ou non les classes utilitaires : `$utilities: true !default;`. - ajout d'une variable pour supporter ou non les classes utilitaires : `$utilities: true !default;`.
- ajout d'une variable pour supporter ou non WordPress : `$wordpress: false !default;`. Activation de reset et styles WordPress selon cette variable - ajout d'une variable pour supporter ou non WordPress : `$wordpress: false !default;`. Activation de reset et styles WordPress selon cette variable
- corrections typo - renommage les classes `grid-` en `grillade-` pour éviter tout conflit
- renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss` - renommage de dossiers à la "7-1 pattern": `_config` > `abstracts`, `_library` > `base`, et du fichier `_base.scss` en `_reset.scss`
- Browserslist devenu `.browserslistrc` - Browserslist devenu `.browserslistrc`
- corrections typo
## Changelog v7.1.2 (30 janvier 2019) ## Changelog v7.1.2 (30 janvier 2019)

12
sass/base/grillade-flex.scss
View file

@ -22,8 +22,8 @@ $grid-gutters: ( '': 1rem, '-l': 2rem, '-xl': 4rem );
// https://github.com/alsacreations/KNACSS/issues/133; // https://github.com/alsacreations/KNACSS/issues/133;
$iefix: 0.01px; $iefix: 0.01px;
@media (min-width: $small) { @media (min-width: $small) {
[class*=" grid-"], [class*=" grillade-"],
[class^="grid-"] { [class^="grillade-"] {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
@ -66,8 +66,8 @@ $iefix: 0.01px;
} }
// Mono-line grid constructor (.grid) // Mono-line grid constructor (.grid)
@media (min-width: $small) { @media (min-width: $small) {
.grid, .grillade,
.grid--reverse { .grillade--reverse {
display: flex; display: flex;
& > * { & > * {
@ -86,7 +86,7 @@ $iefix: 0.01px;
// Constructing grids : will be compiled in CSS // Constructing grids : will be compiled in CSS
@media (min-width: $small) { @media (min-width: $small) {
@for $i from 2 through $cols { @for $i from 2 through $cols {
[class*="grid-#{$i}"] { [class*="grillade-#{$i}"] {
@include grid(#{$i}, 0); @include grid(#{$i}, 0);
} }
} }
@ -110,7 +110,7 @@ $iefix: 0.01px;
order: 1; order: 1;
} }
[class*="grid-"][class*="--reverse"] { [class*="grillade-"][class*="--reverse"] {
flex-direction: row-reverse; flex-direction: row-reverse;
} }
// sizing individual children // sizing individual children

16
sass/base/grillade-grid.scss
View file

@ -13,8 +13,8 @@ $medium: 768px !default;
$cols: 12 !default; $cols: 12 !default;
// classic Grid // classic Grid
[class*=" grid-"], [class*=" grillade-"],
[class^="grid-"] { [class^="grillade-"] {
@media (min-width: $tiny) { @media (min-width: $tiny) {
display: grid; display: grid;
grid-auto-flow: dense; grid-auto-flow: dense;
@ -35,8 +35,8 @@ $cols: 12 !default;
} }
// autogrid // autogrid
.autogrid, .autogrillade,
.grid { .grillade {
@media (min-width: $tiny) { @media (min-width: $tiny) {
display: grid; display: grid;
grid-auto-flow: column; grid-auto-flow: column;
@ -57,9 +57,9 @@ $cols: 12 !default;
} }
} }
// grid constructor (.grid-2 to .grid-$cols) // grid constructor (.grillade-2 to .grillade-$cols)
@for $i from 2 through $cols { @for $i from 2 through $cols {
[class*="grid-#{$i}"] { [class*="grillade-#{$i}"] {
grid-template-columns: repeat(#{$i}, 1fr); grid-template-columns: repeat(#{$i}, 1fr);
} }
} }
@ -77,10 +77,10 @@ $cols: 12 !default;
/* intermediate breakpoints */ /* intermediate breakpoints */
// -small-X suffix means "X columns when < medium screen" // -small-X suffix means "X columns when < medium screen"
// example : .grid-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns // example : .grillade-4-small-2 will be 1 column (< tiny) then 2 columns (< medium) then 4 columns
@media (min-width: $tiny) and (max-width: ($medium - 1)) { @media (min-width: $tiny) and (max-width: ($medium - 1)) {
@for $i from 1 through 4{ @for $i from 1 through 4{
[class*="grid-"][class*="-small-#{$i}"] { [class*="grillade-"][class*="-small-#{$i}"] {
grid-template-columns: repeat(#{$i}, 1fr); grid-template-columns: repeat(#{$i}, 1fr);
} }