Seite wählen

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.

Alle Landingpages anzeigen

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.

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:

  1. Bootstrap 4
  2. Material Design
  3. 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.