préfixage des variables de grille
This commit is contained in:
Raphael Goetter
parent
602bd0a857
commit
930be0cfaa
4 changed files with 33 additions and 32 deletions
|
|
@ -7,6 +7,7 @@
|
|||
- adaptation des variables de breakpoint pour les rendre compatibles avec include-media
|
||||
- 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)
|
||||
- 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
|
||||
- ajout de commentaires dans les grilles
|
||||
|
||||
|
|
|
|||
|
|
@ -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 :
|
||||
- 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 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-*`.
|
||||
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` :
|
||||
|
||||
```css
|
||||
$gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
$number: 4 !default; // number of equal columns
|
||||
$left: 2 !default; // left side of uneven columns
|
||||
$right: 1 !default; // right side of uneven columns
|
||||
$grid-gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-number: 4 !default; // number of equal columns
|
||||
$grid-left: 2 !default; // left 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.
|
||||
|
|
|
|||
|
|
@ -61,10 +61,10 @@ $breakpoints: (
|
|||
);
|
||||
|
||||
// grids variables (choose unit you prefer)
|
||||
$gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
$number: 4 !default; // number of equal columns
|
||||
$left: 2 !default; // left side of uneven columns
|
||||
$right: 1 !default; // right side of uneven columns
|
||||
$grid-gutter: 2rem !default; // gutter value for grid layouts. Unit can be: %, px, em, rem
|
||||
$grid-number: 4 !default; // number of equal columns
|
||||
$grid-left: 2 !default; // left side of uneven columns
|
||||
$grid-right: 1 !default; // right side of uneven columns
|
||||
|
||||
//kna-namespace (default : null)
|
||||
$kna-namespace: null !default;
|
||||
|
|
|
|||
|
|
@ -21,41 +21,41 @@
|
|||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -$gutter;
|
||||
margin-left: -$grid-gutter;
|
||||
}
|
||||
|
||||
/* grid childs */
|
||||
[class*="#{$kna-namespace}grid-"] > * {
|
||||
box-sizing: border-box;
|
||||
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-height: 0;
|
||||
margin-left: $gutter;
|
||||
margin-left: $grid-gutter;
|
||||
@include media('>tiny-screen', '<=small-screen') {
|
||||
& {
|
||||
width: calc(100% * 1 / 2 - #{$gutter} - .01px);
|
||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
&.flex-item-double {
|
||||
width: calc(100% - #{$gutter} - .01px);
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Sass mixins for *equal* columns grid container
|
||||
// example : .grid-perso { @include grid(12); }
|
||||
@mixin grid($number:$number,$newgutter:$gutter) {
|
||||
@if $newgutter != $gutter {
|
||||
@mixin grid($grid-number:$grid-number,$newgutter:$grid-gutter) {
|
||||
@if $newgutter != $grid-gutter {
|
||||
margin-left: -$newgutter;
|
||||
}
|
||||
& > * {
|
||||
width: calc(100% * 1 / #{$number} - #{$newgutter} - .01px);
|
||||
@if $newgutter != $gutter {
|
||||
width: calc(100% * 1 / #{$grid-number} - #{$newgutter} - .01px);
|
||||
@if $newgutter != $grid-gutter {
|
||||
margin-left: $newgutter;
|
||||
}
|
||||
}
|
||||
& > .#{$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
|
||||
@include media('>tiny-screen', '<=small-screen') {
|
||||
[class*="-small-4"] > * {
|
||||
width: calc(100% * 1 / 4 - #{$gutter} - .01px);
|
||||
width: calc(100% * 1 / 4 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-4"] > .flex-item-double {
|
||||
width: calc(100% * 1 / 2 - #{$gutter} - .01px);
|
||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-3"] > * {
|
||||
width: calc(100% * 1 / 3 - #{$gutter} - .01px);
|
||||
width: calc(100% * 1 / 3 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-3"] > .flex-item-double {
|
||||
width: calc(100% * 2 / 3 - #{$gutter} - .01px);
|
||||
width: calc(100% * 2 / 3 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-2"] > * {
|
||||
width: calc(100% * 1 / 2 - #{$gutter} - .01px);
|
||||
width: calc(100% * 1 / 2 - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-2"] > .flex-item-double {
|
||||
width: calc(100% - #{$gutter} - .01px);
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-1"] > * {
|
||||
width: calc(100% - #{$gutter} - .01px);
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
[class*="-small-1"] > .flex-item-double {
|
||||
width: calc(100% - #{$gutter} - .01px);
|
||||
width: calc(100% - #{$grid-gutter} - .01px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Sass mixins for *unequal* columns grid container
|
||||
// example : .grid-perso { @include uneven-grid(2, 1); }
|
||||
@mixin uneven-grid($left:$left, $right:$right, $newgutter:$gutter) {
|
||||
@if $newgutter != $gutter {
|
||||
@mixin uneven-grid($grid-left:$grid-left, $grid-right:$grid-right, $newgutter:$grid-gutter) {
|
||||
@if $newgutter != $grid-gutter {
|
||||
margin-left: -$newgutter;
|
||||
}
|
||||
> * {
|
||||
@if $newgutter != $gutter {
|
||||
@if $newgutter != $grid-gutter {
|
||||
margin-left: $newgutter;
|
||||
width: calc(100% - #{$newgutter});
|
||||
}
|
||||
}
|
||||
@include media('>small-screen') {
|
||||
& :nth-child(odd) {
|
||||
$size: ($left / ($left + $right)) * 100%;
|
||||
$size: ($grid-left / ($grid-left + $grid-right)) * 100%;
|
||||
width: calc(#{$size} - #{$newgutter});
|
||||
}
|
||||
& :nth-child(even) {
|
||||
$size: ($right / ($left + $right)) * 100%;
|
||||
$size: ($grid-right / ($grid-left + $grid-right)) * 100%;
|
||||
width: calc(#{$size} - #{$newgutter});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue