Material Design Lite – CSS Creator

Share This Post

Share on facebook
Share on linkedin
Share on twitter
Share on email

Google brachte im Juli mit Material Design Lite eine Möglichkeit das Look & Feel einfach ins Web zu übertragen. Es gibt bereits zahlreiche Bibliotheken von Usern, welche dieses Look & Feel nachbauten. Diese stoßen aber oft an ihre Grenzen und halten die Richtlinien nicht ein. Daher begrüße ich diese offizielle Bibliothek sehr. Es gäbe mit Polymer zwar eine noch sehr viel umfangreichere Bibliothek. Diese setzt aber stark auf die allerneuesten Web-Technologien. Manche Browser-Hersteller kommen hier nur schleppend mit der Implementierung nach. Daher denke ich, dass diese Bibliothek noch etwas reifen muss. Polyfills blähen die Größe der Applikation nur unnötig auf und benötigen mehr Ressourcen als native Implementierungen. Gerade im mobilen Umfeld wirkt sich dies sehr nachteilig aus. Wobei ich mich schon sehr darauf freue Custom Elements, Shadow DOM udgl. produktiv einsetzen zu können.

Material Design Lite setzt auf reines CSS und Javascript. Es wurde stark auf Cross-Browser-Komptabilität entwickelt. Gesamt beträgt die Größe mittels GZIP gerade einmal 27 KB. Also ideal, um bereits heute damit zu starten. Allerdings störte mich ein Punkt aktuell noch: Man kann zwar sein eigenes CSS aufgrund der von Google definierten Farbpalette erstellen. Wenn man allerdings bereits eine bestehende Seite hat und eigene Farben verwenden möchte hat man keine komfortable Möglichkeit ein entsprechendes CSS zu generieren. Und die Welt besteht nun mal nicht nur aus 19 Primär-Farbtönen. ;-) Daher habe ich mir den Source-Code etwas genauer angesehen und mir einen eigenen CSS-Generator geschrieben, welcher auf dem „Customization-Generator“ basiert.

Diesen findet ihr hier: http://mdlcssgen.zubasoft.at

Es gibt natürlich mit etwas mehr Know-How über Node.js, Gulp und SCSS auch einen offiziellen Weg, welcher vom Material Design Lite Team bereitgestellt wird. Diesen möchte ich euch natürlich nicht vorenthalten: https://github.com/google/material-design-lite/wiki/Customizing-Colors

Was Sie auch interessieren könnte:

Sie wollen Schwung in Ihre Digitalisierung bringen?

Schreiben Sie uns und wir bleiben in Kontakt

Lass uns ins Gespräch kommen