MUI: CSS-Framework für Websites in Material Design

Mitte letzten Jahres stellte Google sein neues Designkonzept „Material Design“ vor. Es löst das bisher eingesetzte „Flat Design“ ab und wird in allen Produkten des Unternehmens eingesetzt – von Googles Websites über Chrome bis zum Betriebssystem Android. Mit dem Framework MUI lässt sich das „Material Design“ per HTML, CSS und JavaScript auch auf Webprojekte anwenden. Dabei wird das Designkonzept von der Farbgebung und Typografie über das Aussehen von Menüs und Buttons bis zu animierten Übergängen sehr detailliert übertragen.

Das Besondere an Googles „Material Design“

Im Gegensatz zum derzeit sehr beliebten „Flat Design“ wagt Google mit seinem „Material Design“ den Schritt Richtung Dreidimensionalität. Zwar ist das neue Design immer noch sehr flach, bekommt aber eine räumliche Tiefe. Diese zeichnet sich durch dezente Schlagschatten aus, die hinter den Flächen und Icons erscheinen. Je nach Abstand der einzelnen Objekte erscheinen die Schlagschatten mal mehr mal weniger ausgeprägt.

Das „Material Design“ wird von Google sehr ausführlich auf einer eigenen Website vorgestellt. Dort ist genau geregelt, wie es auszusehen hat und angewendet werden soll. Farben sind definiert, das Aussehen und die Schattierung von Icons sind vorgegeben und Animationen für Button-Klicks, Dropdown-Menüs und andere Übergänge sind festgelegt.

Gerade Entwickler von Apps für Androidgeräte sind angehalten, das neue „Material Design“ anzuwenden. Wer es in Webprojekten einsetzen möchte oder Hybrid-Apps für Android entwickelt und diese per HTML, CSS und JavaScript umsetzt, kann mit dem MUI-Framework Googles Designkonzept anwenden.

Was kann MUI?

MUI besteht aus einer Stylesheet- und einer JavaScript-Datei. Alle Designelemente sind in CSS umgesetzt und lassen sich per Klassen auf HTML-Elemente anwenden. Bestimmtes Verhalten von Buttons, Menüs und Formularen wird mit JavaScript abgebildet. Da MUI auf HTML5 und CSS3 setzt, ist es nur für moderne Browser geeignet. Der Internet Explorer kommt ab Version 10 mit MUI zurecht.

Formular im MUI-Stil

Googles Schrift „Roboto“ ist zwar fester Bestandteil des „Material Designs“, muss bei MUI jedoch separat eingebunden werden. Die Dokumentation empfiehlt hier die Einbindung der Schrift über Googles Webfont-Dienst. Auch Iconfonts sind nicht Bestandteil des MUI-Frameworks. Diese müssen ebenfalls zusätzlich eingebunden werden. MUI verweist hier vor allem auf den Iconfont „Awesome“.

Schriftformatierungen

Innerhalb der Stylesheet-Datei des MUI-Frameworks sind für nahezu alle Darstellungsformen entsprechende Klassen hinterlegt. So lassen sich Überschriften, Texte, Listen, Tabellen, Bilder, Formulare, sowie Buttons und Dropdown-Menüs im „Material Design“ darstellen.

Mit MUI loslegen

Sind Stylesheet- und JavaScript-Datei eingebunden, kann es losgehen. Zunächst einmal muss man sich für ein festes oder fluides Layout entscheiden. Beim festen Layout wird die Seite je nach Viewport in drei festen Breiten dargestellt. Bei der kleinsten Darstellung ist die Seite 768 Pixel breit. Es folgen 962 Pixel und 1170 Pixel Breite. Beim fluiden Layout passt sich die Seite immer der Breite des Viewports an. In jedem Fall wird rechts und links ein Abstand von 15 Pixel dargestellt.

<div class="mui-container">
  …
</div>

Im Beispiel wird per „mui-container“ ein Layout mit festen Breiten angelegt. Per „mui-container-fluid“ stellt man auf das fluide Layout um. Für die Darstellung der Inhalte innerhalb des Layouts steht ein Rastersystem zur Verfügung, welches dem von Bootstrap gleicht. Innerhalb eines 12-Spalten-Rasters lassen sich Inhalte sehr flexibel anordnen.

<div class="mui-row">
  <div class="mui-col-md-8">…</div>
  <div class="mui-col-md-4">…</div>
</div>

Per „mui-row“ wird eine Zeile innerhalb des Rasters definiert. „mui-col-md-8“ definiert eine Spalte, die sich über acht Spalten des Rasters erstreckt, während „mui-col-md-4“ einen Bereich festlegt, der sich über vier Spalten erstreckt. Je nach Breite des Viewports werden die Spalten neben- oder untereinander angeordnet.

MUI-Rastersystem

Hat man das grundlegende Raster definiert, lassen sich die verschiedenen Inhalte im „Material Design“ gestalten. Überschriften sowie die „<strong>“- und „<em>“-Elemente werden immer in den Vorgaben für das „Material Design“ gestaltet, ohne dass Klassen übergeben werden müssen. Listen und Tabellen sind hingegen mit einer entsprechenden Klasse auszuzeichnen, da es hierbei unterschiedliche Darstellungsmöglichkeiten gibt.

