Wer sich die originalen YAML-Templates und auch den "YAML Builder" genauer anschaut, stellt fest, dass sämtliche Werte in % oder em angegeben sind. Das hat einen berechtigten Grund, denn die Templates bilden so mit den CSS-Dateien eine flexible Einheit.

Zum Beispiel ermöglichen ein flexibles Layout (basemod.css und die Core-CSS-Dateien in yaml) in Kombination mit flexiblen Inhalts-CSS (content.css), ein Stufenloses Skalieren im Web Browser. So wird z.B. auf einem 22 Zoll Bildschirm die Internetseite gleich dargestellt wie auf einem 17 Zoll Bildschirm. Die Gesamte Einheit wird proportional verkleinert, bzw. vergrössert (Layout, Spaltenbreiten und -höhen, Schriftgrössen, ...).

Wer das "Spalten-Tutorial" durchgeführt hat, muss bemerkt haben, dass nirgends Spaltenbreiten angegeben werden mussten. — Weil die Spaltenbreiten standardmässig mit %-Werten definiert sind und sich somit automatisch dem "Mutter-Container" anpassen.

Um die "Logic" von YAML besser zu verstehen, wirft man am Besten mal einen Blick auf die CSS-Definitionen der Inhalts-Elemente, welche zudem sehr gut komentiert sind:

In der content.css werden zuerst alle Schriftgrössen auf 100.01% (16px) zurück gesetzt (siehe Tabelle). Man könnte das auch als "Eichung" bezeichnen. Dies geschieht in der Klasse für html:

html * { font-size: 100.01% }

Als nächstes wird die Standardschriftgrösse des Basis-Layouts definiert:

body { font-size: 75.00% } was 12px entspricht.

Dann kommen die Definitionen der Absatz-Titel h1 bis h6

Für das Standard Absatzformat "p" (<p>Das ist ein Standard Absatz</p>) gibt YAML keinen Wert vor. Da nichts angegeben, wird der Wert von body übernommen, also 75.00%. Wäre die Schriftgrösse auch nicht in body definiert, würde p die Werte von html übernehmen (100% = 16px).

Wer diese Logik versteht, kann für zukünftiges Webdesign weitgehend auf die Verwendung von festen Werten (px und pt) verzichten. Die Umrechnungstabelle (rechts) kann dabei sehr unterstützend sein.