Pour accéder à votre tableau de bord :

Connectez-vous

Connexion S'inscrire

Connexion

Organisme de formation N°11 91 07318 91
Mon compte Statut
Logo NosyWeb
Réussir sur Internet
Marketing Digital - Google - Joomla

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.

Cet article vous a plu ? Abonnez-vous à la newsletter NosyWeb !


L'auteur : un expert à votre service
Jean-Charles Gautard
Consultant, formateur et intégrateur web depuis l'avènement de la version 1.5 de Joomla! pour le marketing digital, je mets mon expertise au service des professionnels. A la recherche d'une stratégie digitale avec ou sans le CMS Joomla ? Besoin de conseils ? d'une formation ? d'un site Internet ou Intranet ? Contactez-moi via https://www.jeancharlesgautard.com

Articles qui devraient vous intéresser

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...
Comment utiliser la spécificité en CSS : Ce qu'il faut savoir Comment utiliser la spécificité en CSS : Ce qu'il faut savoir
En dehors des Floats, la spécificité en CSS est l'un des concepts les plus difficiles à comprendre au sujet des...

Ajouter un commentaire
  • Aucun commentaire trouvé
Assistance

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
Tout ce dont les utilisateurs de Joomla ont besoin pour commencer à utiliser CSS GridTout ce dont les utilisateurs de Joomla ont besoin pour commencer à utiliser CSS Grid
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...
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