Very Simple Grid pour DIVI

Le contexte

Dans le cadre professionnel, j’ai récemment dû développer un site Web WordPress en utilisant le Page Builder DIVI. L’usage du plugin DIVI ne correspondait pas à un choix personnel pour plusieurs raisons :

• Bien que ce Page Builder permette une personnalisation avancée, la structuration du code HTML généré par DIVI manque de souplesse et on se heurte rapidement à l’impossibilité d’intégrer des designs avancés sans passer par des subterfuges complexes et laborieux.
• DIVI ne propose que 3 seuils responsives (480px, 980px et 1280px) tandis que le système de grille Bootstrap en propose 5. Alors que l’essor et la diversité des différents supports mobile, tablette et desktop nécessitent une plus grande flexibilité des modes d’affichages, la structure responsive de DIVI apparaît désormais comme obsolète.
• L’usage de DIVI surcharge beaucoup le DOM, notamment avec l’emploi de nombreux éléments HTML d’enveloppe et de quantité de classes dont la nomenclature est très verbeuse.
• La quasi-absence d’usage de la propriété display: flex et l’absence de la propriété display: grid dans la structure HTML générée par DIVI interdit des présentations allégées et modernes.

Il existe de nombreuses autres raisons qui me porteraient plus à me passer d’un page builder de ce type, cependant, je peux admettre avec quelques réserves, que dans le cadre de la prise en main d’un blog par une personne ayant peu de connaissance de l’utilisation d’un CMS, DIVI peut proposer une approche simplifiée.

Dans le cadre de ce projet, j’ai notamment été confronté aux limitations du module d’onglets de DIVI qui ne permet pas nativement d’afficher un contenu responsive. J’avais besoin de faire appel à un système de grille de type Bootstrap mais les seuils responsives de ce derniers ne correspondaient pas à ceux de DIVI et il n’était pas question non-plus d’alourdir encore la structure HTML du projet avec tous les extras que propose Bootstrap sans qu’ils soient utiles au projet.

Le projet “Very Simple Grid”

Dans ce contexte, j’ai écrit un système de grille CSS personnalisé et adapté à DIVI sous le nom de “Very Simple Grid”. Ce système de grille est similaire à celui de Boostrap en s’inspirant de sa nomenclature de classe et en se conformant aux seuils responsives de DIVI.

“Very Simple Grid” est un projet de feuille de style CSS écrit en SASS, modulable et facile à adapter à d’autres projets que celui d’un CMS WordPress/DIVI.

“Very Simple Grid” fournit :

• Un système de “flex grid responsive” en douze colonnes enveloppées dans des conteneurs et des rangées,
• un système d’espacement : margin et padding selon les différentes “media queries”,
• des classes de propriétés display paramétrables selon les différentes “media queries”,
• des classes de propriétés flex-direction paramétrables selon les différentes “media queries”,
• les classes d’alignement justify-content et align-items pour la propriété “flex”, paramétrables selon les différentes “media queries”,
• des classes d’alignement de texte paramétrables selon les différentes “media queries”.

Le projet “Very Simple Grid” est en libre accès sur GitHub à cette adresse : https://github.com/seangoogoo/very-simple-grid/