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

Kein Beitragsbild

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren...

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-homepage

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.

layoutit-download

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.

layoutit-editor

Kennst du unser E-Book-Bundle? Spare jetzt 6,99 €!

E-Book Bundle von Andreas Hecht

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.

layoutit-editor-sample-content

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-dashboard

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

Dieter Petereit

ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für diverse Medien, hauptsächlich zu den Themenfeldern Technik und Design. Man findet ihn auch auf Twitter und Google+.

Hinterlasse einen Kommentar

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

Benachrichtige mich zu:
avatar
Sortiert nach:   neueste | älteste | beste Bewertung
Andrej
Gast

Vielen Dank für den Artikel. Das Tool fühlt sich gut an!

Eine Frage: Ich versuche gerade, mein erstelltes Template in WordPress zu importieren. Irgendwie wollen einige *.js nicht richtig funktionieren, obwohl einwandfrei eingebunden. Gibt es da vielleicht noch mehr zu beachten, speziell im Umgang mit WP?

mfG
André

Andrej
Gast

meine frage hat sich erledigt. es war doch ein zeichendreher, der sich eingeschlichen hatte. nochmals danke.

wpDiscuz