Material-Design von Google ist derzeit ein beliebter Trend in App-Interface-Design, welches nicht nur für ihre Anwendungen, sondern auch für Web-und Hybrid-Anwendungen benützt werden kann. Da dieses System und die Design-Philosophie Designelemente wie Schatten, Farbe, Animation etc.

vereint, worüber wir letzte Woche in unserem Artikel über die Bewältigung von Materialdesign gesprochen haben, haben wir uns entschlossen, die besten Frameworks zu finden, um Ihnen bei der Erstellung von MD-Anwendungen behilflich zu sein.

Also, hier sind sie: unsere Top 11 kostenlosen Picks, die Ihnen helfen sollen Material in Ihrem zukünftigen Web-Projekt zu implementieren.


1. Angular-Material

Angular JS ist ein weitgehend populäres Open-Source-Web-Entwicklungs-Framework, das Sie verwenden können, um Material Design UI-Elemente in Ihr Projekt einzubauen. Angular Material veröffentlichte kürzlich eine stabile v1, aber es wird davon gesprochen, dass v2 in der Entwicklungsphase ist. Kann es kaum erwarten, es zu sehen!

2. Essence

Beschrieben als „kohäsiv, durchdacht und robust“ und „konzentriert auf intuitive und natürliche Interaktion“, ist Essence ein CSS-Framework basiert auf Reaktion, das Ihnen ermöglicht, Material-Design zu implementieren und schnell und intelligent aussehende mobile und Web-Schnittstellen zu erstellen. Sie können es von Github oder NPM herunterladen.

3. LumX

Ein weiteres AngularJS-artiges Framework (genehmigt und verwaltet von Google), LumX bietet „gut animierte CSS und JavaScript-Komponenten.“ Es wurde mit Sass und Bourbon gebaut, um Ihnen zu verhelfen App Design schnell anzupassen; seine Performanzen sind mit Gulp und „nur einem kleinen Stück von jQuery“ optimiert worden, aber ohne irgendeinen seiner Plugins. Sie können es von Github leicht herunterladen.

4. Material

Daemonite’s Material UI ist ein Framework, welches erdacht wurde, um Googles Material Design Visuals mit Bootstrap-Frontend-Technologie zu kombinieren. Sie können zuerst die Material-Dokumentation lesen und dann einfach auf Ihr Gerät herunterladen.

5. Material Design für Bootstrap

Hier ist ein weiteres Frontend Framework, das Sie verwenden können, um die Google-MD  mit Bootstrap anzuwenden. Es basiert sich auf JavaScript und enthält jQuery-Plugins, um Ihnen bei der Entwicklung zu helfen. Laden Sie es von hier Download oder Github herunter.

6. Material Design Lite

Material Design Lite ist eine natürliche Folge von Googles neuer Website über Material Design. Es sollte Ihnen beim Start mit MD helfen, indem Ihnen ihre Templates, Komponenten, Stile und andere nützliche Ressourcen, für eine größere Material-Erfahrung zur Verfügung gestellt werden.

7. Material Foundation

Sie können Zurb’s Material Foundation auf Github finden. Sobald Sie es herunterladen, können Sie responsive Websites und Apps bauen, die Material-Ikonen, Typografie, Tasten, Karten, Tabs, Menüs und andere nichtessentielle MD Elemente enthalten.

8. Materialize

Materialize ist ein Framework, das Material Design hauptsächlich auf User Experience (UX) fokussiert. Wenn Sie mit Bootstrap, mit diesem Frontend Framework vertraut sind, werden Sie in der Lage sein, schöne responsive Websites und Apps zu bauen und es gibt sogar eine Sass-Version.

9. MUI CSS

Wenn Sie ein superleichtes CSS-Framework benötigen, welches die Google-Richtlinien MD implementieren soll, ist MUI CSS die richtige Wahl für Sie und Ihr plattformübergreifendes Projekt. Nur 6.6 KB für mui.min.css und 5,4 KB für mui.min.js! Es hat keine externen Abhängigkeiten und kann mit Sass-Dateien auf Github angepasst werden.

10. Phonon

Phonon ist ein weiteres kleines nur (60 MB), skalierbares und flexibles HTML5 Web / Hybrid-Framework, welches Sie leicht für das beste Material Design-Interface anpassen können. Prüfen Sie es auf Github.

11. Paper Theme für Bootstrap

Wenn Sie an Bootstrap gewöhnt sind, können Sie Bootswatch’s Paper Theme ausprobieren, die MD imitiert. Der Name basiert auf dem ersten Codename von Material Design – nämlich Quantum Paper.


Finden Sie, dass dieser Text nützlich ist? Lesen Sie mehr darüber: