Debug baselines, leadings and grids with the help of the background CSS property.

README.md

Some resources

• http://basehold.it/
• http://hashgrid.com/
• http://baselinecss.com/grid.html
• http://static.elliotjaystocks.com/baseline/

debug.css

 
/**
 * Visualisation de la ligne de base
 *
 * Déssine un arrière-plan représentant une grille horizontale
 * permettant la visualisation de la ligne de base.
 * Ce service vous aidera de maintenair facilement un rythme vertical
 * dans n'importe quel contexte ou élément HTML.
 * Inspiré par http://baselinecss.com/
 *
 * Note :
 * Pour une interprétation optimale dans Gecko,
 * la hauteur de ligne devra être arrondie de la façon suivante :
 * ceil(line-height * 1000) / 1000 
 *
 * 1. Créé (de haut en bas) un dégradé linéaire de couleurs
 *    représentant une ligne d'une épaisseur définie.
 * 2. Décale la position initiale de l'image d'arrière plan
 *    d'un interlignage vers le haut
 *    (cf : http://www.w3.org/TR/CSS2/visudet.html#leading).
 * 3. Définie la hauteur de ligne comme hauteur
 *    de l'images d'arrière-plan.
 * 4. Assure que l'image d'arrière-plan se dessine seulement
 *    dans la boîte de contenu.
 */
 
.u-debugBaseline {
  background-image: linear-gradient(
    rgba(0, 177, 247, .2) .1em
   ,transparent .1em
  ) !important; /* 1 */
  background-position: 0 calc(1em - 1.4em) !important; /* 2 */
  background-size: 100% 1.4em !important; /* 3 */
  background-clip: content-box !important; /* 4 */
}



/**
 * Visualisation de la hauteur de ligne
 *
 * Déssine un arrière-plan représentant une grille horizontale
 * permettant la visualisation de la hauteur de ligne.
 * Ce service vous aidera de maintenair facilement un rythme vertical
 * dans n'importe quel contexte ou élément HTML.
 * Inspiré par http://basehold.it/
 *
 * Note :
 * Pour une interprétation optimale dans Gecko,
 * la hauteur de ligne devra être arrondie de la façon suivante :
 * ceil(line-height * 1000) / 1000 
 *
 * 1. Créé (de bas en haut) un dégradé linéaire de couleurs
 *    représentant une ligne d'une épaisseur définie.
 * 2. Définie la hauteur de ligne comme hauteur
 *    de l'images d'arrière-plan.
 * 3. Assure que l'image d'arrière-plan se dessine seulement
 *    dans la boîte de contenu.
 */
 
.u-debugLineHeight {
  background-image: linear-gradient(to top
   ,rgba(0, 177, 247, .2) .1em
   ,transparent .1em
  ) !important; /* 1 */
  background-size: auto 1.4em !important; /* 2 */
  background-clip: content-box !important; /* 3 */
}



/**
 * Visualisation de la grille
 *
 * Déssine un arrière-plan représentant les bornes intérieures
 * des colonnes de la grille verticale utilisée.
 * Inspiré par http://baselinecss.com/
 *
 * Note :
 * Pour une interprétation optimale dans Trident (mais pas que...),
 * la largeur de la colonne devra être arrondie de la façon suivante :
 * ceil(colonne * 100) / 100
 *
 * 1. Créé (de gauche à droite) un dégradé linéaire de couleurs
 *    représentant les bornes intérieures des colonnes
 *    par une ligne d'une épaisseur définie.
 * 2. Décale la position initiale de l'image d'arrière plan
 *    d'une demi-gouttière vers la droite.
 * 3. Définie la largeur de colonne comme largeur
 *    de l'image d'arrière-plan.
 */
 
.u-debugGrid {
  background: linear-gradient(to right
   ,rgba(250, 0, 150, .2) .1em
   ,transparent .1em
   ,transparent calc((100% - 1.4em) - .1em)
   ,rgba(250, 0, 150, .2) calc((100% - 1.4em) - .1em)
   ,rgba(250, 0, 150, .2) calc(100% - 1.4em)
   ,transparent calc(100% - 1.4em)
  ) !important; /* 1 */
  background-position: .7em 0 !important; /* 2 */
  background-size: 8.34% auto !important; /* 3 */
}



/**
 * Visualisation alternative de la grille
 *
 * Déssine un arrière-plan représentant les colonnes
 * de la grille verticale utilisée.
 *
 * Note :
 * Pour une interprétation optimale dans Trident (mais pas que...),
 * la largeur de la colonne devra être arrondie de la façon suivante :
 * ceil(colonne * 100) / 100
 *
 * 1. Créé (de gauche à droite) un dégradé linéaire de couleurs
 *    représentant la gouttière puis la colonne.
 * 2. ...
 * 3. Décale la position initiale de l'image d'arrière plan
 *    d'une demi-gouttière vers la gauche.
 * 4. Définie la largeur de colonne comme largeur
 *    de l'image d'arrière-plan.
 */
 
.u-debugGridAlt {
  background-image: -webkit-linear-gradient(left
   ,transparent 1.4em
   ,rgba(250, 0, 150, .2) 1.4em
  ) !important; /* 2 */
  background-image: linear-gradient(to right
   ,transparent 1.4em
   ,rgba(250, 0, 150, .2) 1.4em
  ) !important; /* 1 */
  background-position: -.7em 0 !important; /* 3 */
  background-size: 8.34% 100% !important; /* 4 */
}

Semble dessiner des lignes plus "nettes" dans Fx 😒
(source : http://sassmeister.com/gist/ee64caba135310215d0d)

.u-debugLineHeight {
  background-image: linear-gradient(to top
   ,transparent calc(100% - 1px)
   ,rgba(0, 177, 247, .2) 100%
  ) !important; /* 1 */
}
.u-debugBaseline {
  background-image: linear-gradient(to top
   ,transparent calc(100% - 1px)
   ,rgba(0, 177, 247, .2) 100%
  ) !important; /* 1 */
}