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 :

columns

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 :

CSS Grid dissocie le code HTML de la mise en page, ce qui permet de réaliser la mise en page exclusivement dans le CSS. Ce PR modifie la technique utilisée pour construire le template [Cassiopeia], passant de Bootstrap à CSS Grid. CSS Grid est utilisé uniquement dans le template [Cassiopeia]. Nous sommes réticents à l'utiliser dans le template du backend en raison de problèmes de compatibilité et du fait que les performances sont légèrement moins importantes. Compte tenu du large éventail d'éléments dans le backend, Bootstrap reste un bon choix pour nous.

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 :

La grille exige moins de CSS et de JS car elle fait partie de la plate-forme Web elle-même. Cela signifie que vous pouvez économiser 80% du temps de chargement de votre page sur des connexions plus lentes (3G ou plus lent), rendant Joomla! encore plus compétitif. La grille ne nécessite pas de JavaScript. Pas de JS signifie que le site fonctionnera à chaque fois. Essayez de voir si un site BS2/3/4 est réactif si vous désactivez JS. Pas tellement, non ? Plus encore quand vous voulez changer les ordres de colonne sur les tailles d'écran plus petites.

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.

Cet article est une libre traduction de The Future of Joomla is CSS Grid, Not Bootstrap 4 par Valentin Garcia pour JoomlaShack.

Articles qui devraient vous intéresser

Phoca Gallery 3.2.4 : une galerie Joomla pour vos photos Phoca Gallery 3.2.4 : une galerie Joomla pour vos photos
Résumé du test Intuitivité : Stabilité : Support : Sécurité : Mises à jour : Interropérabilité :...
Concevoir un template Joomla Responsive avec Bootstrap Concevoir un template Joomla Responsive avec Bootstrap
Nous allons voir dans ce tutoriel comment utiliser le framework Bootstrap de Twitter pour créer de zéro un template...

Commentaires (0)

Il n'y a pas encore de commentaire pour cet article.

Ajouter vos commentaires

  1. Insérer un commentaire en tant qu'invité. Créez un compte ou connectez-vous ci-dessous.
Pièces jointes (0 / 3)
Share Your Location
Contact

Scoop.It de NosyWeb

Twitter de NosyWeb

YouTube de NosyWeb

Facebook de NosyWeb

Google+ de NosyWeb

Flux RSS de NosyWeb

Inscription newsletter de NosyWeb

 

Restez à l'affut de l'actualité NosyWeb ! :-)

Dernier article sur la même thématique
Les nouveautés de Joomla 3.9Les nouveautés de Joomla 3.9
Joomla 3.9 apporte un certain nombre de nouveautés fondamentales avec en premier lieu l'environnement de conformité au RGPD. Mais également un certain nombre d'améliorations utiles et...
En poursuivant votre navigation sur le site, vous acceptez l'utilisation de cookies sur votre poste dans le respect de notre politique de protection de votre vie privée. Ok