[HTML & CSS General] Basehold.it で Baseline grids を追加して Vertical Rhythm をチェックする

スタイルシートタグの追加だけでかんたんに利用できるので便利でした。

Basehold.it – quick, painless, javascript-free baseline overlays

こんな形のものです。

2014-10-31_baseholdit_01

24px の baseline grid を引きたい。

<link rel="stylesheet" href="http://basehold.it/24">

色は赤でお願いします。

<link rel="stylesheet" href="http://basehold.it/24/ff0000">

やっぱり HTML ではなく CSS 内で画像指定したい。

html {
  background-image: url(http://basehold.it/i/24/ff0000);
  // @include debug-vertical-alignment;
}

stylesheet で読み込むと overlay するのがポイント。

補遺