Zum Hauptinhalt Zur Navigation

Mozilla Brick 1.0: Wiederverwendbare UI-Komponenten für Web-Apps

Mit Mozillas Brick soll es einfacher sein, Web-Apps zu schreiben. Der Javascript- und CSS-Code stellt dafür vielfach verwendete UI-Komponenten zur Verfügung, die sich einfach per eigenem HTML-Tag einbinden lassen.
/ Sebastian Grüner
7 Kommentare News folgen (öffnet im neuen Fenster)
Eine Beispiel-App mit den X-Tags Appbar, Deck und Card (Bild: Mozilla/CC-BY-SA 3.0)
Eine Beispiel-App mit den X-Tags Appbar, Deck und Card Bild: Mozilla/CC-BY-SA 3.0

Baustein, in Englisch Brick(öffnet im neuen Fenster) , nennt Mozilla seine kleine Bibliothek, die vielfach verwendete UI-Elemente für Webanwendungen und damit zum Beispiel auch für Firefox OS nun in Version 1.0 bereitstellt.

Möglich macht die Brick-Bibliothek die sogenannten Web Components , die derzeit vom W3C standardisiert werden(öffnet im neuen Fenster) . Damit kann jeder seine eigenen, komplexen HTML-Elemente selbst bauen oder eben über Bibliotheken wie Brick benutzen. Die einzelnen Bestandteile von Brick lassen sich nach dem Einbinden des Codes auf der Webseite einfach über ein HTML-Tag benutzen.

Derzeit beinhaltet Brick neben einem einfachen Kalender auch verschiedene Elemente wie Auswahlknöpfe, eine Menü- oder auch eine Tab-Leiste. Zusätzlich dazu lässt sich das Layout einer Anwendung mit Brick einfach erstellen und auch Animationen wie das Umdrehen der App-Oberfläche oder das Durchlaufen verschiedener Kacheln ist möglich.

Auf der Webseite von Brick bietet Mozilla eine ausführliche Dokumentation(öffnet im neuen Fenster) samt Demo-Code für die einzelnen Komponenten an. Zum Verwenden der Komponenten können die Bestandteile auf der Projektwebseite nach Bedarf ausgewählt(öffnet im neuen Fenster) und anschließend gebündelt heruntergeladen werden.

Der Projektcode steht für Interessierte unter der Apache-Lizenz über Github(öffnet im neuen Fenster) bereit. Zur Entwicklung sind Node.js und die Pakete Bower sowie Grunt notwendig.


Relevante Themen