Drücke die Tasten ◄ ► für weitere Artikel  

Jetstrap: Praktisches Entwicklungstool für Twitter Bootstrap

Jetstrap ist ein mächtiger Interface Builder für das Bootstrap Framework von Twitter. Der Online-Dienst erlaubt das Entwerfen von Layouts via Drag&Drop und gibt die Entwürfe anschließend als sauberes HTML aus.

Jetstrap: Praktisches Entwicklungstool für Twitter Bootstrap

Jetstrap ist ein zu 100% webbasiertes Interface Building Tool für Twitter Bootstrap. Das Tool ist gleichermaßen für für Entwickler und Designer ausgelegt. Es soll dabei helfen, coole Layouts schnell zu entwerfen und für die Weiterverarbeitung bereit zu machen, ohne sich dafür durch verschiedene Dokumentationen wühlen zu müssen. Dafür stellt Jetstrap eine Reihe von Komponentensnippets zur Verfügung, die anschließend als sauberes HTML und CSS exportiert werden können.

Nach einer kurzen Anmeldung kann direkt losgelegt werden.

Jetstrap Interface

Die Entwürfe in Jetstrap sind in so genannten Screens angeordnet. Bei der Erstellung neuer Screens kann auf Vorlagen zurückgegriffen oder mit einer vollkommen leeren Seite gearbeitet werden.

Das eigentliche Arbeitsinterface von Jetstrap erinnert ein wenig an ein Textverarbeitungsprogramm. In der Mitte befindet sich das Dokument. Links daneben eine Leiste mit den jeweiligen Komponentensnippets. Rechts öffnet sich kontext-sensitiv ein Inspektor für die jeweilig platzierten Komponenten. Im unteren Bereich kann ein CSS- und HTML-Inspektor hinzugeschaltet werden, der eine tiefergehende Bearbeitung des Entwurfs ermöglicht.

Screenshot von Jestrap
Screenshot von Jetstrap

Responsive Layout mit Jetstrap

Komponenteninspektor

Ähnlich wie beim Layout Tool moqups können die Komponenten durch Drag&Drop auf der Arbeitsfläche positioniert werden. Diese unterteilen sich in die Bereiche Buttons, Typo, Container, Navigation, Formulare, Gerüste und Tabellen.

Nach einem Klick auf die jeweis platzierten Komponenten öffnet sich der Komponenten Inspektor auf der rechten Seite und ermöglicht grundlegene Anpassungen wie z.B. die Vergabe von Ids und Klassen sowie anderer komponentenspezifischer Eigenschaften.

Nach einem Doppelklick wird die Bearbeitung innerhalb des Elementes möglich. Textänderungen, Formatierungen, Verlinkungen etc. können so schnell vorgenommen werden.

Zusätzlich dazu kann via HTML/CSS Inspektor eine tiefergehende Bearbeitung des Quellcodes und eine Erweiterung des CSS-Stylesheets erfolgen. Durch die Vergabe von Ids und Klassen im Komponenten-Inspektor wird eine sehr flexible Bearbeitung der Entwürfe möglich. Aus dem Inspektor heraus kann dann auch der komplette Entwurf exportiert und heruntergeladen werden. Jetstrap liefert den HTML-Code inklusive CSS-Stylesheets, Bildern und JavaScript als Zip-File.

Neben den Bearbeitungsfunktionen hat Jetstrap eine Preview Funktion. Mit dem Switch oben rechts (Schraubenschlüssel/Auge) kann zwischen beiden Ansichten hin- und hergeschaltet werden. Während in der Bearbeitungsansicht, wie der Name schon sagt, Elemente bearbeitet werden können, blendet die Previewansicht überflüssiges Markup aus.

So kann man ungestört die Darstellung des Entwurfs für verschiedene Geräte Typen begutachten. Jetstrap gibt eine Preview des Layouts auf Smartphones, Tablets, Desktops und Big Screen Devices (Fernseher etc) aus.

Nützliches Tool mit Kinderkrankheiten

Jetstrap bietet die Möglichkeit, Layouts auf Bootstrap--Basis schnell und einfach zu erstellen. Dabei kann man mit dem Drag&Drop und Komponenteninspektor oder auf Codebasis arbeiten. Die Exportfunktion liefert eine saubere und gut zur Weiterverarbeitung geeignete Ordner und Dateistruktur. Im Test haben sich jedoch einige Probleme mit der Nutzung von Jetstrap ergeben: In einigen Browsern gab es Schwierigkeiten mit der Nutzung der Drag&Drop und Bearbeitungsfunktionen. Am stabilsten lief Jetstrap im Google Chrome. Da es sich bei der jetzigen Version von Jetstrap immer noch um eine Beta handelt, dürften auch diese Fehler in Zukunft ausgebessert werden.

