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

préfixage des variables de grille

This commit is contained in:
Raphael Goetter 2016-05-16 17:20:28 +02:00
parent 602bd0a857
commit 930be0cfaa
4 changed files with 33 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
changelog.md
View File

@ -7,6 +7,7 @@
- adaptation des variables de breakpoint pour les rendre compatibles avec include-media - adaptation des variables de breakpoint pour les rendre compatibles avec include-media
- adaptation des fichiers gulpfile, package.json et bower.json - adaptation des fichiers gulpfile, package.json et bower.json
- grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables) - grille "grillade" à présent en mobile first (par défaut 1 colonne sur "tiny", 2 colonnes sur "small", valeurs modifiables)
- nommage de variables préfixé pour plus de maintenabilité : `$gutter` -> `$grid-gutter`, `$number` -> `$grid-number`, `$left` -> `$grid-left` et `$right` -> `$grid-right`
- mise à jour de la documentation - mise à jour de la documentation
- ajout de commentaires dans les grilles - ajout de commentaires dans les grilles

10
doc/03-grilles.md
View File

@ -90,7 +90,7 @@ Les **enfants** directs d'un conteneur, quels qu'ils soient, se répartissent au
Les grilles KNACSS sont mobile-first et "plus ou moins" responsive naturellement, dans la mesure où par défaut : Les grilles KNACSS sont mobile-first et "plus ou moins" responsive naturellement, dans la mesure où par défaut :
- elles s'affichent systématiquement sur une seule colonne sur un très petit écran ("tiny"), - elles s'affichent systématiquement sur une seule colonne sur un très petit écran ("tiny"),
- elles s'affichent par défaut en 2 colonnes sur un écran de taille réduite ("small"), - elles s'affichent par défaut en 2 colonnes sur un écran de taille réduite ("small"),
- elles occupent le nombre de colonnes définies dans la variable `$number` sur un écran suffisamment large. - elles occupent le nombre de colonnes définies dans la variable `$grid-number` sur un écran suffisamment large.
Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide du mot-clé : `-small-*`. Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide du mot-clé : `-small-*`.
Ce mot-clé définit le nombre de colonnes lorsque le point de rupture se situe au-delà de la taille "tiny" et en-deçà de la taille "medium". Ce mot-clé définit le nombre de colonnes lorsque le point de rupture se situe au-delà de la taille "tiny" et en-deçà de la taille "medium".
@ -200,10 +200,10 @@ KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS
Les variables de configuration des grilles se trouvent dans le fichier `sass/_config-variables.scss` : Les variables de configuration des grilles se trouvent dans le fichier `sass/_config-variables.scss` :
```css ```css
$gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem $grid-gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
$number: 4 !default; // number of equal columns $grid-number: 4 !default; // number of equal columns
$left: 2 !default; // left side of uneven columns $grid-left: 2 !default; // left side of uneven columns
$right: 1 !default; // right side of uneven columns $grid-right: 1 !default; // right side of uneven columns
``` ```
Il vous suffit de modifier les valeurs de ces variables de config pour répercuter vos préférences sur l'ensemble du projet dès que vos fichiers Sass seront compilés en CSS. Il vous suffit de modifier les valeurs de ces variables de config pour répercuter vos préférences sur l'ensemble du projet dès que vos fichiers Sass seront compilés en CSS.

8
sass/_config-variables.scss
View File

@ -61,10 +61,10 @@ $breakpoints: (
); );
// grids variables (choose unit you prefer) // grids variables (choose unit you prefer)
$gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem $grid-gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
$number: 4 !default; // number of equal columns $grid-number: 4 !default; // number of equal columns
$left: 2 !default; // left side of uneven columns $grid-left: 2 !default; // left side of uneven columns
$right: 1 !default; // right side of uneven columns $grid-right: 1 !default; // right side of uneven columns
//kna-namespace (default : null) //kna-namespace (default : null)
$kna-namespace: null !default; $kna-namespace: null !default;

46
sass/_layout-grids.scss
View File

