Material Kit: Material Design für Bootstrap

Einfaches Erstellen von Material-Design-Interfaces mit Bootstrap

Material Kit – Material Design für Bootstrap

Das Material Design erfreut sich ungebrochener Beliebtheit. Wie genau eine Website in diesem Stil aussieht, wird inzwischen wohl schon jeder wissen. Nun wurde das neues UI-Set „Material Kit“ veröffentlicht, das die Erstellung von Material-Design-Interfaces mit Bootstrap vereinfachen soll.

Der typische Look-and-Feel des Material Designs lässt sich bereits auf vielen Wegen in Projekte einbinden. Angefangen hat es im vorletzten Jahr mit Designoptionen für mobile Apps, doch dabei blieb es nicht. Schnell griffen Webentwickler und -designer die Idee der klaren Linien und haptischen Anordnungsprinzipien auch für andere Plattformen auf.

Themes und Frameworks

Angular Material bietet Optionen zur Implementierung des Designs in AngularJS-Anwendungen; mit Material Design Lite stellt Google selbst eine Library zur Verfügung, die für Projekte auf fast allen Plattformen verwendet werden kann. Auch für Bootstrap gibt es bereits Lösungen: Material Design for Bootstrap (MDB) stellt eine Vielzahl an Designelementen zur Verfügung, in der Grundversion ist sie kostenlos. Auch Paper Elements stellt eine solche Implementierung der Designstandards für Bootstrap dar – allerdings ist sie wesentlich schlanker und weniger umfangreich als MDB.

Material Kit, das neuste Mitglied der Material-Design-Familie, entstand auf der Codebasis von Paper Elements und ist somit ebenfalls auf Bootstrap-Anwendungen ausgerichtet, bringt allerdings noch einmal einen eigenen Look mit. Anders als viele andere Implementierungen bietet Material Kit ein Design an, das farblich eng an den von Google vorgeschlagenen Standards bleibt. Neuerungen gibt es hier viel mehr auf Ebene der Nutzerinteraktionen zu sehen, nicht rein in der Optik. Auch bietet das neue UI-Kit die Möglichkeit zur Verwendung von JavaScript-Komponenten, die nicht von allen Konkurrenten unterstützt werden.

Material Kit: Karussells und Co.

Die Karussell-Lösung sticht dabei besonders hervor. Zusätzlich zu den Auswahl-Buttons am unteren Ende der Diashow ermöglicht das neue UI-Kit eine Navigation durch die Bilderauswahl, bei der sich der Mauszeiger je nach Position im Bild in einen Pfeil verwandelt. Für Formulare bringt das UI-Kit gleich Effekte zur Inline-Validation mit.

Notifications in Material Kit; Quele: http://demos.creative-tim.com/material-kit/index.html

Außerdem umfasst das Material Kit drei Beispiel-Seiten, die den Einstieg in die Arbeit damit vereinfachen sollen. Diese umfassen eine Login-Seite, eine Lading-Page und eine Profil-Seite, zu deren Verwendung jeweils nur die eingefügten Bilder ausgetauscht werden müssen.

Märchenhaft detailliert

Das UI-Kit steht grundsätzlich kostenlos zum Download zur Verfügung. Wer kommerziell damit arbeiten und mehr als eine Website erstellen möchte, zahlt jedoch 19$. Um nun einen Eindruck vom Material Kit zu bekommen, lohnt sich ein Blick auf die Demo – oder auch zwei, denn dann lassen sich dort viele coole Details entdecken. Zum Beispiel eine Aufforderung dazu, schon mal zu überlegen, welche Ausrede man dem Chef für den nächsten Serverfehler präsentieren könnte oder ein kleines Märchen aus dem Land des Blindtexts …