201015Mär

Construct Your CSS: WYSIWYG-Editor für CSS-Layouts

Letzte Woche berichtete ich über den ZURB CSS Grid Builder, mit dem sich per Knopfdruck Code für CSS-Raster generieren lässt. Einen etwas älteren Editor von Christian Montoya, der ähnlich funktioniert, gibt es mit "Construct Your CSS". Das auf Blueprint und jQuery basierende Online-Tool bietet schöne Möglichkeiten, um eine grobe CSS-Struktur für Web-Layouts zu generieren. Die Bedienung setzt hauptsächlich auf Tastaturbefehle: Nachdem Reihen und Spalten mit der Maus erstellt wurden, können mit entsprechenden Tasten die Elemente modifiziert werden. So lässt sich beispielsweise mit J und K die Breite von Spalten (Columns) verändern.

Construct Your CSS - WYSIWYG Layout Editor

Mit der C-Taste lassen sich die Container schließlich mit Blindtext füllen. Per "Preview" kann das Layout angesehen werden und mit "Construct It!" werden das HTML-Gerüst und der dazugehörige CSS-Code generiert. Die Spalten können zudem auch mit einer ID versehen werden, die im Editor mit einem roten Dreieck gekennzeichnet wird.
Wer CSS-Container frei auf einer Arbeitsfläche erstellen möchte, kann Drawter ausprobieren. Auch dieses Werkzeug generiert Layout-Code, der anschließend kopiert werden kann. Gute und saubere CSS-Layouts basieren auf Handarbeit und Präzision — derartige Generatoren ersetzen in keinem Fall das notwendige Wissen und Verständnis für Cascading Style Sheets. Sie sollen lediglich den Prozess der Layout-Erstellung verkürzen, in dem Größen und Verhältnisse von Containern festgelegt werden.