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.

Artikel veröffentlicht am ,
Eine Beispiel-App mit den X-Tags Appbar, Deck und Card
Eine Beispiel-App mit den X-Tags Appbar, Deck und Card (Bild: Mozilla/CC-BY-SA 3.0)

Baustein, in Englisch Brick, 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.

Stellenmarkt
  1. Softwareentwickler für C++ / Python (m/w/d)
    e.solutions GmbH, Erlangen
  2. Informatiker/in (m/w/d) (FH-Diplom / Bachelor / Fachinformatiker/in [m/w/d])
    Zentrum Bayern Familie und Soziales, Bayreuth, München
Detailsuche

Möglich macht die Brick-Bibliothek die sogenannten Web Components, die derzeit vom W3C standardisiert werden. 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 samt Demo-Code für die einzelnen Komponenten an. Zum Verwenden der Komponenten können die Bestandteile auf der Projektwebseite nach Bedarf ausgewählt und anschließend gebündelt heruntergeladen werden.

Golem Akademie
  1. Terraform mit AWS
    14.-15. Dezember 2021, online
  2. Advanced Python - Fortgeschrittene Programmierthemen
    27.-28. Januar 2022, online
  3. Linux-Systeme absichern und härten
    8.-10. November 2021, online
Weitere IT-Trainings

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

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Aktuell auf der Startseite von Golem.de
4700S Desktop Kit im Test
AMDs Playstation-5-Platine ist eine vertane Chance

Mit dem 4700S Desktop Kit bietet AMD höchstselbst die Hardware der Playstation 5 für den PC an. Das Board ist aber eine Sache für sich.
Ein Test von Marc Sauter

4700S Desktop Kit im Test: AMDs Playstation-5-Platine ist eine vertane Chance
Artikel
  1. Foxconn: Eigene Elektroautos unter dem Namen Foxtron vorgestellt
    Foxconn
    Eigene Elektroautos unter dem Namen Foxtron vorgestellt

    Mit dem Model T, Model C und Model E hat Auftragsfertiger Foxconn drei eigene Elektroautos vorgestellt.

  2. SUV mit Elektroantrieb: Tesla liefert neues Model X mit eckigem Lenkrad aus
    SUV mit Elektroantrieb
    Tesla liefert neues Model X mit eckigem Lenkrad aus

    Tesla hat die ersten Model X mit dem neuen Lenkrad, quer eingebautem Display und Falcon-Wings-Türen ausgeliefert.

  3. PC-Version: Guardians of the Galaxy braucht galaktisch Speicherplatz
    PC-Version
    Guardians of the Galaxy braucht galaktisch Speicherplatz

    Das müsste Platz drei der Platzverwender sein: Das für Ende Oktober 2021 angekündigte Guardians of the Galaxy ist datenhungrig.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • Cyber Week: Bis zu 360€ auf Gaming-Monitore & bis zu 22% auf Be Quiet • LG-TVs & Monitore zu Bestpreisen (u. a. Ultragear 34" Curved FHD 144Hz 359€) • Bosch-Werkzeug günstiger • Dell-Monitore günstiger • Horror-Filme reduziert • MwSt-Aktion bei MM: Rabatte auf viele Produkte [Werbung]
    •  /