201115Aug

StackLayout: Flexibles CSS-Grid-System ohne Floating

Für Website-Layouts aller Art eignen sich ab einer bestimmten Komplexität oder besonderen Anforderungen fertige Grid-Systeme, die als CSS-Baukasten vorliegen und mit vordefinierten Klassen unterschiedliche Layouts ermöglichen. Eine Übersicht zeigt, wie viele Systeme zur Auswahl stehen und prinzipiell arbeiten die CSS-Frameworks mehr oder weniger gleich: Durch entsprechende Klassen und div-Container können variable Breiten und Layouts umgesetzt werden. In der Regel kommt "float:left;" zum Einsatz, wodurch sich die Container entsprechend verhalten. Allerdings birgt diese Eigenschaft auch Nachteile, wenn sich beispielsweise die Fenstergröße ändert.
Einen anderen Ansatz verfolgt daher das CSS-Framework StackLayout, das stattdessen auf "display:inline-block;" setzt und somit flexibler ist.

StackLayout - A flexible width, component based CSS layout system

Das StackLayout-Framework arbeitet mit einfachen Klassenbezeichnungen und benötigt keine zusätzlichen Deklarationen, um spezielle Layouts darstellen zu können. So gibt es Definitionen wie ".stack1of2" oder ".stack3of4", die durch prozentuale Angaben dynamisch bleiben. Wer das Layout-Framework in Aktion sehen will, kann sich die Beispiel-Seite oder die etwas komplexere Test-Seite ansehen, auf der die verschiedenen Möglichkeiten demonstriert werden. Weitere Informationen finden sich im Quick Start.

UPDATE
Das Projekt besteht in der Form nicht mehr.