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 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
- 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`
- Browserslist devenu `.browserslistrc`
- corrections typo
## 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;
$iefix: 0.01px;
@media (min-width: $small) {
[class*=" grid-"],
[class^="grid-"] {
[class*=" grillade-"],
[class^="grillade-"] {
display: flex;
flex-direction: row;
flex-wrap: wrap;
@ -66,8 +66,8 @@ $iefix: 0.01px;
}
// Mono-line grid constructor (.grid)
@media (min-width: $small) {
.grid,
.grid--reverse {
.grillade,
.grillade--reverse {
display: flex;
& > * {
@ -86,7 +86,7 @@ $iefix: 0.01px;
// Constructing grids : will be compiled in CSS
@media (min-width: $small) {
@for $i from 2 through $cols {
[class*="grid-#{$i}"] {
[class*="grillade-#{$i}"] {
@include grid(#{$i}, 0);
}
}
@ -110,7 +110,7 @@ $iefix: 0.01px;
order: 1;
}
[class*="grid-"][class*="--reverse"] {
[class*="grillade-"][class*="--reverse"] {
flex-direction: row-reverse;
}
// sizing individual children

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

@ -13,8 +13,8 @@ $medium: 768px !default;
$cols: 12 !default;
// classic Grid
[class*=" grid-"],
[class^="grid-"] {
[class*=" grillade-"],
[class^="grillade-"] {
@media (min-width: $tiny) {
display: grid;
grid-auto-flow: dense;
@ -35,8 +35,8 @@ $cols: 12 !default;
}
// autogrid
.autogrid,
.grid {
.autogrillade,
.grillade {
@media (min-width: $tiny) {
display: grid;
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 {
[class*="grid-#{$i}"] {
[class*="grillade-#{$i}"] {
grid-template-columns: repeat(#{$i}, 1fr);
}
}
@ -77,10 +77,10 @@ $cols: 12 !default;
/* intermediate breakpoints */
// -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)) {
@for $i from 1 through 4{
[class*="grid-"][class*="-small-#{$i}"] {
[class*="grillade-"][class*="-small-#{$i}"] {
grid-template-columns: repeat(#{$i}, 1fr);
}