CSS

Materialize CSS Framework

Lesezeit ca. 14 Min.

Dieser Workshop über das Materialize CSS Framework stellt im ersten Teil das Framework vor und erstellt im zweiten Teil eine Beispielseite mit diesem Framework. Dies ist der erste Teil einer dreiteiligen Artikelserie zum Vergleich der CSS Frameworks Zurb Foundation, Bootstrap und Materialize CSS.

Materialize CSS Framework – Eine Übersicht

Das Materialize CSS Framework basiert auf dem Material Design von Google. Das Design verbindet die klassischen Grundsätze von erfolgreichem Design mit zeitgemäßer Innovation und Technologie. Google hat dabei das Ziel angestrebt ein Design zu entwickeln, das auf jeder Plattform und jedem ihrer Produkte ein einheitliches Nutzererlebnis bringt. Soweit zum Marketing. ;-)

Das Materialize CSS Framework ist das jüngste auf dem Markt befindliche von den drei Frameworks, die ich in dieser Artikelserie vergleichen werde. Dementsprechend merkt man gleich beim Überfliegen der Dokumentation, daß es in manchen Bereichen vergleichsweise etwas schwächer ausgestattet ist, als die beiden “älteren” Brüder. Auf der anderen Seite hat es aber auch einige Features, welche die anderen Frameworks missen. So empfand ich es als angenehm, daß das Materialize Framework eine leicht umzusetzende Implementation des Parallax Effektes anbietet. Dies lässt sich bei den beiden anderen Frameworks nur mit ein wenig Mühe realisieren, wie wir noch im Laufe dieser Artikelserie sehen werden.

Ferner ist mir aufgefallen, daß die Dokumentation leider noch etwas lückenhaft und unvollständig ist. Ich habe während meiner Experimente noch Stylesheet Definitionen entdeckt, die in der Dokumentation gar nicht auftauchen. Jedoch schätze ich, daß sich dies in der weiteren Entwicklung des Frameworks noch bessern wird.

Materialize CSS Framework – Download und Installation

Das Framework kann entweder über die Projekt Webseite Materialize CSS oder über Github heruntergeladen werden.

Zur Installation kann man entweder Tools, wie NPM oder Bower verwenden oder manuell installieren aus dem heruntergeladenen Paket oder per CDN.

Für die manuelle Installation müssen lediglich die CSS und Javascript Dateien in die entsprechenden Unterverzeichnisse kopiert und in das HTML Dokument eingebunden werden.

Nach dem Herunterladen und entpacken des Materialize CSS Framework findet sich im Verzeichnis das Unterverzeichnis “dist”. Den Inhalt dieses Unterverzeichnisses kann man in sein eigenes Projektverzeichnis kopieren und man erhält alle Dateien, die zum Einbinden notwendig sind. Man findet sowohl die ungepackten, als auch die komprimierten CSS und JS Dateien. Die ersteren sind während der Entwicklungsphase hilfreich, während letztere in der Produktion zum Einsatz kommen sollten.

Im HTML Template sollte die Einbindung wie in diesem Beispiel erfolgen:





  
    
    
    
    

    
    
  

  
    
    
    
  

        

Funktionsumfang

Ich will an dieser Stelle nicht die Dokumentation abschreiben. Dies wäre sowohl für mich, als auch für Sie recht langweilig. Deswegen gehe ich grob durch das Inhaltsverzeichnis und mache zu manchen, mir wichtig erscheinenden Punkten einige Anmerkungen.

CSS

Im Bereich CSS findet man zunächst die Elemente Farbe, Grid, Typografie und Transitionen. Materialize CSS hat ein 12-Spalten Grid, ebenso wie Bootstrap und Foundation. Darin findet man die gängigen Funktionen, wie Spalten per Offset zu versetzen oder die Reihenfolge der Anzeige zu ändern. Der Abschnitt enthält auch einige schöne Beispiele für die Gestaltung eines Layouts und wie diese Responsive umzusetzen sind.

Bei den Farben hat mir die Farbtabelle besonders gut gefallen, da diese nicht nur die Variablen für die unterschiedlichen Farben enthält, sondern auch gleich den jeweiligen Hex Code, womit man diese Farben auch für eigene Stylesheet Definitionen gut verwenden kann.

Bei der Typografie wird darauf hingewiesen, daß die Standardschrift des Material Design – Roboto – als Standardeinstellung verwendet wird. Diese lässt sich auch austauschen. Jedoch hätte es nicht geschadet, wenn dies in der Doku anhand eines Beispiels erläutert worden wäre. Besonders interessant fand ich das Feature “Flow-Text”, welche mit wenig Aufwand einen responsiven Text auf einer Web Seite ermöglicht. Wie dies in der Praxis funktioniert, werde ich im abschließenden Beispiel demonstrieren.

Das Feature “Shadow” ist prinzipiell recht interessant, allerdings lässt die Umsetzung sehr zu wünschen übrig. Es wird nämlich stets um die Komponente, welche die Schattierung erhalten soll, ein Rahmen gezogen und dieser geht über die gesamte Zeilenbreite. Daher fand ich es für meine Zwecke weniger hilfreich und musste dann doch “händisch” mit Hilfe von CSS Schatteneffekte einbauen.

“Pulse” ist ein recht netter Effekt, wenn man auf einer Seite einen Button besonders hervorheben möchte.

Zu den Tabellen möchte ich wenig sagen, da dies eine Standardfunktionalität ist, die man bei den anderen beiden Frameworks genauso vorfindet.

Unter “Media” findet man Möglichkeiten, Bilder und Videos responsive darzustellen. Was mir hier noch fehlt, ist der nette Effekt des Material Design, Bilder mit einem Schatten darzustellen. Dieser Effekt gibt den Bildern einen dreidimensionalen Anstrich, der mir recht gut gefällt. Ich hoffe, daß dies in einer der späteren Versionen noch eingebaut wird.

Es bleibt nur noch die “Helpers” zu erwähnen. Hier findet man zum einen Elemente zum Ausrichten von Komponenten und Möglichkeiten, um Seitenelemente auf verschiedenen Devices zu verstecken. Bei den Formatierungen fand ich die Möglichkeit, einen langen Text abzukürzen (durch die Darstellung von drei Punkten) recht interessant. Dafür habe ich in der Vergangenheit immer wieder Einsatzmöglichkeiten gehabt. Beim “Hover” kommt dann der Schatten, den ich weiter oben vermisst habe, sobald man mit der Maus über einen Bereich fährt. Ich habe jedoch noch nicht ausprobiert, ob dieser auch bei schmaleren Komponenten angezeigt wird oder nur bei ganzer Zeilenbreite, wie bei “Shadow”.

Komponenten

Das erste, was mir bei den Komponenten ins Auge gesprungen ist, sind die Forms. Diese sind bei den anderen Frameworks eher im Bereich des CSS untergebracht, wo ich sie auch eher einordnen würde. Ein Manko ist dies allerdings nicht. ;-)