@ -21,41 +21,41 @@
display: flex; display: flex;
flex-direction: row; flex-direction: row;
flex-wrap: wrap; flex-wrap: wrap;
margin-left: -$gutter; margin-left: -$grid-gutter;
} }
/* grid childs */ /* grid childs */
[class*="#{$kna-namespace}grid-"] > * { [class*="#{$kna-namespace}grid-"] > * {
box-sizing: border-box; box-sizing: border-box;
flex: 0 0 auto; flex: 0 0 auto;
width: calc(100% - #{$gutter} - .01px);// @bugfix IE https://github.com/alsacreations/KNACSS/issues/133; width: calc(100% - #{$grid-gutter} - .01px);// @bugfix IE https://github.com/alsacreations/KNACSS/issues/133;
min-width: 0; min-width: 0;
min-height: 0; min-height: 0;
margin-left: $gutter; margin-left: $grid-gutter;
@include media('>tiny-screen', '<=small-screen') { @include media('>tiny-screen', '<=small-screen') {
& { & {
width: calc(100% * 1 / 2 - #{$gutter} - .01px); width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
} }
&.flex-item-double { &.flex-item-double {
width: calc(100% - #{$gutter} - .01px); width: calc(100% - #{$grid-gutter} - .01px);
} }
} }
} }
// Sass mixins for *equal* columns grid container // Sass mixins for *equal* columns grid container
// example : .grid-perso { @include grid(12); } // example : .grid-perso { @include grid(12); }
@mixin grid($number:$number,$newgutter:$gutter) { @mixin grid($grid-number:$grid-number,$newgutter:$grid-gutter) {
@if $newgutter != $gutter { @if $newgutter != $grid-gutter {
margin-left: -$newgutter; margin-left: -$newgutter;
} }
& > * { & > * {
width: calc(100% * 1 / #{$number} - #{$newgutter} - .01px); width: calc(100% * 1 / #{$grid-number} - #{$newgutter} - .01px);
@if $newgutter != $gutter { @if $newgutter != $grid-gutter {
margin-left: $newgutter; margin-left: $newgutter;
} }
} }
& > .#{$kna-namespace}flex-item-double { & > .#{$kna-namespace}flex-item-double {
width: calc(100% * 2 / #{$number} - #{$newgutter}); width: calc(100% * 2 / #{$grid-number} - #{$newgutter});
} }
} }
@ -72,51 +72,51 @@
// example : .grid-4-small-2 will be 1 column (tiny) then 2 columns (small) then 4 columns // example : .grid-4-small-2 will be 1 column (tiny) then 2 columns (small) then 4 columns
@include media('>tiny-screen', '<=small-screen') { @include media('>tiny-screen', '<=small-screen') {
[class*="-small-4"] > * { [class*="-small-4"] > * {
width: calc(100% * 1 / 4 - #{$gutter} - .01px); width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px);
} }
[class*="-small-4"] > .flex-item-double { [class*="-small-4"] > .flex-item-double {
width: calc(100% * 1 / 2 - #{$gutter} - .01px); width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
} }
[class*="-small-3"] > * { [class*="-small-3"] > * {
width: calc(100% * 1 / 3 - #{$gutter} - .01px); width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px);
} }
[class*="-small-3"] > .flex-item-double { [class*="-small-3"] > .flex-item-double {
width: calc(100% * 2 / 3 - #{$gutter} - .01px); width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
} }
[class*="-small-2"] > * { [class*="-small-2"] > * {
width: calc(100% * 1 / 2 - #{$gutter} - .01px); width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
} }
[class*="-small-2"] > .flex-item-double { [class*="-small-2"] > .flex-item-double {
width: calc(100% - #{$gutter} - .01px); width: calc(100% - #{$grid-gutter} - .01px);
} }
[class*="-small-1"] > * { [class*="-small-1"] > * {
width: calc(100% - #{$gutter} - .01px); width: calc(100% - #{$grid-gutter} - .01px);
} }
[class*="-small-1"] > .flex-item-double { [class*="-small-1"] > .flex-item-double {
width: calc(100% - #{$gutter} - .01px); width: calc(100% - #{$grid-gutter} - .01px);
} }
} }
// Sass mixins for *unequal* columns grid container // Sass mixins for *unequal* columns grid container
// example : .grid-perso { @include uneven-grid(2, 1); } // example : .grid-perso { @include uneven-grid(2, 1); }
@mixin uneven-grid($left:$left, $right:$right, $newgutter:$gutter) { @mixin uneven-grid($grid-left:$grid-left, $grid-right:$grid-right, $newgutter:$grid-gutter) {
@if $newgutter != $gutter { @if $newgutter != $grid-gutter {
margin-left: -$newgutter; margin-left: -$newgutter;
} }
> * { > * {
@if $newgutter != $gutter { @if $newgutter != $grid-gutter {
margin-left: $newgutter; margin-left: $newgutter;
width: calc(100% - #{$newgutter}); width: calc(100% - #{$newgutter});
} }
} }
@include media('>small-screen') { @include media('>small-screen') {
& :nth-child(odd) { & :nth-child(odd) {
$size: ($left / ($left + $right)) * 100%; $size: ($grid-left / ($grid-left + $grid-right)) * 100%;
width: calc(#{$size} - #{$newgutter}); width: calc(#{$size} - #{$newgutter});
} }
& :nth-child(even) { & :nth-child(even) {
$size: ($right / ($left + $right)) * 100%; $size: ($grid-right / ($grid-left + $grid-right)) * 100%;
width: calc(#{$size} - #{$newgutter}); width: calc(#{$size} - #{$newgutter});
} }
} }