Aujourd’hui, je vous propose le descriptif d’une petite librairie faite maison. Je l’ai nommée « HelperGrid.js« . Une fois en place, la librairie permet d’afficher une grille fixe qui permet de mieux visualiser l’alignement des éléments sur une page web.
Le projet n’est pas neuf, je vous l’avais proposé dans la première version de « Pumpskin » sous une classe CSS. Le CSS suffit pour afficher visuellement une grille sur une page. Mais la feuille de style ne permet pas de paramétrer facilement la grille. D’où l’idée d’en faire une librairie. Voilà à quoi cela peut donner :
Fonctionnement de HelperGrid.js
Très simple, elle prend deux paramètres pour fonctionner. Le premier, en pourcentage, est la distance entre chaque ligne verticale. Le deuxième paramètre est la couleur des lignes. Vous pouvez ensuite cibler facilement un élément pour afficher la grille. Sur le body avec la classe ajoutée « helperGridJs« , voilà l’exemple donné :
helperGridJs('.helperGridJs', {
size: "10%",
color: "red"
})Et ensuite ?
Le projet placé sur Github, vous avez accès à la librairie en ligne et vous pouvez ensuite l’utiliser sur des projets distants ou pour le vôtre.
Amélioration
On pourrait imaginer répéter les lignes verticales en direction horizontales. Et paramétrer la librairire pour en décider le sens. On pourrait aussi imaginer customiser la librairie pour choisir l’épaisseur des lignes même si je ne vois pas trop en quoi ce serait intéressant dans l’état actuel.
Ressources :
Github : https://github.com/ProjetsMerlin/helperGridJs
Le js minifié : https://github.com/ProjetsMerlin/helperGridJs/blob/main/helperGridJs.min.js
