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. Scrum Master (m/f/d)
    Advantest Europe GmbH, Böblingen
  2. Software Tester / Softwaretester (m/w/d)
    AGROLAB GMBH, Landshut
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 Karrierewelt
  1. AZ-500 Microsoft Azure Security Technologies (AZ-500T00): virtueller Vier-Tage-Workshop
    30.01.-02.02.2023, virtuell
  2. Deep Dive: Data Governance Fundamentals: virtueller Ein-Tages-Workshop
    22.02.2023, Virtuell
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
Tesla-Fabrik
In Grünheide soll "totales Chaos" herrschen

Die Tesla-Fabrik in Grünheide hinkt ihren Produktionszielen noch weit hinterher. Es gibt zu wenig Personal oder die Mitarbeiter kündigen wieder.

Tesla-Fabrik: In Grünheide soll totales Chaos herrschen
Artikel
  1. Elbit Systems Deutschland: Neue Bundeswehr-Funkgeräte lösen Retrogeräte von 1982 ab
    Elbit Systems Deutschland
    Neue Bundeswehr-Funkgeräte lösen Retrogeräte von 1982 ab

    Vor rund einem Jahr hat das Beschaffungsamt der Bundeswehr für 600 Millionen Euro Tausende Funkgeräte aus dem Jahr 1982 nachbauen lassen. Nun werden ganz neue angeschafft.

  2. Europäischer Rat: Einigung über Bargeldobergrenze von 10.000 Euro
    Europäischer Rat
    Einigung über Bargeldobergrenze von 10.000 Euro

    Der Europäische Rat hat sich auf eine Bargeldobergrenze von 10.000 Euro verständigt. Auch Kryptowährungen sollen streng reguliert werden.

  3. Angespielt: Diablo 4 wird brutal, makaber und ein bisschen eklig
    Angespielt
    Diablo 4 wird brutal, makaber und ein bisschen eklig

    Open-World-Freiheiten, dynamische Events und eine geteilte Spielwelt: Golem.de hat Diablo 4 angespielt und mit den Entwicklern gesprochen.
    Von Olaf Bleich

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 • PS5 bei Amazon bestellbar • Tiefstpreise: Asus RTX 4080 1.689,90€, MSI 28" 4K 579€, Roccat Kone Pro 39,99€, Asus RTX 6950 XT 939€ • Alternate: Acer Gaming-Monitor 27" 159,90€, Razer BlackWidow V2 Mini 129,90€ • 20% Extra-Rabatt bei ebay • Amazon Last Minute Angebote [Werbung]
    •  /