CSS

Killer-Websites: Die 10 besten Erweiterungen für Twitters Bootstrap

10. Juli 2013
von

Bootstrap ist der Star am Himmel der Frameworks und erhält ungebrochen viel Aufmerksamkeit. Nicht einmal der Hersteller, Twitter, wird zur Geburtsstunde im August 2011 geahnt haben, wie groß das Projekt noch werden würde. Selbst heute, im Juli 2013, ist Bootstrap immer noch das beliebteste Projekt auf Github und vereinigt über 52k Stars und über 16k Forks auf sich. Bootstrap ist in sich schon beeindruckend genug. Kaum war es je einfacher, komplexe Webseiten zu erstellen. Wie sollte man solch ein System noch verbessern? Gibt es Werkzeuge, die Bootstrap noch besser machen? Ja, die gibt es in der Tat und im folgenden Beitrag zeige ich Ihnen die nach meiner Meinung 10 besten ihrer Art.

1. Jetstrap

image002_0000-w550

DER Twitter Bootstrap Builder: Das ist nicht nur ein Mock-Up Tool, Jetstrap ist das Tool der Wahl zur Erstellung von Bootstrap-Interfaces.

Glauben Sie mir, das ist wirklich keine Übertreibung. Wenn Sie etwas Unterstützung bei der Erstellung von Bootstrap-Oberflächen benötigen, oder es sich einfach einfacher machen wollen, dann ist Jetstrap genau das Tool, das Sie verwenden werden.

Jetstrap erklärt selbst warum: “Das Leben ist zu kurz, um sich durch Dokumentationen zu wühlen, wenn man einfach nur Websites bauen will. Schnappen Sie sich Schnipsel sauberen Codes und bringen so simpel auch komplexe Komponenten an den Start. Kommen Sie einfach schneller in die Gänge!” Und genau so ist es auch. Da es so einfach zu verwenden ist, ist es perfekt sowohl für Designer, wie auch Entwickler geeignet. Das Konzept ähnelt dem des Mitbewerbers Divshot. Gelangen Sie per Drag and Drop zu genau dem Ergebnis, das Sie benötigen.

Wie es funktioniert: Das simple Drag-and-Drop-Interface erlaubt es, eine Seite schnell mit Bootstrap-Elementen zu bevölkern. Haben Sie die Seite zusammengeschoben, exportieren Sie den Code und … gehen in die Stadt oder an den See oder ins Kino…
Preismodell: Kommerziell, beginnt bei 16 USD monatlich.
Video: http://youtu.be/AuTo_6id3J8
Website: http://www.jetstrap.com

2. Kickstrap

image004_0000-w550

Ein kompletter Werkzeugkasten für Website-Design: Als erstes seiner Art ist Kickstrap ein installationsloses Frontend-Framework mit Apps, Themes und anderen Extras.

Auf den ersten Blick ähnelt Kickstrap dem eben genannten Jetstrap, ist dabei aber durchaus deutlich anders. Es zielt nämlich primär darauf ab, Bootstrap zu erweitern. So fügt es Bootstrap etwa JavaScript-Bibliotheken wie Raphael.js (Demo mit Kickstrap), Extras wie Font Awesome und sogar Themes aus Bootswatch hinzu.

Wie es funktioniert: Denken Sie sich Kickstrap wie eine Mehrfachsteckdose für eine typische Bootstrap-Seite. Men steckt verschiedene Komponen hinein und alle funktionieren gleichzeitig.
Preismodell: frei verwendbar (Stand: Juli 2013)
Video: http://vimeo.com/55423707#at=0
Website: http://getkickstrap.com/

3. Paintstrap

image006_0000-w550

Paintstrap generiert sehenswerte Twitter Bootstrap-Themes aus Adobe Kuler- / COLOURlovers-Paletten

Dieses Tool ist zu Unrecht zu unbekannt, hat aber großes Potenzial. Warum? Nun, Bootstrap kommt zwar mit Farben daher, nur wie oft passen diese wirklich zum gewünschten Farbsetting? Ich sage es Ihnen: Im Grunde nie. Typischerweise legt der Kunde etwas zielgebendes vor, und wenn es nur das Logo ist. Vielfach bestehen aber auch bereits zum CI gehörige Farbpaletten, an denen man nicht vorbei kommt.

Paintstrap arbeitet nun nicht nur mit diesen Vorgaben, sondern integriert COLOURlovers und Adobe Kuler in den Prozess, um die Paletten CI-gerecht zu erweitern. Das produziert im Regelfall großartige Ergebnisse.

