MDBootstrap
Dieses CSS und JS Framework erweitert Bootstrap 4 um Material Design und weitere UI Features.
Ich bin auf das MDBootstrap Framework aufmerksam geworden, als ich das Keyword Tool HyperSuggest entwickelt habe. Da ich bereits schon mehrere Projekte erfolgreich mit Bootstrap 4 umgesetzt habe und auch ein Fan von der UX von Material Design bin habe ich recherchiert, ob es eine Möglichkeit gibt, diese beiden Welten zu vereinen. Das Ergebnis war MDBootstrap.
Mit MDBootstrap kannst du dein Bootstrap 4 Framework mit dem Material Design ausstatten. MDBootstrap passt dabei alle Komponenten von Bootstrap 4 an das Material Design an und bietet zusätzlich noch weitere wertvolle Features, wie zum Beispiel: Templates, Filterbare select2 Elemente, Chips oder verschiedene Modal Designs. Und alles zusammen in einem einzelnen Package.
Die MDBootstrap Packages
Es gibt je nach Basis deines Projektes verschiedene MDBootstrap Packages. Ich habe dir die Packages hier aufgeführt.
MDBootstrap jQuery
Das MDBootstrap jQuery Package ist für alle Web-Entwickler geeignet, die jQuery als JS Framework einsetzen. Ihr könnt wie gewohnt auch eure eigenen jQuery Plugins nutzen bzw. die von MDBootstrap bereitgestellten Methods nutzen.
MDBootstrap Angular
Falls ihr euer Projekt mit Angular aufgesetzt habt, bietet MDBootstrap auch hierfür ein Package an. Mit dem MDBootstrap Angular Paket könnt ihr Material Design zu eurem Angular Projekt hinzufügen.
MDBootstrap React
Wenn du deine Website auf Basis von React entwickelst hat MDBootstrap mit dem React Package das passenden Pendant, damit du Material Design zu React hinzufügen kannst.
MDBootstrap Vue
Auch für alle Vue Entwickler hält MDBootstrap das richtige Package bereit. Erweitere dein Vue JS Framework um ein modernes Material Design und nutze noch die weiteren Vorteile von MDBootstrap.
Zu den o.g. Packages gibt es zusätzlich jeweils noch passende Templates für die verschiedensten Anwendungsfälle.
Die Templates von MDBootstrap
Bei den Templates handelt es sich um Designvorlagen für verschiedene Projektthemen. So gibt es z.B. Admin Dashboard Templates für jQuery, React, Angular und Vue.
Zusätzlich bietet MDBootstrap noch Landingpage Templates für das jQuery Package an.
Diese Templates stellen eine große Erleichterung bei der Entwicklung von Landingpages für verschiedenste Szenarien dar. So gibt es vorbereitete Designs für SAAS Tools, Magazine, Portfolios, Blogs und Ecommerce Seiten.
Die jeweiligen Templates können natürlich auch angepasst oder erweitert werden.
Neben den Templates gibt es außerdem noch Plugins, welche das MDBootstrap Package um weitere Funktionaliäten erweitern. Eine vollständige Übersicht über die Plugins und Templates findest du hier.
Die obige hierarchische Darstellung zeigt sehr schön die verschiedenen Extensions von MDBootstrap. Am meisten Erweiterungen und Template-Vorlagen gibt es bei der jQuery Version. Das React Package hat neben dem eigentlichen Material Design gerade nur ein Admin Dashboard.
Die Installation
MDBootstrap kann über verschiedene Wege installiert werden.
- Manuell (zum Tutorial)
- Gulp (zum Tutorial)
- Webpack (zum Tutorial)
Ich rate dir, MDB über Gulp oder Webpack zu installieren. So musst du nicht jedesmal die aktuelle mdb.zip Datei herunterladen und manuell in deine Entwicklungsumgebung entpacken.
MDBootstrap als WordPress Theme
Das tolle an MDBootstrap ist, dass man es auch in ein Custom Theme von WordPress integrieren kann. Dazu gibt es hier ein Tutorial direkt von den Entwicklern: Zum Tutorial
In diesem Tutorial wird beschrieben, wie man ein Custom Theme mit MDBootstrap aufsetzt und es in die eigene WordPress Instanz integriert. Die Entwickler gehen dabei sogar auf WooCommerce und die einzelnen Blogpost Templates ein, so dass man mit MDB wirklich alle WordPress Einsatzzwecke abdecken kann.
Mein Fazit zu MDBootstrap
Mir hat MDBootstrap genau das gegeben, was ich wollte:
- Bootstrap 4
- Material Design
- UI Erweiterungen
Dadurch konnte ich meine Entwicklungszeit drastisch reduzieren. Ich lege MDBootstrap jedem ans Herz, der Material Design in seinem Webprojekt verwenden aber nicht auf die Vorzüge vom Bootstrap Framework verzichten möchte. Falls ihr Fragen zu MDB habt, schreibt mir einfach in die Kommentare. Ansonste wünsche ich jedem viel Spaß mit dem Framework.
Vielen Dank für den Hinweis zu dem Framework. Das hat auf den ersten Blick echt alles von Bootstrap dabei. Ich überlege gerade noch welches Package ich brauche, aber wahrscheinlich das jquery oder?
Danke!! Tobi
Hi Tobias,
kommt drauf an welche Plattform du für die Entwicklung nutzt. Falls du jQuery verwendest (z.B. für ein WordPress Theme), ist das jQuery Package für dich das richtige. Die meisten der Leser werden wohl das jQuery Package brauchen.
Ich hoffe ich konnte dir helfen! Lg Sebastian
Hallo Sebastian,
krieg’s trotz Anleitung nicht hin. Wie installiere ich ein PlugIn in MDB Pro jQuery?
Plugin ist runtergeladen und entpackt.
Kannst du mir helfen?
Hi Frank, klar versuche ich dir zu helfen.
Hast du bereits mdb bei dir im Projekt implementiert? Falls ja, lege parallel zum mdb Ordner einen mdb_plugin_name Ordner an (_plugin_name ersetzt du durch den namen des Plugins). In diesen legst du dann die CSS, JS, HTML, … Ordner des Plugins ab. Jetzt enqueuest du die CSS und JS files in dem Plugin Ordner in deinem Projekt:
https://jsfiddle.net/oexh0qtw/
Wichtig ist, dass du erst die MDBootstrap Files implementierst und dann erst die Plugin Files.
Ich hoffe das hilft dir weiter. Falls du noch Fragen zur Implementierung hast, sag mir einfach hier Bescheid.