Baseling Align
These are the demo files to go along with the tutorial.
1: Normal document with a baseline grid
A plain HTML document with default styling. A 22px baseline grid shows that text has a poor rhythm.
2: Text follows a baseline grid
The same document with CSS making text flow with the baseline grid.
3: Disruptive images
The same document with the same CSS, but now with images included. Notice how text starts to become mis-aligned.
4: First attempt at a solution
A partial solution which confirms the principle is sound, but has some implementation quirks.
5: Complete solution
A document that keeps a clean vertical rhythm throughout and deals with re-scaled images in liquid layouts.