Wie es funktioniert: Übergeben Sie die Kuler Theme-ID oder COLOURlovers Paletten-ID, dann wählen Sie die gewünschten Farben für die verschiedenen Elementen anhand einer Live-Preview. Haben Sie alles beisammen, exportieren Sie nach CSS oder LESS.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://paintstrap.com/

4. Divshot

image008-w550

Ein weiterer Interface-Builder für Web-Apps: Drag-And-Drop, exportiert responsives HTML & CSS, befindet sich noch in Beta.

Divshot ist ein direkter Wettbewerber zu Jetstrap. Die Ziele und Funktionalität sind sehr ähnlich. Auch in Divstrap zieht und schiebt man sich seine App zusammen und erhält am Ende den entsprechenden Code. Der wesentliche Unterschied besteht darin, dass Divstrap von sich selbst behauptet, den saubersten Code zu produzieren und die beste Bootswatch-Integration zu bieten. Der wesentlichste Unterschied indes ist der Preis. Divstrap kostet nämlich nichts.

Wie es funktioniert: Lesen Sie weiter oben unter Jetstrap nach ;-)
Preismodell: frei verwendbar (Stand: Juli 2013). Ich erwarte allerdings ein kommerzielles Angebot, sobald die Beta-Phase beendet ist.
Video: http://youtu.be/g9KhSUgf38A
Website: http://www.divshot.com/

5. Fancyboot

image010-w550

Fancyboot: Bootstrap anpassen leicht gemacht. Dieses Tool ist für echte Bootstrap-Liebhaber gedacht.

Wenn Sie gern an Ihren Bootstrap-Dateien feilen und dabei eine permanente Live-Preview zu schätzen wissen, dann ist Fancyboot auf jeden Fall einen näheren Blick wert. Es gibt neben Echtzeit-Previews noch Farbwähler und weitere Variablen. Fancyboot ist gut geeignet, um schnell Veränderungen an einer bestehenden Bootstrap-Seite vorzunehmen.

Wie es funktioniert: Wählen Sie die Plugins und Komponenten, die Sie in das Projekt nehmen wollen. Dann wählen Sie über das seitlich angeordnete Menü die Farbpalette. Sie erhalten direkt eine Echtzeit-Preview, die es Ihnen ermöglicht, unmittelbar ins Finetuning einzusteigen.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://fancyboot.designspebam.com/

6. Bootswatch

image012-w550

Bootswatch:
Freie Themes für Twitter Bootstrap

Wenn Sie bis hierhin gelesen haben, dann ist Ihnen Bootswatch schon ein paar Mal begegnet. Das liegt daran, dass es sich so gut in andere Bootstrap-Anwendungen integriert. Bootswatch hat einen sehr einfachen Anwendungszweck. Es liefert kostenlose Themes für Bootstrap. Alle sind vorgefertigt bis zu dem Punkt, an dem Sie gar nichts mehr tun müssen…

Wie es funktioniert: Laden Sie das CSS herunter und verwenden Sie es.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://bootswatch.com/

7. Bootsnipp

image014-w550

Bootsnipp: Design-Elemente und Code-Snippets für Bootstrap

Bootstrap macht die Verwendung von Elementen in Seiten schon ziemlich einfach. Manchmal würde man aber gern mehrere wiederkehrende Elemente auf ein und derselben Seite einsetzen. Hier kam bislang der Entwickler ins Spiel. Mit Bootsnipp kann jeder Designer diese Dinge selbst erledigen. Bootsnipp erlaubt es, nützliche Schnipsel von Bootstrap-Code einfach in die Seite einzukopieren. Beispielschnipsel beinhalten Preisübersichten, Adress- und Bezahlformulare, Anmeldefeatures und vieles mehr.

Wie es funktioniert: Klicken Sie auf den gewünschten Schnipsel und wählen Sie den Quellcode aus. Kopieren Sie ihn in Ihre Site, fertig.
Preismodell: frei verwendbar (Stand: Juli 2013), um ein kleines Trinkgeld wird gebeten
Website: http://bootsnipp.com/

8. Form Helpers

image016-w550

Bootstrap Form Helpers: erweitert Bootstraps Komponenten um 12 jQuery-Plugins.

