Joomla 4 est actuellement en développement. Il faudra attendre encore plusieurs mois avant la sortie de Joomla 4, mais un travail est déjà en cours sur la compatibilité des templates Joomlashack.
L'un des changements les plus importants dans Joomla 4 est la mise à niveau de Bootstrap 2 vers Bootstrap 4. Cependant, une chose que nous avons découverte est que Joomla 4 ne comptera plus exclusivement sur Bootstrap.
Joomla 4 s'appuiera également sur CSS Grid, une méthode CSS qui révolutionne l'industrie du design Web.
Bootstrap 4 et CSS Grid seront les outils utilisés pour la conception du frontend dans Joomla 4.
Joomla comptera sur Bootstrap 4 pour l'interface utilisateur, et CSS Grid pour les mises en page du frontend. L'équipe de Joomla apporte ce changement parce qu’elle croit que CSS Grid sera de plus en plus utilisé dans le futur. Joomla 3 se basait sur une ancienne version de Bootstrap. L'espoir est que cette nouvelle approche permettra d'éviter des problèmes similaires avec Joomla 4.
Bootstrap 2 vs Bootstrap 4
En résumé, Boostrap 2 vs Boostrap 4 signifie : float vs flex pour la construction des mises en page.
Avant de parler de CSS Grid, comparons les deux versions de Bootstrap qui font partie de Joomla :
- Bootstrap 2 est supporté par Joomla 3.
- Bootstrap 4 sera supporté dans Joomla 4.
L'exemple ci-dessous présente une disposition de grille à deux colonnes dans Bootstrap 2 :
<div class="container">
<div class="row">
<div class="span6"></div>
<div class="span6"></div>
</div>
</div>
Ce code produira la mise en page suivante :
Maintenant, prenons le même exemple mais en utilisant Bootstrap 4 :
<div class="container">
<div class="row">
<div class="col-md-6"></div>
<div class="col-md-6"></div>
</div>
</div>
La principale différence est que les préfixes de taille de colonne change de span à col-md-. Vous pouvez remplacer col-md- par col-sm- pour cibler les petits écrans, ou avec col-lg- pour cibler les grands écrans, ou avec col-xl- pour les écrans extra larges.
Vous pouvez même utiliser plusieurs classes pour définir une taille de colonne différente en fonction de la largeur de l'écran. Cela vous permet plus de contrôle sur l’aspect responsive de vos pages !
<div class="col-md-6 col-lg-12"></div>
L'exemple ci-dessus signifie que la largeur de la colonne serait de 50% sur les écrans de taille moyenne (768 pixels et plus), et de 100% lorsque la largeur de l'écran minimum est de 992 pixels.
Mise en page CSS Grid
La mise en page CSS Grid est un système de mise en page quadrillé supporté par tous les principaux navigateurs qui modifient l'approche que nous connaissons lorsqu’il s’agit de faire une mise en page. CSS Grid n'est pas un framework.
La façon courante de créer des colonnes et des lignes avec Bootstrap (et en général avec d'autres frameworks CSS populaires) est d'appeler des classes CSS dans notre balise HTML pour définir les éléments qui sont des lignes et la taille de chaque colonne.
CSS Grid Layout fonctionne dans le sens opposé. Vous avez un balisage HTML plus concis et à travers CSS, vous décidez quels éléments sont des lignes, des colonnes et leurs tailles. Il n'y a pas de flottant ni de propriétés CSS flexibles.
Portons la mise en page à deux colonnes de nos précédents exemples Bootstrap mais en utilisant uniquement la mise en page CSS Grid.
HTML:
<div class="container">
<div></div>
<div></div>
</div>
CSS:
.container {
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100px;
}
Dans l'exemple ci-dessus, vous pouvez remarquer un balisage HTML plus concis. Nous nous sommes débarrassés des classes de colonnes et de lignes CSS, plus le conteneur de ligne. Ces changements ont été définis dans le CSS :
grid-template-columns: le nombre de colonnes et la largeur de chacune. Deux colonnes, 50% de largeur pour les deux.grid-template-rows: la hauteur pour chaque ligne. 100 pixels dans ce cas.
La propriété display utilisant "grid" comme valeur définit les divs enfants de .container comme des éléments pour la mise en page.
Bien sûr, ce court exemple est très simple et n’offre pas les mêmes fonctionnalités, comme l’affichage responsive que permet Bootstrap 4.
Vous pouvez voir CSS Grid en action dans Cassiopeia, le template par défaut de Joomla 4.
Nous devons la conception de ce template à Ciaran Walsh et Charlie Lodder. Aidez-les à tester Cassiopeia sur tous les navigateurs.
Voici ce que Ciaran a dit concernant cette amélioration :
Avantages de l'utilisation de CSS Grid
Vous pouvez vous demander pourquoi nous devons utiliser CSS Grid.
Je vois les deux principaux avantages suivants à CSS Grid par rapport à Bootstrap :
- HTML simplifié. Vous aurez moins de HTML à écrire afin de générer le même résultat qu'avec Bootstrap 4 ou un autre framework CSS.
- Plus de contrôle dans la conception via CSS. Même si nous savons que le CSS est en charge du design, les frameworks nécessitent que nous utilisions également le balisage HTML. CSS Grid prend plus de contrôle sur la conception avec moins de dépendance sur les classes CSS par rapport au balisage HTML.
Voici ce que Nicholas Dionysopoulos d'Akeeba Backup a déclaré sur les avantages de l'utilisation de CSS Grid :
Résumé
Si vous créez un template dans Joomla 4 ou si vous créez la mise en page du frontend d’une extension, ne vous précipitez pas dans l'utilisation de Bootstrap 4. Vous devriez plutôt vous pencher sur l’utilisation de CSS Grid.
Cela ne signifie pas que tous les templates Joomla 4 vont abandonner Bootstrap. Il y a de bonnes raisons pour lesquelles les concepteurs continueront à utiliser Bootstrap. Par exemple, nous pouvons continuer à utiliser Bootstrap pour les templates Joomlashack afin que nos utilisateurs puissent les mettre à jour plus facilement.
Cependant, le futur est clair. À long terme, l'avenir de la conception frontend Joomla sera 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
