see changelog
This commit is contained in:
Raphael Goetter
parent
2022f8bd79
commit
7c9cf52761
38 changed files with 793 additions and 5079 deletions
|
|
@ -3,8 +3,8 @@
|
|||
Une grille "KNACSS" a les caractéristiques globales suivantes :
|
||||
|
||||
- Les largeurs des colonnes sont fluides (définies en pourcentage du parent),
|
||||
- Une gouttière sépare chaque colonne (la valeur de cette gouttière est modifiable dans les fichiers `less/knacss.less` ou `sass/knacss.scss`),
|
||||
- Par défaut, une grille n'est pas responsive mais il est très simple d'activer cette fonctionnalité,
|
||||
- Une gouttière sépare chaque colonne (la valeur de cette gouttière est modifiable dans le fichier `sass/knacss.scss`),
|
||||
- Par défaut, une grille est "mobile-first" (une seule colonne sur petit écran, 2 colonnes sur écran "small") et il est très simple d'activer la fonctionnalité "Responsive",
|
||||
- La technologie employée est [CSS3 Flexbox](http://www.alsacreations.com/tuto/lire/1493-css3-flexbox-layout-module.html).
|
||||
|
||||
Il existe deux types principaux de systèmes de grilles dans KNACSS :
|
||||
|
|
@ -12,18 +12,17 @@ Il existe deux types principaux de systèmes de grilles dans KNACSS :
|
|||
- Les grilles à colonnes égales
|
||||
- Les grilles à colonnes inégales
|
||||
|
||||
Dans les deux cas, la technique associée depuis KNACSS v4 pour concevoir les grilles est **CSS3 Flexbox**, ce qui signifie que la compatibilité de **cette fonctionnalité sera réservée aux [navigateurs modernes](http://caniuse.com/#search=flexbox)** (IE10, Android 4.4+ et tous les autres). Note : une alternative, basée sur `inline-block` est cependant proposée automatiquement pour les anciens navigateurs (IE8, Android 2).
|
||||
Dans les deux cas, la technique associée depuis KNACSS v4 pour concevoir les grilles est **CSS3 Flexbox**, ce qui signifie que la compatibilité de **cette fonctionnalité sera réservée aux [navigateurs modernes](http://caniuse.com/#search=flexbox)** (IE10, Android 4.4+ et tous les autres).
|
||||
|
||||
Quelques exemples pour vous échauffer :
|
||||
- `<div class="grid-4">` : grille de 4 colonnes également réparties
|
||||
- `<div class="grid-2-1">` : grille de répartition 2/3 - 1/3
|
||||
- `<div class="grid-3-tiny-1">` : grille de 3 colonnes égales, puis 1 colonne sur très petit écran
|
||||
- `<div class="grid-6-small-3-tiny-2">` : grille de 6 colonnes, puis 3 colonnes sur écran "small", puis 2 colonnes sur écran "tiny".
|
||||
- `<div class="grid-3-small-1">` : grille de 3 colonnes égales, puis 1 colonne sur écran "small"
|
||||
- `<div class="grid-6-small-3">` : grille de 6 colonnes, puis 3 colonnes sur écran "small"
|
||||
- note : sur écran très petit ("tiny"), il n'y aura systématiquement qu'une seule colonne.
|
||||
|
||||
Et maintenant passons aux explications !
|
||||
|
||||
**NOTE pour les utilisateurs de LESS / Sass :** par défaut, les grilles sont activées dans KNACSS. Si vous avez le moindre souci, vérifiez que `@import "_03-grids";` est présent et non commenté dans votre fichier `less/knacss.less` ou `sass/knacss.scss`).
|
||||
|
||||
## Précautions à prendre
|
||||
|
||||
Qui dit CSS3 dit précautions à prendre.
|
||||
|
|
@ -31,7 +30,7 @@ La bonne nouvelle est que Flexbox est plutôt bien reconnu par l'ensemble des na
|
|||
|
||||
Au sein de la version CSS de KNACSS, l'ensemble des préfixes est présent, **vous n'avez donc pas à vous en soucier**.
|
||||
|
||||
**Par contre, dans les versions LESS et Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
|
||||
**Par contre, dans la version Sass de KNACSS, les préfixes n'apparaissent pas** pour ne pas polluer la lecture du fichier de travail. **Il vous sera donc nécessaire de les ajouter**, de préférence automatiquement grâce à un plugin ou aux excellents outils que sont [autoprefixer](https://github.com/postcss/autoprefixer) ou [pleeease](http://pleeease.io/).
|
||||
|
||||
## Exemple concret
|
||||
|
||||
|
|
@ -86,6 +85,26 @@ Les **enfants** directs d'un conteneur, quels qu'ils soient, se répartissent au
|
|||
- Tester une [grille simple en ligne](http://codepen.io/raphaelgoetter/pen/GAenb?editors=110) (Codepen).
|
||||
- Tester une [grille de largeur inégale en ligne](http://codepen.io/raphaelgoetter/pen/jmAkx?editors=110) (Codepen).
|
||||
|
||||
## Grilles responsive
|
||||
|
||||
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.
|
||||
|
||||
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".
|
||||
|
||||
La grille ci-dessous s'affichera en 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran :
|
||||
```html
|
||||
<div class="grid-4-small-2">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div>un 2è div ou n'importe quoi d'autre</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Offsets
|
||||
|
||||
Il vous est très facile de "pousser" un élément à droite ou à gauche de sa ligne dans la grille, et créer ainsi un espacement volontaire, ce que l'on appelle "offset".
|
||||
|
|
@ -147,22 +166,7 @@ HTML :
|
|||
Résultat :
|
||||
|
||||
|
||||
## Grilles responsive
|
||||
|
||||
Vous pouvez définir le nombre de colonnes selon les tailles d'écran à l'aide des mots-clés suivants :
|
||||
|
||||
- `-small-*` : définit le nombre de colonnes lorsque le point de rupture atteint la valeur de la variable `small-screen`
|
||||
- `-tiny-*` : définit le nombre de colonnes lorsque le point de rupture atteint la valeur de la variable `tiny-screen`
|
||||
|
||||
La grille ci-dessous s'affichera en 4 colonnes sur grand écran, puis en 2 colonnes sur un écran réduit, puis en une seule colonne sur petit écran :
|
||||
```html
|
||||
<div class="grid-4-small-2-tiny-1">
|
||||
<div>un div ou n'importe quoi d'autre</div>
|
||||
<div>un 2è div ou n'importe quoi d'autre</div>
|
||||
<div>un 3è div ou n'importe quoi d'autre</div>
|
||||
<div>etc.</div>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Grilles imbriquées
|
||||
|
||||
|
|
@ -193,32 +197,32 @@ KNACSS est pensé pour être utilisé à l'aide de preprocesseurs tels que LESS
|
|||
|
||||
### Modifier les variables globales
|
||||
|
||||
Les variables de configuration des grilles se trouvent dans le fichier `less/_00-config.less` (pour les utilisateurs de LESS) et `sass/_00-config.scss` (en version Sass) :
|
||||
Les variables de configuration des grilles se trouvent dans le fichier `sass/_config-variables.scss` :
|
||||
|
||||
```css
|
||||
@gutter: 1em;
|
||||
@number: 4; // for equal columns
|
||||
@left: 2; // left side of uneven columns
|
||||
@right: 1; // right side of uneven columns
|
||||
$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
|
||||
```
|
||||
|
||||
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 LESS/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.
|
||||
|
||||
### Générer des grilles personnalisées
|
||||
|
||||
Indépendamment des variables de configuration, rien de vous empêche de créer une grille personnalisée en incluant directement l'un des deux mixins possibles dans vos éléments :
|
||||
|
||||
- `.grid(n)` pour personnaliser une grille de colonnes **égales**. Les arguments sont "n" = nombre de colonnes
|
||||
- `.grid(n,g)` pour personnaliser une grille de colonnes **égales**. Les arguments sont "n" = nombre de colonnes et "g" = largeur de la grille
|
||||
- `.uneven-grid(l,r)` pour personnaliser une grille de colonnes **inégales**. Les arguments sont "l" = pour le ratio de la colonne de gauche, "r" = pour le ratio de la colonne de droite
|
||||
|
||||
#### Grille de colonnes égales en LESS
|
||||
#### Grille de colonnes égales en Sass
|
||||
|
||||
**Objectif : je souhaite créer un mixin sur mon élément `.grid-container` afin que celui-ci crée une grille de 6 colonnes égales**
|
||||
|
||||
LESS (fichier de développement) :
|
||||
Sass (fichier de développement) :
|
||||
```css
|
||||
.grid-container {
|
||||
.grid(6);
|
||||
@include grid(4, 12px)
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -228,17 +232,14 @@ CSS compilé (sans Autoprefixer) :
|
|||
|
||||
```css
|
||||
.grid-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -1em;
|
||||
margin-left: -12px;
|
||||
}
|
||||
.grid-container > * {
|
||||
flex: 0 0 auto;
|
||||
width: 16.66666667%;
|
||||
display: block; /* IE fix */
|
||||
border-left: 1em solid transparent;
|
||||
background-clip: padding-box !important; /* no background on border */
|
||||
width: calc(100% * 1 / 4 - 12px - .01px);
|
||||
margin-left: 12px;
|
||||
}
|
||||
.grid-container > .flex-item-double {
|
||||
width: calc(100% * 2 / 4 - 12px);
|
||||
}
|
||||
...
|
||||
```
|
||||
|
|
@ -251,7 +252,7 @@ LESS (fichier de développement) :
|
|||
|
||||
```css
|
||||
.grid-truc {
|
||||
.uneven-grid(2, 1);
|
||||
@include uneven-grid(2, 1);
|
||||
}
|
||||
```
|
||||
|
||||
|
|
@ -261,22 +262,13 @@ LESS (fichier de développement) :
|
|||
CSS compilé (sans Autoprefixer) :
|
||||
|
||||
```css
|
||||
.grid-truc {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: wrap;
|
||||
margin-left: -1em;
|
||||
}
|
||||
.grid-truc > * {
|
||||
display: block; /* IE fix */
|
||||
border-left: 1em solid transparent;
|
||||
background-clip: padding-box !important; /* no background on border */
|
||||
}
|
||||
.grid-truc > *:nth-child(odd) {
|
||||
width: 66.66666667%;
|
||||
}
|
||||
.grid-truc > *:nth-child(even) {
|
||||
width: 33.33333333%;
|
||||
@media (min-width: 641px) {
|
||||
.grid-truc :nth-child(odd) {
|
||||
width: calc(66.66667% - 2rem);
|
||||
}
|
||||
.grid-truc :nth-child(even) {
|
||||
width: calc(33.33333% - 2rem);
|
||||
}
|
||||
}
|
||||
...
|
||||
```
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue