L'un des changements majeurs dans le futur Joomla 4 est l'adoption de CSS Grid.
CSS Grid révolutionne l'industrie de la conception de sites web et va rapidement devenir une norme sur Internet.
Joomla conservera probablement Bootstrap 4 pour des raisons de rétrocompatibilité. Cependant, le futur est clair. À long terme, l'avenir de la conception du frontend de Joomla sera CSS Grid. Vous pouvez déjà voir CSS Grid en action dans Cassiopeia, le template par défaut de Joomla 4.
Dans ce blog, je vais vous aider à maîtriser les concepts clés qui se cachent derrière CSS Grid.
CSS Grid est une nouvelle technologie CSS dans sa première spécification. Ce système permet aux concepteurs et aux développeurs de placer des éléments (éléments HTML) dans une mise en page basée sur une grille en utilisant des colonnes et des lignes.
Cela peut ressembler à un système de tableau, mais CSS Grid offre bien plus de fonctionnalités qu’un simple tableau.
CSS Grid vous permet de disposer les éléments indépendamment de leur ordre dans le document source.
Partie 1. Le concept du CSS Grid
Le concept de base de CSS Grid est de prendre un élément HTML et de le diviser en lignes et colonnes afin de le transformer en une grille.
Vous pouvez ensuite placer les enfants directs de cet élément n'importe où sur la grille.
Les éléments de la grille doivent être des enfants directs du conteneur principal de la grille. Ce sont les éléments disponibles pour être positionnés sur la grille.
Regardez l'image ci-dessous.
Si vous déclarez le conteneur div avec la grille class=”main”, seuls les éléments header et body seront considérés comme des éléments de la grille.
Les éléments <h1> et <article> sont contenus dans les éléments de la grille mais ne sont pas eux-mêmes des éléments de la grille.
Un élément de grille peut également être un conteneur de grille. Cela signifie que vous pouvez imbriquer des grilles à l'intérieur de grilles, indéfiniment.
Vous pouvez également insérer un conteneur flexible dans un conteneur de la grille ou vice versa.
Cela offre beaucoup de flexibilité lors de la conception.
Vous pouvez mettre en forme tous les éléments d'une grille car ils sont tous déclarés dans le code HTML de votre document.
Vous ne serez pas en mesure de styliser la grille elle-même - elle existe uniquement en CSS.
Partie 2. Terminologie de base du CSS Grid
Ligne de la grille
C'est l'unité la plus basique de la grille. Les composants d'une grille sont définis en plaçant une ou plusieurs lignes de grille.
Les lignes peuvent être référencées par un numéro ou vous pouvez même leur donner un nom personnalisé.
Ceci est très pratique lorsque vous travaillez avec des mises en page plus complexes.
Conteneur de grille
C'est l'élément d'emballage pour tous les éléments de la grille. Vous définissez un conteneur de grille avec une propriété CSS.
Exemple :
.main {
display: grid;
}
Cellule de grille
Une cellule de grille est la plus petite surface entourée de 4 lignes de la grille. Elle est analogue à une cellule de feuille de calcul.
Zone de grille
La zone de grille est une forme rectangulaire (ou carrée) composée de plusieurs cellules de grille.
Notez que le module CSS Grid actuel vous permet de définir des zones de forme rectangulaire ou carrée, mais vous ne pourrez pas en définir de forme en "L" par exemple.
Grid Track
Grid Track est un terme générique pour identifier les lignes ou les colonnes.
Espace de grille
L’espace de grille est l'espace entre les cellules de grille ou les zones de grille. Il correspond au margin.
Vous ne pouvez pas placer de contenu dans l'espace de grille. Par défaut, l’espace de grille est de 0, ce qui signifie qu'il n'y a pas de séparation entre les cellules d'une grille.
L'écart est défini avec la propriété CSS grid-gap.
Partie 3. Création de votre première grille CSS
Maintenant que vous avez appris les concepts de base du CSS Grid, il est temps de construire votre première grille.
La grille contiendra 9 éléments.
Chacun de ces éléments sera présenté dans une grille 3x3.
Chaque colonne aura une largeur de 100px.
Les éléments de la grille seront séparés les uns des autres par un écart de 20px.
Le code HTML
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
Comme vous pouvez le voir, ce n'est qu'un div contenant 9 div.
Le code CSS
Ajoutez un style de base :
/* GLOBAL STYLES */
* {
box-sizing: border-box;
}
body {
background-color: #AAA;
background-size: 340px, auto;
margin: 50px;
}
/* Each item in the grid contains numbers */
.item {
/* Center the contents of the grid items. Making each grid item a Flex Container */
display: flex;
/* Horizontal and Vertical centering */
justify-content: center;
align-items: center;
border: 5px solid #87b5ff;
border-radius: 3px;
font-size: 2em;
font-family: sans-serif;
font-weight: bold;
background-color: #1c57b5
}
Chaque élément à l'intérieur du conteneur a été défini comme un conteneur flexible. Cela nous permet de centrer facilement le contenu horizontalement et verticalement.
Ce conteneur flexible fonctionnera à l'intérieur d'un conteneur de la grille sans problèmes. La sortie dans votre navigateur ressemblera à l'image ci-dessous.
Il est temps maintenant de déclarer le conteneur de la grille :
.container {
display: grid;
}
Ce code transforme le div avec la classe container en un conteneur de grille et tous les éléments enfants à l'intérieur en éléments de la grille.
Si vous regardez votre navigateur, vous ne verrez aucun changement.
C'est parce que vous avez déjà défini un conteneur de grille, mais vous n'avez pas encore spécifié comment les éléments à l'intérieur de ce conteneur seront placés.
Ajoutez la ligne suivante au code et enregistrez le fichier :
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
}
La propriété grid-template-columns vous permet de définir les colonnes de la grille.
Dans cet exemple très basique, vous venez de définir explicitement 3 colonnes. Chacune de ces colonnes aura une largeur de 100px.
Notez que vous n'avez pas défini les lignes dans la grille. Celles-ci ont été ajoutées de manière implicite par le navigateur.
En règle générale, si vous définissez les colonnes ou les lignes d'une grille, cela s'appelle "Explicit Grid". Si, par contre, les éléments de la grille sont placés automatiquement par le navigateur, on appelle cela "Implicit Grid".
Notez également qu'il n'y a pas de séparation entre les éléments de la grille.
Cette séparation est ajoutée avec les propriétés grid-column-gap et grid-row-gap.
Il y a un raccourci qui intègre les deux propriétés : grid-gap.
.container {
display: grid;
grid-template-columns: 100px 100px 100px;
grid-gap: 20px;
}
Vous pouvez utiliser d'autres types d'unités de mesure en plus des pixels.
Toutes mes félicitations ! Vous venez de créer votre première grille CSS !
Partie 4. CSS Grid dans Joomla 4
Maintenant que vous connaissez CSS Grid, cliquez sur ce lien pour le voir en action dans Cassiopeia, le template par défaut de Joomla 4.
Tout le code lié au CSS Grid dans Cassiopeia est enveloppé par la règle @supports. Elle vérifie si le navigateur du visiteur prend en charge une propriété CSS spécifique et sa valeur. Dans le fichier joint, Joomla s’assure que le navigateur peut afficher ce code : display: grid.
@supports (display: grid) { }
Si le navigateur est trop ancien pour prendre en charge CSS Grid, le CSS ne sera pas exécuté.
Cette page liste les navigateurs supportant le CSS Grid.
Articles qui devraient vous intéresser
Phoca Gallery 3.2.4 : une galerie Joomla pour vos photos
Réussir votre entreprise sur Internet grâce à Joomla
