Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
Menü
  • Beste Agenturen
  • Agentur-Standorte von A bis Z 🌇
  • Magazin
  • Newsletter 📩
  • Login
  • Agentur bewerben ✅
  • Kontakt
  • Werben 🎉
  • Sponsored Post
  • Jobs
  • Werben
  • Gastbeitrag
  • Sponsored Post
  • Kontakt
  • Login
  • Newsletter
Suche
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Menü
  • Magazin
    • Content Marketing
    • CSS
    • E-Commerce
    • E-Mail-Marketing
    • Freelancer
    • Fotografie
    • HTML
    • Online-Marketing
    • Responsive Design
    • SEO
    • UX Design
    • Webdesign
    • Website erstellen
    • WordPress
    • Dr. Web Autoren
  • Jobs
Agentur eintragen →
Dr. Web Logo. Untertext: Seit 1997.
  • Beste Agenturen
  • Agentur-Standorte
      Berlin bei Nacht, Blick von oben Richtung Fernsehturm.

      Berlin

      Blick auf die Elbufer-Promenade Dresdens sowie Frauenkirche und Zwinger.

      Dresden

      Düsseldorf von oben mit Blick auf den Fernsehturm.

      Düsseldorf

      Blick von oben auf das Bankenviertel in Frankfurt am Main.

      Frankfurt am Main

      Hamburg bei Nacht, Blick auf die Speicherstadt.

      Hamburg

      Blick auf das Neue Rathaus, Hannover.

      Hannover

      Agenturen in Innsbruck von oben mit Blick auf die Alpen.

      Innsbruck

      Sonnenuntergang in Köln mit Blick auf den Dom. Im Vordergrund die Hohenzollernbrücke.

      Köln

      München bei Fön mit Blick in die bayerischen Alpen.

      München

      Stuttgart von oben.

      Stuttgart

      Wien von oben. Blick auf den Stephansdom.

      Wien

      Zürich von oben.

      Zürich

Agentur eintragen →
Dr. Web » Design » Schneller Helfer: Mit LayoutIt! das Grundgerüst des nächsten Bootstrap 3-Projekts erstellen

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

Sozial sein
Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email
  • 2 Kommentare
Lesedauer: 4 Minuten
  • von Dieter Petereit
  • 31. Dezember 2013
Bookmarke mich
Share on pocket

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

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:

LayoutIt! - Drag & Drop Interface Builder for Bootstrap

Links zum Beitrag

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

Wie hilfreich war dieser Beitrag?

Klicke auf die Sterne um zu bewerten!

Durchschnittliche Bewertung 0 / 5. Anzahl Bewertungen: 0

Dieter Petereit

Dieter Petereit

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 Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Agenturpartner

BIZ Digital Marketing

Nürtingen

VABELHAVT

Innsbruck

ARIT Services GmbH

Laatzen

Webagentur klickbeben

Innsbruck

Philipp Pistis – WordPress Agentur

Prittriching

Alle Agenturpartner

Jobs

Business Development Manager

München

Copywriter – Vollzeit

Remote

Senior Online Marketing Manager und stv. Geschäftsführer

Innsbruck

Web Development & Project Management

Remote

Online Marketing Manager

Innsbruck

Zum richtigen Job

Newsletter

Tipps, Tricks, Ratgeber. Unser Newsletter: Jeden Dienstag frisch gedruckt in Deinem Mail-Postfach.

Lust auf mehr? Wir empfehlen folgende Artikel:

Vollkommen geschmacklos: So stellst du fest, ob ein Design gut oder schlecht ist

Dein eigener Geschmack ist ein schlechter Ratgeber in der Frage der Beurteilung, ob ein Design nun gut oder schlecht ist. Lass uns da mal objektiver

 →   

Design: Was für Sprach-Interfaces der Zukunft wichtig ist

Seit fast zwei Jahren besitze ich einen Amazon Echo. Das Gerät zeigt mir seitdem eindrucksvoll, wie limitiert heutzutage Sprach-Interfaces sind. Da muss sich was tun.

 →   

Mal was anderes: Mondrianismus im Webdesign

Kennst du Mondrian? Nein, wirst du vermutlich sagen. Das ist unwahrscheinlich. Zumindest sein Kunststil wird dir bekannt vorkommen. Schau selbst. Wie hilfreich war dieser Beitrag?

 →   

2 Antworten zu „Schneller Helfer: Mit LayoutIt! das Grundgerüst des nächsten Bootstrap 3-Projekts erstellen“
— was ist Deine Meinung?

  1. Andrej sagt:
    25. Januar 2014 um 20:32 Uhr

    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é

    Antworten
    1. Andrej sagt:
      25. Januar 2014 um 22:17 Uhr

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

      Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Dr. Web Logo weiss.

Pionier für Digitale Transformation. Seit 1997. ✅  Wissen, Tipps, Ratgeber, Dienstleister: Wir bringen wir die digitale Transformation von Unternehmen praxisnah voran.

Share on facebook
Share on twitter
Share on linkedin
Share on xing
Share on whatsapp
Share on email

Wissen finden

  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce
Menü
  • Dr. Web Autoren
  • Amazon SEO
  • Content Marketing
  • CMS
  • CSS
  • Digitalisierung
  • E-Commerce
  • Freelancer
  • Jobs & Karriere
  • Online-Marketing
  • SEO
  • UX Design
  • Webdesign
  • Website erstellen
  • WordPress
  • WooCommerce

Rechtliches

  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑
Menü
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Impressum
  • Kontakt
  • Nach oben ↑

Für Agenturen & Unternehmer

  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Menü
  • Als Agentur eintragen
  • Beste Agenturen finden
  • Städte: von A bis Z.
  • Agenturen in Augsburg
  • Agenturen in Basel
  • Agenturen in Berlin
  • Agenturen in Bochum
  • Agenturen in Bonn
  • Agenturen in Bremen
  • Agenturen in Dortmund
  • Agenturen in Dresden
  • Agenturen in Duisburg
  • Agenturen in Düsseldorf
  • Agenturen in Essen
  • Agenturen in Frankfurt
  • Agenturen in Freiburg
  • Agenturen in Hamburg
  • Agenturen in Hannover
  • Agenturen in Innsbruck
  • Agenturen in Karlsruhe
  • Agenturen in Köln
  • Agenturen in Leipzig
  • Agenturen in München
  • Agenturen in Münster
  • Agenturen in Regensburg
  • Agenturen in Salzburg
  • Agenturen in Stuttgart
  • Agenturen in Wien
  • Agenturen in Zürich
  • Digitalagentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
Das große Dr. Web Icon-Set: 970+ Icons, im SVG-Format​

Lade Dir jetzt das Icon-Set
kostenlos herunter ↓

Über 970 Dr. Web-Icons, kostenlos.
Danke nein, ist nichts für mich.
Invalid email address
Vielen Dank! Bitte schau noch in Dein Postfach und bestätige die Anmeldung.