Wenn Ihnen Bootstrap im Auslieferungszustand nicht genug Funktionalität bietet, dann wenden Sie sich vertrauensvoll an die Bootstrap Form Helpers. Auch hier fügen Sie sehr einfach Codeschnipsel in Ihre Projekte ein und erhalten dadurch so schicke Features wie Länderlisten, die sich automatisch befüllen, Select-Boxen mit Filtern oder automatisch formatierte Telefonnummern und vieles mehr.

Wie es funktioniert: Der Einsatz besteht im Wesentlichen daraus, das Tool herunter und wieder herauf zu laden. Wollen Sie Gebrauch von weiteren Parametern machen, die Website bietet ausführliche Anleitungen.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://vincentlamanna.com/BootstrapFormHelpers/

9. Bootstrap Lightbox

image018-w550

Bootstrap Lightbox: ein simples Lightbox-Plugin, basierend auf Bootstraps Modal-Plugin.

Dieses hier ist einfach, aber dennoch wertvoll. Es bläst nämlich die vorhandene Lightbox-Funktionalität auf der Basis des Modal-Plugins zu etwas deutlich sehenswerterem auf. Probieren Sie es selbst. Sie werden mir zustimmen.

Wie es funktioniert: Der Einsatz besteht im Wesentlichen daraus, das Tool herunter und wieder herauf zu laden. Wollen Sie Gebrauch von weiteren Parametern machen, die Website bietet ausführliche Anleitungen.
Preismodell: frei verwendbar (Stand: Juli 2013)
Website: http://jbutz.github.io/bootstrap-lightbox/

10. Built with Bootstrap

image020-w550

Ein Showcase von Sites und Apps, die mit Twitter Bootstrap erstellt wurden

Unsere letzte Vorstellung zeigt Ihnen, wie echte, hochglanzpolierte Bootstrap-Seiten aussehen können. Built with Bootstrap ist im Grunde eine Galerie von Websites, die in der ein oder anderen Weise Gebrauch von Bootstrap machen. Ich finde die Beispiele ausgesprochen gelungen und verwende die Site stets zu Inspirationszwecken. Schon mehr als einmal habe ich mir dort neue Ideen geholt.

Wie es funktioniert: Schauen Sie selbst auf http://builtwithbootstrap.com/
Preismodell: frei verwendbar (Stand: Juli 2013), aber voller Werbung
Website: http://builtwithbootstrap.com/

Ich hoffe, diese 10 Bootstrap-Ressourcen gefallen Ihnen so sehr wie mir. Kennen Sie weitere, die ich unbedingt auch kennen sollte? Lassen Sie es mich wissen, hier unten, in den Kommentaren.

Der Autor:

Ryan Boog ist Eigentümer von Happy Dog Web Productions, einer Firma, die sich die Entwicklung von mobilen und Web-Apps, sowie die Unterstützung in Sachen SEO auf die Fahnen geschrieben hat. Wollen Sie mehr von HDWP lesen, dann folgen Sie dem Unternehmen auf Twitter oder Facebook.

(dpe)

Unter der Bezeichnung "Redaktion Dr. Web" finden Sie Beiträge, die von mehreren Autorinnen und Autoren kollaborativ erstellt wurden. Auch Beiträgen von Gastautoren sind hier zu finden. Beachten Sie dann bitte die zusätzliche Autorenangabe im Beitrag selbst.

Tags: , , ,

3 Kommentare zu „Killer-Websites: Die 10 besten Erweiterungen für Twitters Bootstrap
  1. Nina am 10. Juli 2013 um 11:43

    Cool, dass auch was kostenloses dabei ist ;) Gute Auflistung, sehr interessant.

  2. Christoph Paterok am 10. Juli 2013 um 17:50

    Klasse Auflistung, Danke!

    Übrigens: JetStrap kann man auch kostenlos nutzen! Man hat die Möglichkeit ein Projekt zu bearbeiten. Hier der Link: https://jetstrap.com/plans/signup/free

  3. Manuel Schmöllerl am 14. Oktober 2013 um 21:18

    Danke für die tolle Auflistung. Da ich mich gerade mit bootstrap befasse, kommt dieser Artikel sehr gelegen ;-)

Ein Kommentar? Schön!

Wir freuen uns immer über Leser, die durch nützliche und konstruktive Beiträge zum Thema eine Diskussion anstoßen oder den Artikel mit weiteren Informationen anreichern. Alle Kommentare werden in diesem Sinne moderiert. Zum Kommentar-Fairplay gehört für uns auch der Einsatz von rel="nofollow". Bitte verwenden Sie zudem als Namen weder eine Domain noch ein spamverdächtiges Wort. Vielen Dank!