Bei Tabellen lassen sich Zeilen entweder mit oder Rahmen darstellen.

<table class="mui-table mui-table-bordered">
  …
</table>

Während die Klasse „mui-table“ eine einfache Tabelle ohne Rahmen zeichnet, sorgt die ergänzende Klasse „mui-table-bordered“ für einen Rahmen um jede Zeile. Die Kopfzeile wird in beiden Fällen mit einer Linie von den restlichen Zeilen optisch getrennt.

Unterschiedliche Darstellung einer Tabelle: links ohne Rahmen für Körperzeilen, rechts mit Rahmen

Dropdown-Menüs und Buttons mit Effekten

Das „Material Design“ sieht vor, dass sich bei Buttons beim Klick oder Berühren eine Art Glanzeffekt von der Position der Berührung über die gesamte Fläche des Buttons ausbreitet. Auch diese Besonderheit wird vom MUI-Framework berücksichtigt. Bei den Buttons wird zudem unterschieden zwischen einfachen und primären Buttons, sowie solchen, die auf eine Gefahr aufmerksam machen sollen. Während einfache Buttons weiß und primäre Buttons blau sind, sind die „Gefahr-Buttons“ rot. Für deaktivierte Buttons gibt es farblich abgeschwächte Darstellungsformen.

Buttons und Dropdown-Menüs im MUI-Stil

<button class="mui-btn mui-btn-primary">Klick mich!</button>

Im Beispiel wird ein primärer Button ausgezeichnet. Dropdown-Menüs sehen den Buttons sehr ähnlich. Ein Pfeil signalisiert jedoch, dass es sich hierbei um einen Button mit aufklappbarem Menü handelt.

<div class="mui-dropdown">
  <button class="mui-btn mui-btn-primary" data-toggle="dropdown">Dropdown<span class="mui-caret"></span></button>
  <ul class="mui-dropdown-menu">
    <li><a href="#">Startseite</a></li>
    <li><a href="#">Kontakt</a></li>
    …
  </ul>
</div>

Der Quelltext für ein Dropdown-Menü ist zweigeteilt. Innerhalb eines „<div>“-Containers ist ein Button-Element ausgezeichnet, über welches das Menü aufgeklappt wird. Die einzelnen Menüpunkte sind innerhalb einer „<ul>“-Liste platziert.

Farben per SASS verwenden

Zum „Material Design“ gehört eine sehr detaillierte Farbwelt bestehend aus 20 Primärfarben. Diese sind in unterschiedliche Schattierungen unterteilt. In der Dokumentation von MUI sind alle Farben und ihre Schattierungen samt Hexadezimalwerten aufgelistet. Wer mit SASS arbeitet, kann die Farben jedoch auch über die Funktion „mui-color()“ anwenden.

Die MUI-Farben Rot und Pink mit ihren Schattierungen

Hierzu wird der Farbname sowie der numerische Wert für die Schattierung angegeben.

background-color: mui-color("pink", 200);

Während der Wert 500 den Normalwert für die Farbe definiert, stellen Werte darunter die Farbe heller dar, indem der Weißanteil verstärkt wird. Bei Werten darüber wird der Schwarzanteil erhöht, so dass die Farbe dunkler wird.

Spezielles Framework für HTML-Mails

Eine Besonderheit an MUI ist ein zusätzliches für HTML-Mails optimiertes Framework. Wer schon einmal einen Newsletter gestaltet hat, weiß, wie nervenaufreibend die Gestaltung einer HTML-Mail sein kann. Da man nur sehr eingeschränkt moderne Technik verwendet kann, muss man auf Einiges – zum Beispiel CSS3-Eigenschaften – verzichten.

Das Mail-Framework ist in gängigen Anwendungen – sowohl Desktop- als auch Webanwendungen – getestet worden und läuft daher unter anderem in verschiedenen Outlook-Versionen, Gmail und Apple Mail.

Auf die bereits erwähnten Button-Effekte wird dabei ebenso verzichtet wie auf die Auszeichnung per „<button>“-Element. Stattdessen kommen viele „<div>“-Elemente zum Einsatz. Dafür kann man sich dann aber ziemlich sicher sein, dass es in vielen E-Mail-Programmen ordentlich aussieht.

Fazit

Das MUI-Framework macht einen sehr ordentlichen Eindruck. Es gibt eine ausführliche Dokumentation mit vielen aussagekräftigen Beispielen. Wer Googles „Material Design“ mag, wird mit MUI seine Freude haben. Das Framework ist kostenlos erhältlich und kann ohne Einschränkungen verwendet werden.

Was mir beim MUI-Framework jedoch fehlt, ist die Möglichkeit, die im „Material Design“ gängige Off-Canvas-Navigation nachzubilden. In Googles Designkonzept wird dies – wie eigentlich alles – ebenfalls sehr ausführlich beschrieben. Schön wäre es, wenn diese Möglichkeit ins MUI-Framework übernommen worden wäre. Aber vielleicht kommt das noch. Schließlich ist MUI erst in der Version 0.0.5 erschienen. Da scheint also noch Einiges zu passieren.

(dpe)