Toast – ein neues CSS-Framework auf Grid-Basis

Toast - Grid und Typografie vorgedacht

Neben dem obligatorischen Standard-Reset bietet Toast ein flexibles Gridsystem, sowie eine Baselinedefinition innerhalb eines typografischen Stylesheets. Das Gridsystem basiert auf 1.140 Pixeln und erinnert ansonsten an das bekannte 960.gs. Vor allem die Syntax ist ähnlich, aber nicht identisch.

Ein Grid in Toast wird flexibel definiert. So bezeichnet die Div-Klasse col_9 eine Spalte, die sich aus 9 Spaltenwerten addiert. Man würde also zunächst festlegen, wie viele Spalten das Grid maximal haben soll und hätte so die Anzahl der Spaltenwerte ermittelt. Jetzt muss nur noch darauf geachtet werden, dass jede Zeile am Ende so viele Spaltenwerte zugewiesen erhält, dass die Summe stets gleich bleibt.

Freunde des 960.gs können das Grid durch Hinzufügen der Klasse smallscreen auf 960 Pixel, statt der eigentlichen 1.140 Pixel festlegen. Die Klasse respond macht das Grid responsiv, so dass es grundsätzlich auch für mobiles Design genutzt werden kann. Mittels der Klasse nest können Grids in Grids verschachtelt werden.

In Sachen Typografie bringt Toast vordefinierte Styles für Inline-Elemente, wie strong, em etc. mit. Die wesentliche Funktionalität des Stylesheets besteht jedoch im Setzen eines Baseline Grid mit einer Zeilenhöhe von 24 Pixeln bei einer Schriftgröße von 16 Pixeln.

Weiteres Styling bringt Toast nicht von Haus aus mit. Toast ist nicht für jedes Projekt geeignet. Textlastige Websites können durch den Einsatz des Frameworks an Übersichtlichkeit und Bedienbarkeit gewinnen.

Toast kann unter der CC Attribution-Lizenz frei genutzt werden und steht auf GitHub zum Download zur Verfügung.