Vorheriger Artikel Nächster Artikel

Jetstrap: Praktisches Entwicklungstool für Twitter Bootstrap

Jetstrap ist ein mächtiger Interface Builder für das Framework von . 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.

Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von AndroTux am 01.10.2012 (16:34 Uhr)

    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 :)

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

    Korrigiert, danke.

    Ciao
    Johannes

    Antworten Teilen
  3. von danielursi am 01.10.2012 (17:36 Uhr)

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

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

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

Jetzt anmelden

Mehr zum Thema Twitter
Bootstrap/386: Umfangreiches Bootstrap-Theme im Retro-Look
Bootstrap/386: Umfangreiches Bootstrap-Theme im Retro-Look

Retro-Fetischisten und IT-Liebhaber könnten mit dem neuen „Bootstrap/386“-Theme voll auf ihre Kosten kommen. Damit sehen Webseiten aus wie klassische User-Interfaces in den 80er- und 90er-Jahren. » 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: 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

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen