Das Web-movelopment-Framework Bootstrap aus dem Hause Twitter ist in den letzten Jahren nicht umsonst eine der beliebtesten Methoden geworden, schnell und einfach neue Websites zu gestalten. Der Open-Source-Charakter des Frameworks macht es sowohl kostenlos nutzbar, als auch die Anpassung für eigene Zwecke möglich. Gleichzeitig räumt es viele Hindernisse, die sonst bei der Entwicklung responsiver Designs die Entwicklung verlangsamen, aus dem Weg. Damit nicht jede mit Bootstrap erstellte Website gleich aussieht und die Ergänzung rein optischer Tweaks für die Entwickler-Gemeinde einfacher wird, hat Twitter Bootstrap mit der Möglichkeit versehen, auf standardisierte Themes zurückzugreifen.

Material Design

Bei Android-Entwicklern schon länger beliebt, ist die von Google entwickelte „Material“-Designsprache. Mit der ist es App-Entwicklern möglich, ans Android-Flat-Design (ab Android 5 / Lollipop) angepasste Anwendungen mit dynamischen Elementen zu entwickeln. Da Google generell auch großes Interesse daran hat, möglichst viele Websites fit für den mobilen Einsatz zu machen, bietet es auch fertige Pakete an, mit deren Hilfe im Material-Design gestaltete Websites erstellt werden können.

Bootstrap um Material-Elemente erweitern

Der italienische Entwickler FezVrasta hat diese beiden Technologien zusammengebracht und ein wirklich sehr gelungenes Bootstrap-Theme im Material-Design entworfen. Das ganze Paket ist über GitHub verfügbar (oder kann dort natürlich auch geforkt und weiterentwickelt werden). FezVrasta hat das ganze unter der MIT-Lizenz lizenziert und ermöglicht damit den vollumfänglichen, kostenlosen Einsatz in jeder Art von Projekt. Auch kommerzielle Weiterentwicklungen sind damit denkbar. Eine Demo-Seite linnkout16, auf der sämtliche Material-Designelemente angeschaut werden können, die mit dem Paket generierbar sind, gibt es auch.

Foto: Google.com

Foto: Google.com

Voraussetzungen

Um das Paket nutzen zu können, musst du Bootstrap ab Version 3 verwenden (das bedeutet, wirklich alte Browser, wie Internet Explorer 7 oder Firefox 3 kannst du mit dem neuen Design nicht mehr erreichen, das dürfte aber für den durchschnittlichen Entwickler inzwischen auch keine große Rolle mehr spielen). Danach musst du dein Bootstrap-Projekt nur noch um die spezifischen Material-Design-Fonts, Javascript-Dateien und Stylesheets ergänzen. Über Cloud-Dienste wie Googles Font-API oder Cloudflares Code-CMS kannst du das sogar über zentrale Dienste erledigen und verfügst damit stets über die aktuellesten Versionen der entsprechenden Dateien.

Foto: Google.com

Foto: Google.com

Nutzung und Entwicklung

Danach greifst du auf die wesentlichsten Funktionen des Material Designs einfach zu, indem du deine Seite so gestaltest, wie du es von Bootstrap gewohnt bist. Menüs, Buttons, Formulare und Indikatoren lassen sich so, wenn du die Entwicklung mit Bootstrap bereits beherrschst, einfach so ins Material Design tauchen. Einige spezielle Funktionen, wie In-Site-Notifications mit Snackbars und Toasts oder auch Progress-Bars, erfordern ein paar zusätzliche Handgriffe, um die entsprechenden Javascripts zu aktivieren. Auch das ist aber insgesamt sehr einfach.

Insgesamt lässt sich festhalten, dass das Material-Design-Bootstrap-Theme eine ideale Möglichkeit darstellt, sich mit der Entwicklung von Material-Websites vertraut zu machen. Im Moment wird allerdings Bootstrap 4 noch nicht unterstützt. Dieses Feature soll aber bald nachgereicht werden. Unter Umständen, kann es sich also lohnen, den Einstieg in die neue Technik bis dahin noch hinaus zu zögern.