Schneller Helfer: Mit LayoutIt! das Grundgerüst des nächsten Bootstrap 3-Projekts erstellen

LayoutIt! ist ein cleveres, kleines Web-Tool aus dem Hause Entropeer, einer ebenfalls kleinen Design-Agentur aus Buenos Aires. LayoutIt! sieht zunächst aus wie ein Website-Builder und funktioniert ähnlich. Letztlich ist die kostenlose Web-App jedoch „nur“ eine Art Kickstarter für Ihr nächstes Projekt auf Bootstrap-Basis. Vor kurzem erweiterte Entropeer das Featureset, so dass jetzt neben der Erstellung von Websites mit Bootstrap 3 auch das verhältnismäßig neue Bootstrap 3 unterstützt wird.

LayoutIt! Cleverer Kickstarter beschleunigt die Site-Entwicklung

Um es nochmal vorweg deutlich zu sagen. LayoutIt! ist kein Homepage-Baukasten für unbedarfte Bastler. Die kostenlose App erstellt lediglich ein Grundgerüst, teilweise mit Musterinhalten versehen. Herunterladen kann man sich das Gerüst entweder als reine HTML-Struktur per Copy and Paste oder als Zip-Archiv, in welchem dann zusätzlich die entsprechende Ordnerstruktur, nebst verwendeter Embeds, etwa Bootstrap selbst oder jQuery und Less, enthalten sind. Damit erhält man ein komplettes Starterkit, auf dessen Basis sodann die weitere Entwicklung fußen kann.

Die Verwendung von LayoutIt! ist simpel. Unter Verwendung eines der beiden Häuptlings gelangt man entweder in den Editor für ein Gerüst in Bootstrap 2 oder in einen ebensolchen für das Projektskelett einer Bootstrap-Seite auf Basis der Version 3. Bekanntlich haben die Bootstrap-Entwickler im Übergang von 2 zu 3 kaum einen Stein auf dem anderen gelassen, so dass die strikte Unterscheidung mehr als bloß sinnvoll ist.

Wie Bootstrap selbst, wird indes auch LayoutIt! mit Bezug auf die Version 2 nicht mehr gepflegt. Sie sollten also schon einen guten Grund haben, um noch auf der Basis des alten Frameworks zu arbeiten.

LayoutIt! Geradliniger Editor garantiert schnelle Produktivität

Einmal im Editor angekommen, findet sich der durchschnittliche Web-Designer keinen Rätseln ausgesetzt. Der visuelle Ansatz von LayoutIt! ist geradlinig. Links findet sich der verfügbare Funktionsumfang sauber gegliedert in Parameter zum Grid-System, zum Base CSS, zu den Components und zum Einsatz von JavaScript. Ein Community-Feature ist bereits in der Toolbar enthalten, aber noch nicht mit Leben gefüllt.

Das Grid-System ist mit verschiedenen, üblichen Aufteilungen versehen, kann dabei aber auch frei angepasst werden. Hierzu editiert man schlicht die vorgelegten Werte. Um kompatibel zum Standard zu bleiben, sollte man jedenfalls sicherstellen, dass die Summe der angegebenen Spalten stets 12 ergibt. Ein Grid wird per Drag and Drop in den über den Rest des Browserfensters reichenden Editor gezogen. Dabei ist es auch möglich, Grids ineinander zu verschachteln. Auf diese Weise bauen Sie leicht auch komplexere Designs visuell zusammen.

Alles, was Sie unter Verwendung von drag in den Editor ziehen, können Sie dort frei positionieren und an Ort und Stelle via remove wieder entfernen.

Ist das Grid fertig, geht es an das Einfügen von Inhalten und Funktionen. Soweit es sich um vordefinierte Elemente handelt, die später der weiteren Programmierung bedürfen, um ihre eigentliche Funktionalität zu entfalten, setzt LayoutIt! Platzhalter ein, deren Inhalte zwar voll funktionsfähig, aber natürlich nicht für den späteren Verbleib vorgesehen sind. Wie es sich für Bootstrap-Projekte gehört, sind die mit LayoutIt! vorkonfektionierten Seiten voll responsiv.

Am oberen Rand des Browserfensters finden Sie eine weitere Werkzeugleiste. Hier können Sie verschiedene Previews aktivieren, das Projekt herunterladen oder mit anderen teilen. Auch das Speichern der Arbeiten online ist möglich, erfordert dann aber naheliegenderweise die Anlage eines Accounts auf LayoutIt! Hierzu werden die gängigen OAuth-Geber wie Twitter, Facebook und Google unterstützt. Wer das nicht möchte, legt einen dedizierten LayoutIt!-Account unter Bekanntgabe von E-Mail-Adresse und Passwort an.

LayoutIt! Mehrsprachiger Helfer für Entwickler mit soliden Kenntnissen

LayoutIt! steht auf englisch, spanisch, portugiesisch und – erstaunlicherweise – chinesisch zur Verfügung. Da es kostenlos verfügbar ist, sollten Sie nicht vor einem Test zurückscheuen, wenn Sie ohnehin mit Bootstrap 3 als Front-End-Framework liebäugeln. Abschließend sei aber eine Warnung erneut ausgesprochen. LayoutIt! generiert Ihnen ein solides Fundament. Sie benötigen aber bereits bei der Erstellung des Fundaments ein gerüttelt Maß eigener Kenntnisse und erst recht dann, wenn Sie das Gerüst schlussendlich mit Leben füllen wollen.

So ist LayoutIt! eine sehr nützliche Arbeitserleichterung für Bootstrap-affine Front-End-Entwickler und hat sich als solche eine klare Empfehlung verdient…

Das folgende Video bietet einen guten ersten Überblick:

Links zum Beitrag

• LayoutIt! | Homepage
• LayoutIt! | Bootstrap 2
• LayoutIt! | Bootstrap 3
• Entropeer | Die Macher des Web-Tools