In diesem Bereich findet man zum einen klassische Seitenlayoutelemente, wie Navbar, Breadcrumbs, Pagination oder Footer. Die Breadcrumbs sind für meinen Geschmack nicht schön umgesetzt. Ich finde die Schrift viel zu groß geraten. Da müsste man noch mit etwas CSS nachhelfen. Die Pagination scheint mir noch nicht ganz fertig zu sein, denn in der Doku ist nur die Option “Einfach” zu finden. Und dies schreit fast nach einer weiteren Option. Der Footer hat einen interessanten Effekt erhalten, der sich “klebende Fußzeile” nennt. Nein, es ist keine skurrile Übersetzung für “fixed Footer”, sondern tatsächlich ein neues Feature. Je mehr Inhalt sich auf einer Seite befindet, desto kleiner wird die Fußzeile. Dabei ist die Fußzeile trotzdem am unteren Bildschirmrand fixiert. Kleiner Wermutstropfen dabei ist jedoch, daß dies erst durch zusätzliches CSS möglich wird und nicht durch ein definiertes Element des Frameworks. Hoffentlich ändert sich dies in einer späteren Version. Schließlich ist die Navbar im Großen und Ganzen mit derjenigen von Bootstrap vergleichbar. Was hier jedoch besser realisiert ist im direkten Vergleich mit Bootstrap, ist die Einfärbung der Navbar. Während man bei Bootstrap umständlich per eigenem CSS mehrere Selektoren verändern muß, braucht es beim Materialize CSS Framework nur einen Farbselektor anzugeben und die Navbar erscheint in einer neuen Farbe. Leider geht dies aber für den Maus Hoover Effekt nicht ebenso einfach. Da muß man dann doch wieder selbst Hand an das CSS legen. Zu beachten ist hier noch, daß man für die Initialisierung noch einen Javascript Aufruf vornehmen muß, was bei den anderen Frameworks nicht der Fall ist.

Weitere Komponenten sind Badges, Buttons und Chips. Badges kennt man aus Menüs oder Listen. In ihnen werden z.B. die Anzahl von neuen Nachrichten, Kommentaren, etc. angezeigt. Leider werden diese nur rechteckig angezeigt. Eine runde Variante hätte ich mir hier gerne gewünscht. Chips sind dazu da, sogenannte Tags oder zu deutsch Schlagwörter anzuzeigen. Das interessante an diesem Feature ist, daß man in so einen Chip auch ein Bild einbinden kann. Unter Zuhilfenahme von Javascript kann man solche Tags programmatisch anlegen und auch wieder löschen.
Bei den Buttons haben sich die Entwickler des Frameworks einige schöne Sachen einfallen lassen. Die einfachen Buttons haben beim Hover einen Wave Effekt. Dieser funktioniert – nach meinem bisherigen Kenntnisstand – nur in der Standardfarbe grün. Sobald man die Farbe des Buttons ändert, geht dies nicht mehr. Vielleicht gibt es da noch einen Trick, den ich nicht herausgefunden habe. Sehr interessant ist der Fixed Action Button (FAB). Dabei wird ein Button irgendwo auf der Seite fix platziert. Beim Hover über diesen Button lässt sich ein Icon Menü aufklappen. Der gleiche Effekt lässt sich auch durch Mausklick initiieren. Und schließlich sollte noch die FAB to Toolbar nicht unerwähnt bleiben. Dabei wird durch ein Klick auf einen FAB, dieser durch eine Toolbar ersetzt. Dies eröffnet viele neue Möglichkeiten für die Navigation auf einer Web Seite.

Cards entsprechen in etwa den Panels bei Bootstrap. Sie können also aus einem Header, einem Content Bereich und einem Footer bestehen. Die Besonderheit beim Materialize CSS Framework ist jedoch die Einbindung von Bildern, die der Komponente einen besonderen Charme gibt. Die Bilder können entweder horizontal über die gesamte Breite oder vertikal über die gesamte Höhe der Card gehen. Es können FAB oder Tabs eingebunden werden. Und es gibt einen weiteren Effekt, der sich Card Reveal nennt. Beim Klicken auf eine Card können weitere Informationen zu dieser Card angezeigt werden. Also im Prinzip so, als würde man die Card umdrehen und auf die Rückseite sehen.

Collections sind das Pendant der Listen in Bootstrap. Im Vergleich zu Bootstrap sind hier jedoch zwei zusätzliche Features zu nennen. Zum einen können in den einzelnen Zeilen kleine Bilder – sogenannte Avatare – eingebunden werden, wie man es von sozialen Netzwerken gewohnt ist. Zum anderen können einzelne Zeilen einer Collection auf einem Device mit Touch Screen durch eine Wish-Bewegung entfernt werden.

