10 nützliche Material Design Code-Snippets

Der Materialdesign-Wahn erobert die Webwelt im Sturm. Jeden Monat finde ich neue Websites, die auf dem Materialstil laufen und Frameworks oder benutzerdefinierte UI-Kits verwenden.

Aber das ist nicht schlimm, ganz im Gegenteil! Auf diese Weise können Sie Ihren Designprozess vereinfachen, indem Sie mit bewährten Trends arbeiten, die Google als ihre eigene bevorzugte Designsprache anerkennt.

Wenn Sie sich für Materialdesign interessieren, sind diese Code-Snippets genau das Richtige für Sie. Dies sind nur 10 meiner Favoriten, die eine Vielzahl von Designs und Komponenten zur Auswahl bieten.

Responsive Tabelle

Hier ist ein Materialdesign-Snippet mit einer einzigartigen Wendung. Diese von Sergey Kupletsky erstellte Responsive-Tabelle enthält tatsächlich andere Links zu Materialdesign-Snippets. Ziemlich cool!

Auch dieser wird natürlich mit Materialdesign-Techniken erstellt, sodass sich der Tisch perfekt in Ihr eigenes Layout einfügen sollte. Aber der schwierigste Teil des mobilen Designs ist das Erstellen von Tabellen, die auf kleineren Bildschirmen funktionieren.

Ich denke, diese Methode ist eine der besten Möglichkeiten, damit umzugehen. Ihr Code bleibt auch sauber, was das Codieren, Aufräumen und Verwalten sehr einfach macht, unabhängig von der Größe Ihrer Tabelle.

Karten-UI-Übergänge

Entwickler Ivan Villamil hat dieses sehr einzigartige Karten-UI-Design mit einigen ziemlich verrückten Animationen erstellt.

Sehen Sie sich die Seite an und versuchen Sie, auf eine der Karten zu klicken. Sie erhalten einen einzigartigen animierten Effekt, bei dem der Karteninhalt über dem Container animiert und sichtbar wird. Es ist wie etwas, das Sie in einer mobilen App erwarten würden, aber ins Web portiert!

Die Animationseffekte sind makellos und zeigen, wie viel man heute im Web machen kann. Ganz zu schweigen davon, dass der Materialstil für diese kombinierte Web-/Mobil-Benutzeroberfläche genau richtig ist.

Kompakter Login

Ich habe in meinen Jahren als Designer einige sehr coole Login-Formulare gesehen. Aber dieses verrückte Design könnte sich wegen seiner interaktiven Funktionen und einzigartigen Stile durchsetzen.

Wenn Sie auf das hellrosa Symbol in der oberen rechten Ecke klicken, wird ein Registrierungsfeld angezeigt, das über der Seite angezeigt wird. Es ist verdammt einzigartig und schafft eine wirklich brauchbare Schnittstelle.

Also, was ist der Haken? Dies verwendet viel JavaScript, daher ist es nicht die sauberste Lösung in Bezug auf den Code. Aber immer noch ein hervorragendes Beispiel für Design mit kompakten Funktionen.

Füllen Sie die Animation aus

Scott Kellum hat dieses faszinierende Materialkartenlayout entwickelt, das automatisch ausgefüllt wird, sobald die Seite geladen wird. Dies entwickelt sich in einem Raster, in dem Sie mit der Maus über jede Karte fahren können, um die Materialdesignfunktionen in Aktion zu sehen.

Ich kann nicht sagen, wie nützlich dies in einem direkten Projekt ist oder wie viel Sie daraus ziehen könnten. Aber dies ist ein lustiges Snippet, das Off-Grid-Design für das Web zeigt und einen Hauch von Materialgeschmack mit Hover-Animationen vermischt.

Material BS4-Knöpfe

Von den vielen online verfügbaren Bootstrap-Vorlagen glauben Sie besser, dass einige von ihnen Materialdesign verwenden. Und dieser Stift zeigt all die coolen Dinge, die Sie mit Materialdesign in Bootstrap 4 machen können.

