Basehold.it permet d’afficher une ligne de base sur vos éléments html (balise html, body ou le container de votre contenu principal) pour faciliter le calage de votre grille verticale, la petite soeur de la grille horizontale, composée de colonnes. Pour l’utiliser, rien de plus simple : il suffit de faire un lien dans un appel de feuille de style, par exemple <link rel="stylesheet" href="http://basehold.it/24"> affichera une ligne de base d’une valeur de 24 pixels.
Il est possible de spécifier une couleur, au format hexadécimal, RGB ou RGBA :
<link rel="stylesheet" href="http://basehold.it/24/ff0000">
<link rel="stylesheet" href="http://basehold.it/24/255/0/0">
<link rel="stylesheet" href="http://basehold.it/24/255/42/85/0.5">
Cette ligne de base est générée à l’aide de pseudo-éléments. Si vous désirez utiliser des images, il est possible d’utiliser la propriété background-image :
html {
background-image: url(http://basehold.it/i/24); // 24px
background-image: url(http://basehold.it/i/24/ff0000); // hexa
background-image: url(http://basehold.it/i/24/255/0/0); // RVB
background-image: url(http://basehold.it/i/24/255/0/0/0.85); // RGBA
}Cerise sur le gâteau, le code source est disponible sur Github à l’adresse https://github.com/daneden/Basehold.it et un bookmarklet est disponible.
Merci à @Kozlika pour le lien.
basehold.it https://t.co/OwlqvBcJdu pour visualiser la grille verticale via une feuille de style, un background ou un snippet
— Kozlika (@Kozlika) 13 Mai 2015