Über die Forms möchte ich derzeit nicht viele Worte verlieren. Obwohl es einige recht interessante Features enthält, wie einen Character Counter, Autocomplete oder einen Range Slider, macht es bei der Arbeit mit den Forms noch einen recht unausgegorenen Eindruck. An vielen Stellen bedarf es noch Javascript Aufrufen. Manche Features sind noch undokumentiert. Ich habe sie erst durch eine Recherche im Internet entdecken können. Ich hoffe, daß dieses Feature in späteren Versionen noch ausgebaut wird.

Es wurden die Material Design Icons von Google implementiert. Damit hat man Zugriff auf etwa 900 Webfont Icons. Damit kann man in seinen Web Seiten schon so einiges anstellen.

Schließlich gibt es noch die Komponente Preloader. Diese soll dem User als Rückmeldung bei längeren Ladeoperationen der Web Seite dienen. Na ja, eigentlich sollten längere Ladezeiten der Vergangenheit angehören. Aber, wer es braucht …

JavaScript

Wie die anderen Frameworks, so hat auch das Materialize CSS Framework einige JavaScript Plugins integriert für spezielle Effekte oder Funktionalitäten. Manche sind von Bootstrap her bekannt, wie Carousel, Collapsible, Modals, Scrollspy, Tabs und Transitions. Anscheinend haben sich die Entwickler mehr an Bootstrap orientiert, da die Plugins bei Foundation auch existieren, aber unter einem anderen Namen (z.B. heißt das Carousel bei Foundation Orbit).

Die Namensgleichheit der Komponenten hat aber auch einen Haken. Teilweise haben Komponenten zwar die gleichen Namen beim Materialize CSS Framework und dem Bootstrap Framework, aber die Funktionalität ist eine andere. So z.B. bei Carousel. Das Carousel von Boostrap gibt es bei Materialize CSS unter der Bezeichnung Slider. Das Carousel von Materialize CSS hingegen ist ein Slider, wie man ihn von Mac OS X her kennt. Zusätzlich gibt es ein Feature für Devices mit Touch Screens, um mit einer Wisch-Bewegung durch die Bilder Gallerie zu gehen.
Während der Slider ein Bilder-Karussel darstellt, gibt es noch ein weiteres Karussel für Seiten Content. Dies ist eine Erweiterung, die es bei den anderen Frameworks in dieser Form nicht gibt.

Das Collapsible Plugin entspricht einem sogenannten Akkordion. Es hat als zusätzliches Feature zwei Arten der Dehnung. Entweder es ist jeweils nur der aktuelle Bereich offen sichtbar oder es öffnen sich alle Bereiche, die angeklickt werden. Dies entspricht dem Aufklappen in einer Baumstruktur wie z.B. im Windows Explorer.

Das Modal Plugin hat mehr Funktionen, als beim gleichnamigen Plugin von Bootstrap. Zum einen kann man das modale Fenster an den unteren Bildschirmrand ausrichten, so daß es sich beim Öffnen von unten nach oben ausklappt. Außerdem kann man per JavaScript verschiedene Optionen noch setzen.

Das Scrollspy Plugin ist demjenigen von Bootstrap vergleichbar. Allerdings haben sich die Entwickler hier in der Dokumentation sehr wenig Mühe gegeben, es ausführlich zu beschreiben. So ist z.B. mit keinem Wort erwähnt, daß das Scrollspy auch mit der Navigation in der Navbar zusammen arbeitet.

Das Tabs Plugin ist ebenfalls mit dem von Bootstrap her bekannten Plugin vergleichbar. Es hat jedoch noch zusätzlich wieder eine Option für Wisch-Bewegungen für Devices mit Touch Screen.

Das Transitions Plugin macht besonders im Zusammenhang mit dem Scrollfire Plugin einen Sinn. Während ersteres ein bestimmtes Element in die HTML Seite hineinfließen lässt, sorgt letzteres dafür, daß dies während des Scrollens geschieht. Diesen Effekt kennt man beispielsweise von Google+.