In Wirklichkeit ist dies nur eine Sammlung von Schaltflächen, die in die Materialsprache von Google umgestaltet wurden. Aber alles läuft auf dem neuesten BS4-Framework, sodass Sie diese zu jeder Bootstrap-betriebenen Seite hinzufügen können.

Wenn Sie es mit Bootstrap ernst meinen, schauen Sie sich die neueste Version an, um zu sehen, was Sie davon halten. Es eignet sich hervorragend als Grundlage für alles, und das gilt insbesondere für Materialseiten.

Menü „Material Design“ auswählen

Dropdown-Auswahlmenüs sind ein Grundpfeiler im Formulardesign. Sie lassen Benutzer aus einer Handvoll Antworten zu relevanten Themen wie Bundesstaaten, Ländern, Sprachen usw. auswählen.

Diese Materialdesign-Auswahl hebt das übliche HTML-Auswahlmenü auf eine ganz neue Ebene.

Es verlässt sich nicht auf den typischen Dokumentstil für die Auswahl einer Option. Stattdessen wird eine ungeordnete Liste verwendet, wobei jQuery den Animations- und Auswahlprozess verarbeitet. Und ich muss sagen, dieses Ding trifft den Materialstil.

Materielle Schatten

Google drängt in seiner Materialdokumentation wirklich auf Schatten, um Tiefe zu erreichen. Das sehen Sie in diesem Stift, wo die Kreise alle ihre eigenen Schlagschatteneffekte haben.

Mit Schatten können Sie den Seitenelementen eine Hierarchie zuweisen, sodass einige oben und andere tiefer erscheinen. Es erzeugt eine Illusion von Raum auf dem Bildschirm, was besonders auf Touchscreens nützlich ist.

Ein ziemlich cooler Effekt und sicherlich etwas, das Sie in Ihre eigenen Projekte kopieren könnten.

Benutzeroberfläche der Wetterkarte

Entwickler Thomas Vallez hat diese fantastische Wetterkarte erstellt, die auf reinem HTML und CSS läuft. Es verwendet einen einfachen Einblendeffekt beim Laden der Seite, aber die wahre Schönheit hier ist der Materialdesignstil.

Von den Farben über die Schriftarten bis hin zum Wettersymbol setzen sie alle auf natürliche Materialstile.

Sie können diese Vorlage nehmen und sie für so ziemlich jede Art von Kartenlayout verwenden. Es ist phänomenal und sicherlich eines der einfacheren Projekte in dieser Liste.

Materialregisterkarten

Hier ist ein interessantes Projekt, das auf der Idee von Materialdesign-Registerkarten aufbaut. Michael Richins hat diesen Stift mit etwas grundlegendem JavaScript und einigen Kenntnissen der Designrichtlinien von Google erstellt.

Die Registerkarten funktionieren genauso, wie Sie es auf anderen ähnlichen Geräten wie Android-Smartphones oder -Tablets erwarten würden. Ganz zu schweigen davon, dass dieses Ding auf Plain Vanilla JavaScript läuft, sodass Sie sich nie um jQuery oder ähnliches kümmern müssen.

Ein ziemlich cooler Effekt, wenn Sie auf Ihrer Website nach Registerkarten suchen. Stellen Sie einfach sicher, dass Sie die Stile testen, um zu sehen, ob sie sich natürlich in Ihre Seite einfügen.

Klicken Sie auf Antwortanimation

Entwickler Emmanuel Pilande hat diesen coolen Response-Effekt entwickelt, um die materiellen Mikrointeraktionen von Google auf einfache Weise nachzubilden.

Klicken Sie irgendwo auf die Materialkarten, um den Effekt zu sehen. Und Sie können dies auf so ziemlich alles anwenden, von Schaltflächen über Seitencontainer bis hin zu Eingabefeldern.

Es ist auf etwas JavaScript angewiesen, kann aber auch einfach zu jedem Projekt hinzugefügt werden. Wenn Sie sich also für diesen natürlichen Material-Look entscheiden, ist dies ein großartiger Ausschnitt, den Sie speichern können.