17.082015

Material Design für Websites mit Googles Material Design Lite

material

Mit Material Design hat Google eine einheitliche Designsprache geschaffen, die alle Produkte des Unternehmens übergreift. Dabei wird von Farb-Guides bis zu Animationen eine ganze Menge abgedeckt. Nachdem die Spezifikationen für Material Design von einigen Frontend-Entwicklernfür z.B. Bootstrap umgesetzt wurden, oder diese ein komplett neues Framework auf der Material Design Basis schufen, fühlte sich Google nun angehalten ein eigenes Framework zu veröffentlichen. Der Grund: Google waren die Interpretationen nicht genau genug an die Specs angepasst und man wollte im Zusammenarbeit mit dem original Material Design Team etwas Offizielles der Öffentlichkeit bieten. Dabei ist Material Design Lite entstanden.

Lite?

Lite bedeutet zunächst einmal das, dass komplette Framework mit gziped 27 Kilobyte recht leicht ist und keine speziellen Abhängigkeiten beinhaltet.

Zudem spricht für das Framework der hochgradig modulare Aufbau, welcher zusammen mit den "mdl" geprefixten CSS-Klassen, dafür sorgt das man sehr gut Teile des Frameworks rauspicken und nutzen kann.

Das Framework wurde sauber und objektbasierend mit SASS aufgebaut und so lassen sich einzelne Komponenten gut anpassen und in den eigenen Framework-Baukasten integrieren. Beispiel: SCSS-Datei eines Buttons.

Umfang

Alle Standardkomponenten eines modernen responsive CSS-Frameworks sind enthalten. Man findet also ein Grid, genauso wie diverse Buttons, Tabellen-Elemente, Panels, Navigationen, usw.
Man kann über die Website eine Version mit 2 Material Design Basis-Farben konfigurieren und direkt einbinden, oder da eben auf Github die SCSS-Files laden. Damit ist dann natürlich über die Anpassung der zentralen Farb-Config noch viel mehr möglich.

Browser-Support

Das Framework unterstützt grundsätzlich mindestens die letzten 2 Versionen aller "Standard-Browser". Was den Spezial-Fall Internet Explorer angeht, so wird der IE8 gar nicht offiziel supported und der 9er wurde als B-Grade kategorisiert. Viel ist also auf diesem Browser von der Library nicht zu erwarten, aber die Seiten sind wohl benutzbar. Polyfills für alte Browser werden in Kauf genommen. Der Blick geht also ganz klar nach vorne. Wie immer zeigt ein Auswerten der eigenen Statistiken am besten wie relevant alter IE-Support für euch ist  . Google zeigt einige Beispiele und Details zum Thema Browser-Support .

Fazit

Möchte man eine Android-App bauen oder begeistert sich für Material Design und möchte dabei möglichst nahe am Original sein, hat man nun also das entsprechende Equipment aus dem Hause Google.