Fuel UX: Moderne Interface-Elemente für Twitters Bootstrap

Kein Beitragsbild

Dieter Petereit

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

Twitters Bootstrap ist ein stetig beliebter werdendes Framework für moderne Benutzeroberflächen. Ein regelrechtes Ökosystem ist rund um das Produkt entstanden. Drittentwickler kümmern sich um die Lücken und Spielräume, die das Framework offen lässt. Fuel UX liefert einige UI-Elemente nach, von denen man gehofft hätte, sie wären von Beginn an dabei gewesen.

Fuel UX: Kleine Sammlung kleiner Scripte mit großer Wirkung

Fuel UX von ExactTarget aus Indianapolis ist eine kleine Sammlung von fünf Interface-Elementen, die in Web-Projekten im Grunde stets benötigt werden. Jedes Element ist als einzelnes JS-File angelegt und integriert sich über die Styles aus Bootstrap nahtlos in entsprechende Websites. Lösungen der gebotenen Art gibt es im Grunde mannigfaltig, die Besonderheit an Fuel UX ist eben die Integration in Bootstrap.

Datagrid.js

Mir persönlich gefällt Datagrid.js am besten. Datagrid sorgt für eine tabellarische, dabei sortierbare Darstellung des Inhalts einer Datenquelle. Die gesamte Steuerung auf Benutzerseite erfolgt über Klassen. So ist keinerlei zusätzliches Javascript mit Ausnahme des reinen Function Call erforderlich.

Combobox.js und Search.js

Combobox kombiniert die freie Eingabe eines Suchbegriffs mit der Auswahl aus einer Dropdown-Liste , während Search.js ein klassisches Eingabefeld für einen freien Suchbegriff anbietet. Auch hier erfolgt die Implementation innerhalb des HTML mit Klassen und Data-Attibuten.

Spinner.js und Pillbox.js

Pillbox ist eine einfache Möglichkeit, Text-Elemente farbzukodieren. Mit Klassen, die sprechend benannt sind, etwa status-warning erreicht man unterschiedlich umfärbte Text-Label, die besonders zur Darstellung von Tags in modernen Websites immer gängiger werden. Auch hier ist das Markup sehr simpel und nachvollziehbar. Zuguterletzt liefert ExactTarget mit Spinner.js ein kleines Element, dessen Sinn darin besteht, per Klick auf Pfeil nach oben oder unten, numerische Werte in Formularfeldern hoch oder herab zu zählen.

Fuel UX wurde mit Version 2.0 erstmals öffentlich zugänglich gemacht. Seither sind sechs Wochen vergangen. Die Entwickler haben inzwischen vier Updates vorgelegt, aktuell ist die Version 2.1.1 vom 10. November.

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

E-Book Bundle von Andreas Hecht

Fuel UX wird unter der MIT-Lizenz kostenlos sowohl für private, wie auch kommerziele Zwecke überlassen.

Links zum Beitrag:

  • Fuel UX Demo-Seite – Github
  • Fuel UX im Repository – Github
  • ExactTarget Entwicklerprofil – Github
  • Bootstrap 2: Twitters WebApp-Toolkit wird zur Plattform – Dr. Web Magazin

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 "Fuel UX: Moderne Interface-Elemente für Twitters Bootstrap"

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

Weil mir sass näher liegt und ich beides schon getestet habe, bleibe ich bei foundation von zurb, obwohl mir bootstrap zuerst besser gefallen hat.

Martin Fieber
Gast

Wunderbare Sache, das Datagrid ist genau das was ich zufällig suchte für Bootstrap. Schnell und einfach und reicht für einfache Aufgaben die zeitliche Begrenzung haben, danke!

wpDiscuz