Grilles
Kuik propose une grille modulable. Par défaut, elle est constituée de 12 colonnes, ainsi que de 2 colonnes supplémentaires sur chaque côté en guise de marge.
Les grilles utilisent le module CSS grid.
Utilisation
Déclaration d'une grille
Pour utiliser une disposition faisant appel à une grille, la première chose à faire est d'utiliser la classe .l-grid sur l'élément parent qui contiendra tous les contenus à
positionner dans la grille.
Kuik embarque 2 modes de positionnement de grilles :
Grille centrée avec marges
C'est l'affichage par défaut de la grille :
- Il compte 12 colonnes centrales par défaut
- 1 colonne supplémentaire est présente de chaque côté des colonnes centrales (portant le nombre total de colonnes à 14) afin de préserver des marges dont la largeur est flexible.
<div class="l-grid">
<!-- 1 colonne de marge + 12 colonnes + 1 colonne de marge -->
</div>
La mise en page de cette grille se découpe de cette façon :
1 2 3 4 5 6 ... 12 13 14
| | | |
| | ... 12 colonnes ... | |
| | | |
\ full-width ... full-width /
\ content ... content /
\ [1] / \ [2] /
[1] margin-start
[2] margin-end
Grille élargie
La grille élargie ne compte que 12 colonnes réparties sur toute la largeur de l'élément englobant. Pour utiliser cette grille élargie, l'attribut data-layout="columns" doit être
ajouté à l'élément englobant.
<div class="l-grid" data-layout="columns">
<!-- 12 colonnes -->
</div>
La mise en page de cette grille se découpe de cette façon :
1 2 3 4 5 ... 11 12
| |
| ... 12 colonnes ... |
| |
\ content ... content /
Grilles personnalisées
Il est possible de créer de nouvelles dispositions de grilles. L'utilisation de ces grilles personnalisées se fait via l'appel à l'identifiant de la grille dans l'attribut
data-layout.
Par exemple :
<div class="l-grid" data-layout="custom">
...
</div>
Par défaut, une grille personnalisée adopte la même disposition que la grille centrée avec marges.
Les détails d'implémentations sont décrits ci-après.
Positionnement des cellules
Positionnement sur les colonnes
Pour positionner une cellule (ou "case") de la grille sur les colonnes, il est possible :
- d'indiquer le nombre de colonnes occupées par la cellule (classe
.l-col-NavecNindiquant le nombre de colonnes occupées) - d'indiquer la colonne à laquelle la cellule doit être positionnée (classe
.l-pos-NavecNindiquant la colonne où doit être positionnée la cellule)
Si, par exemple, une cellule est placée à la 4e colonne (.l-pos-4) et doit occuper 3 colonnes (.l-col-3), alors la cellule occupera les colonnes 4, 5 et 6.
Attention, la numérotation des colonnes démarre à 1.
<div class="l-grid">
<div class="l-col-1">
...
</div>
<div class="l-pos-4 l-col-3">
...
</div>
...
</div>
Responsive
Il est possible d'indiquer qu'une cellule n'occupe pas le même nombre de colonnes selon la taille de l'écran. Voici comment procéder :
- Indiquer le nombre de colonnes occupées par la cellule sur l'écran le plus petit (par exemple
.l-col-12) - Puis ajouter des classes suffixées pour préciser le nombre de colonnes occupées sur les écrans plus grands (par exemple
.l-col-6°md)
Selon les exemples décrits ci-dessus, la cellule occupera toute la largeur sur les petits écrans, puis la moitié de la grille à partir des écrans de taille intermédiaire (md).
Les suffixes correspondent aux valeurs suivantes :
| Suffixe | Dimensions |
|---|---|
°xs |
>= 20rem (320px) |
°sm |
>= 36rem (576px) |
°md |
>= 48rem (768px) |
°lg |
>= 62rem (992px) |
°xl |
>= 75rem (1200px) |
°xxl |
>= 87.5rem (1400px) |
Note : le caractère ° a été choisi pour séparer la classe de son suffixe, car il est facilement accessible sur le clavier et n'a pas besoin d'être échappé en CSS.
Positionnement personnalisé
Dans les grilles personnalisées, il est possible d'utiliser la classe .l-cell sur la cellule. Cela lui permet d'adopter tous les styles nécessaires, dont 2 variables :
| Variable | Valeur par défaut | Description |
|---|---|---|
--cell-column-start |
content |
Nom de la colonne où la cellule commence |
--cell-column-end |
content |
Nom de la colonne où la cellule s'arrête |
<div class="l-grid" data-layout="custom">
<div class="l-cell" data-slot="0">
...
</div>
<div class="l-cell" data-slot="1">
...
</div>
...
</div>
[data-slot="0"] {
--cell-column-start: full-width;
--cell-column-end: full-width;
}
/* ... */
Note : la numérotation automatique des slots dans KSup commence à 0.
Personnalisation d'une grille
Pour les grilles personnalisées (reconnaissable à l'attribut data-layout="..."), certaines variables sont accessibles en CSS :
| Variable CSS | Valeur par défaut | Utilisation |
|---|---|---|
--grid-columns |
12 | Nombre de colonnes de la grille |
--grid-min-margin-size |
var(--space-4) |
Marge minimale sur les côtés de la grille centrale |
--grid-max-container-size |
var(--maxwidth-lg) |
Largeur maximale du contenu central |
--grid-layout |
(voir code CSS) | Définition de l'agencement de la grille |
--grid-column-gap |
var(--space-0) |
Espacement entre les colonnes (gouttières) |
--grid-row-gap |
var(--space-0) |
Espacement entre les lignes |
--grid-offset |
1 | Nombre de colonnes à rajouter automatiquement quand on utilise .l-pos-… |
Note : par défaut, le paramètre --grid-offset est positionné à 1, car la première colonne de la zone centrale de la grille par défaut démarre en réalité à la 2e position.
La première colonne étant occupée par la marge.
Personnalisation des cellules
Enfin, dans chaque cellule définie, il est possible de positionner les éléments enfants sur la grille à l'aide de l'affichage en subgrid.
Dans l'exemple précédent, voici comment l'implémentation a été réalisée :
<div class="l-grid" data-layout="example">
<div class="l-cell" data-slot="1"><!-- subgrid -->
<div class="card">
<div class="card__content">...</div>
</div>
</div>
<div class="l-cell" data-slot="2"><!-- subgrid -->
<div class="card">
<img class="card__background" src="/images/logo_anim_480p.gif" alt="">
<div class="card__content">...</div>
</div>
</div>
...
</div>
[data-layout="example"] .card {
display: contents; /* Astuce ici pour hériter de l'affichage subgrid de .l-cell */
}
[data-layout="example"] [data-slot="1"] {
--cell-column-start: full-width;
--cell-column-end: full-width;
}
[data-layout="example"] [data-slot="1"] .card__content {
grid-column: content;
padding: var(--space-4);
}
[data-layout="example"] [data-slot="2"] {
--cell-column-start: full-width;
position: relative;
}
[data-layout="example"] [data-slot="2"] .card__background {
block-size: 100%;
inline-size: 100%;
object-fit: cover;
object-position: center;
position: absolute;
z-index: -1;
}
[data-layout="example"] [data-slot="2"] .card__content {
grid-column: content;
padding: var(--space-4);
}
/* ... */
Exemples de grilles
Positionnement basique
Grille à colonnes
Grille responsive
Grilles imbriquées
Positionnement manuel des cellules
Grille avec colonnes automatiques
3 colonnes, 3 cellules
3 colonnes, 4 cellules
12 colonnes, 3 cellules
12 colonnes, 12 cellules
Exemple de grille personnalisée
Utilitaire affichage "flexbox"
Un ensemble de classes utilitaires dédiées à l'affichage "flexbox"
Pour utiliser l'affichage "flexbox" sur un élément, utiliser la classe .l-flex.
Direction de l'affichage
| Classe | Description |
|---|---|
.l-flex-row |
Agencement horizontal, dans le sens de lecture |
.l-flex-row-reverse |
Agencement horizontal, dans le sens inverse de la lecture |
.l-flex-column |
Agencement vertical, dans le sens de lecture |
.l-flex-column-reverse |
Agencement vertical, dans le sens inverse de la lecture |
.l-flex-wrap |
Utiliser autant de lignes (ou de colonnes) que nécessaire |
.l-flex-nowrap |
Tout consenser sur une seule ligne (ou colonne) |
Justification des éléments
La justification des éléments permet de les agencer au sein d'une même ligne (ou colonne selon la direction d'affichage choisie).
| Classe | Description |
|---|---|
.l-flex-start |
Aligner les éléments au début |
.l-flex-end |
Aligner les éléments à la fin |
.l-flex-center |
Aligner les éléments au centre |
.l-flex-space-between |
Maximiser l'espace entre les éléments |
.l-flex-space-around |
Chaque élément possède une marge maximale |
.l-flex-space-evenly |
Chaque espace autour des éléments est le même |
Alignement du contenu
L'alignement du contenu permet d'aligner verticalement (ou horizontalement selon la direction d'affichage choisie) l'ensemble des éléments au sein du conteneur.
| Classe | Description |
|---|---|
.l-flex-content-start |
Le contenu est aligné au début du bloc |
.l-flex-content-end |
Le contenu est aligné à la fin du bloc |
.l-flex-content-center |
Le contenu est aligné au centre du bloc |
.l-flex-content-stretch |
Le contenu s'étire sur tout le bloc |
.l-flex-content-space-between |
Maximiser l'espace entre les lignes (ou colonnes) |
.l-flex-content-space-around |
Chaque ligne possède une marge verticale (ou horizontale) maximale |
.l-flex-content-space-evenly |
Chaque espace autour des lignes est le même |
Alignement des éléments
L'alignement des éléments permet d'aligner verticalement (ou horizontalement selon la direction d'affichage choisie) les éléments au sein d'une même ligne (ou colonne).
| Classe | Description |
|---|---|
.l-flex-items-start |
Les éléments sont alignés au début |
.l-flex-items-end |
Les éléments sont alignés à la fin |
.l-flex-items-center |
Les éléments sont alignés au centre |
.l-flex-items-stretch |
Les élément sont étirés sur la ligne (ou la colonne) |
Dimension des éléments
Les classes de dimensionnement des éléments permettent de leur attribuer des comportements spécifiques liés à leur taille quand ils se trouvent sur une même ligne (ou colonne).
| Classe | Description |
|---|---|
.l-flex-shrink-1 |
Permettre la réduction de l'élément |
.l-flex-shrink-0 |
Ne pas permettre la réduction de l'élément |
.l-flex-grow-1 |
Agrandir l'élément autant que possible |
.l-flex-grow-0 |
Ne pas agrandir l'élément autant que possible |
Utilitaires divers
Il est possible de faire en sorte qu'un élément de la page s'étire en hauteur pour que la page occupe constamment 100% de la hauteur de l'écran, au minimum, même s'il n'y a pas assez de contenu.
Pour cela, 2 classes sont à utiliser :
.l-expanded-body: Élément parent qui doit occuper, au minimum, 100% de la hauteur de l'écran.l-expanded-body__expander: Élément enfant qui doit être étiré si nécessaire
<body class="l-expanded-body">
<header> ... </header>
<main class="l-expanded-body__expander">
...
</main>
<footer> ... </footer>
</body>