Unter der Bezeichnung Dialogs verstecken sich zwei interessante Funktionen. Zum einen die Tooltips, die man jedoch auch bei Bootstrap und Foundation findet. Zum anderen gibt es eine Funktion, die sich Toast nennt. Dies ist nichts anderes, als das von Mac OS X bekannte Growl. Es können also bestimmte Notifications dargestellt werden, die nach einer gewissen Zeit wieder ausgeblendet werden.

Ein netter Effekt ist auch das Plugin FeatureDiscovery. Damit wird am unteren rechten Bildschirmrand ein runder Button angezeigt, der sich in der Größe verändert, sobald er angeklickt wird. Ob es da noch weitere Optionen bzgl. der Platzierung und der Dimensionen der Ausbreitung gibt, darüber schweigt sich die Dokumentation leider aus.

Unter Media findet man neben den zuvor beschriebenen Bilder Slider ein Feature namens Material Box, was nichts anderes, als eine Lightbox ist.

Das SideNav Plugin erzeugt eine Navigationsspalte, die man per Klick auf einen Button ein- und ausfahren kann, so wie man es z.B. bei Admin Oberflächen häufig findet. Per JavaScript lassen sich einige Optionen, wie z.B. die Spaltenbreite festlegen.

Waves ist ein Effekt, der ausgelöst wird, wenn auf einen Button geklickt wird. Es erscheint eine visuelle Bestätigung des Mausklicks, den man Tinteneffekt im Material Design nennt. Es gibt eine feste Anzahl definierter Farben für diesen Effekt. Reichen diese Farben nicht aus, so kann man weitere Farben per CSS definieren, was in der Dokumentation beschrieben wird.

Meinen Lieblingseffekt habe ich mir für den Schluß aufgehoben. Das Materialize CSS Framework ermöglicht eine recht einfache Implementierung des Parallax Effektes. Bei den beiden anderen Frameworks muß man hierzu wesentlich mehr mit CSS herum hantieren. Allein dafür verdient dieses Framework ein besonderes Lob. Es zeigt, daß es auch einfach gehen kann. Das Plugin muß allerdings wieder per JavaScript initialisiert werden. Dafür kann man per Option die Höhe des Parallax Elementes festlegen.

Mobile

Ich habe schon an einigen Stellen darauf hingewiesen, daß das Materialize CSS Framework speziell für Devices mit Touch Screens spezielle Funktionen anbietet. Zusätzlich zu den bisher genannten Funktionen bietet es auch ein Ausziehmenü für die Navigationsleiste. Dies wird für die Navbar gesondert definiert. Ferner lassen sich die zuvor beschriebenen Toasts auf einem Smartphone per Wish-Bewegung einfach wegwischen (und damit entfernen).

Fazit

Das Materialize CSS Framework enhält eine Reihe von sehr interessanten Features und Effekten, die es auf jeden Fall rechtfertigen, sich mit dem Framework näher zu beschäftigen. Beispielsweise habe ich anlässlich der Einarbeitung mit dem Framework für diesen Artikel, das neue Layout meines Blogs mit Materialize CSS umgesetzt.
Wie ich schon mehrfach erwähnt habe, ist die Dokumentation noch teilweise unvollständig. Die deutsche Übersetzung ist sehr lückenhaft. An vielen Stellen steht mal ein deutscher und dann wieder viele englische Sätze. Auch Funktional gibt es noch einiges an Verbesserungspotential. Allerdings sollte berücksichtigt werden, daß das Framework derzeit sich in der Version 0.9.8 befindet. Daher kann man die aufgeführten Mängel noch entschuldigen. Auf der anderen Seite sind schon jetzt recht ordentliche Ergebnisse beim Einsatz des Frameworks erzielbar.
Wie es sich im Vergleich mit Bootstrap und Foundation schlägt, werde ich in den nächsten Artikeln dieser Serie beschreiben.

Ähnliche Artikel:

Fragen oder Feedback zu diesem Artikel

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert