201316Apr

LayoutIt!: Interface Builder für Bootstrap-Projekte

Wer heutzutage eine moderne Website in HTML, CSS und JavaScript umsetzen möchte, muss dabei eventuell nicht nur alte Webbrowser unterstützen, sondern die Seite in der Regel auch für verschiedene Bildschirmauflösungen und Geräte optimieren. Responsives Design ist dank CSS3 leicht umzusetzen, muss aber dennoch gut geplant und durchdacht werden. Etwas Abhilfe hierbei können verschiedene Frameworks schaffen, wie beispielsweise Twitters Bootstrap-Framework. Hiermit stehen solide HTML- und CSS-Bausteine bereit, die durch JavaScript-Plugins erweitert werden können. Zudem werden ältere Browser durch Shims unterstützt.
Nun gibt es für das Bootstrap-Framework auch einen Interface Builder, mit dem sich die Grundkomponenten per Drag 'n' Drop auf eine Arbeitsfläche ziehen und anschließend exportieren lassen. Die Web-Anwendung LayoutIt! ermöglicht diesen Prozess und ist relativ einfach aufgebaut.

LayoutIt! - Interface Builder for Bootstrap

Der Editor kann direkt im Browser gestartet werden und setzt sich aus einer Spalte mit den verfügbaren Komponenten und einem Arbeitsbereich zusammen, in dem die Bausteine platziert werden. Diese können innerhalb des Arbeitsbereichs bewegt und wieder entfernt werden. Ein mit LayoutIt! erstelltes Bootstrap-Layout lässt sich schließlich exportieren und steht dann in Form von HTML-, CSS- und JavaScript-Dateien zur Verfügung.