Auf der Webseite von Jetstrap könnt ihr euch selbst von den Qualitäten des Tools überzeugen.

Der Autor

Ilja Zaglov Ilja Zaglov ist selbstständiger Kommunikations- & Mediendesigner und Software-Entwickler. Er unterstützt kleine und mittelständische Unternehmen bei der Erstellung von Online- und Offline-Medien. Neben Web-Gestaltung gehören Motion-Graphics und 3D-Inhalte zu seinen Spezialgebieten.

115 Shares bis jetzt – Dankeschön!

Bewerten
VN:F [1.9.22_1171]
10 Antworten
  1. von AndroTux am 01.10.2012 (16:34Uhr)

    In der "Über den Autor"-Section steht statt "Neben" "Naben" und hinter dem ersten Punkt wird klein mit einem "und" weitergeschrieben.. wollte nur mal darauf hinweisen :)

  2. von Johannes Haupt am 01.10.2012 (16:42Uhr)

    Korrigiert, danke.

    Ciao
    Johannes

  3. von René Hornig via facebook am 01.10.2012 (17:28Uhr)

    super … ick hab heut 2h für ein psd gebraucht um ein bootstrap theme zu definieren … hättet ihr das nicht früher publizieren können? :D

  4. von danielursi am 01.10.2012 (17:36Uhr)

    echt cooles Tool, zumal Bootstrap echt klasse ist, jedoch läuft es bei mir noch etwas buggy mit den drag&drop elementen.

  5. von t3n Magazin via facebook am 01.10.2012 (17:41Uhr)

    Sorry René ;)

  6. von Daniel Sigl via facebook am 01.10.2012 (23:45Uhr)

    Hallo t3n Magazin-Team :) wisst ihr vielleicht, ob es auch sowas wie jetstrap zum Erstellen von Android Apps gibt? Danke im Voraus, LG Daniel

  7. von Jetstrap: Praktisches Entwicklungstool f… am 02.10.2012 (01:27Uhr)

    [...] Jetstrap: Praktisches Entwicklungstool für Twitter Bootstrapt3n MagazinIn der Mitte befindet sich das Dokument. Links daneben eine Leiste mit den jeweiligen Komponentensnippets.  [...]

  8. von Tobias Küttner via facebook am 02.10.2012 (11:10Uhr)

    super

  9. von Ilja Zaglov via facebook am 02.10.2012 (13:37Uhr)

    Daniel Sigl, für Native Apps wage ich es stark anzuzweifeln. Aber grundsätzlich spricht nicht viel dagegen ein HTML5-App mit z.b. Phonegap (phonegap.com) aufs Android zu bringen und für das Layout Bootstrap zu benutzen.

  10. von Bootstrap Designer: HTML5-Template-Tool… am 08.12.2012 (16:01Uhr)

    [...] sowohl für Designer als auch für Webworker, haben wir euch bereits mit dem derzeit kostenfreien Jetstrap [...]

Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema Twitter
Bootstrap: Mit diesen 10 Tools und Erweiterungen holst du mehr aus Twitters Framework raus
Bootstrap: Mit diesen 10 Tools und Erweiterungen holst du mehr aus Twitters Framework raus

Bootstrap 3 von Twitter bietet eine ausgezeichnete Grundlage für die Webentwicklung. Wir stellen euch zehn Tools und Erweiterungen vor, mit denen ihr noch mehr aus der aktuellen Version rausholt. » weiterlesen

Bootstrap 3.1 ist da: Wir zeigen euch die Neuerungen
Bootstrap 3.1 ist da: Wir zeigen euch die Neuerungen

Bootstrap 3.1 steht ab sofort zum Download bereit. Zu den neuen Features gehört unter anderem ein offizieller Sass-Port. » weiterlesen

Bootstrap-3-Ausblick: Was die neue Version leisten kann
Bootstrap-3-Ausblick: Was die neue Version leisten kann

Die Veröffentlichung von Bootstrap 3 steht vor der Tür. Der RC2 des beliebten Frontend-Framework zeigt deutlich, wo die Reise hingehen soll. » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n 35 jetzt kostenfrei probelesen! Alle Inhalte des t3n Magazins Diesen Hinweis verbergen