Materialise - Ein Material Design-CSS-Framework

Googles Material Design zielt darauf ab, im Web und auch in mobilen Apps gut zu funktionieren. Es wird immer beliebter bei Entwicklern. Wenn Sie es auch übernehmen möchten, gibt es viele Möglichkeiten, Material Design auf Ihrer Website zu implementieren. Sie können Polymer oder Angular oder Materialize verwenden.

Materialisieren ist a CSS-Framework basierend auf Material Design-Prinzipien mit Unterstützung von Sass für eine bessere Entwicklung. Es verfügt über ein Standard-Styling für eine einfache Verwendung und eine detaillierte Dokumentation.

Sie finden viele nützliche Komponenten in: Dialog, Modal, Datumsauswahl, Materialschaltflächen, Parallaxe, Karten und mehr. Es gibt auch viele Navigationsoptionen, aus denen Sie wählen können, z. B. Dropdown-Menü, Slide-In-Menü und Registerkarten. Materialise verwendet auch a 12-Gitternetz mit 3 standardmäßigen Medienabfragen in Bildschirmgröße: Eine maximale Breite von 600 Pixeln ist ein mobiles Gerät, ein 992px-Tablet-Gerät und mehr als 992px werden als Desktop-Gerät betrachtet.

Fertig machen

Es gibt zwei Möglichkeiten, um mit Materialise zu beginnen: use Standard-CSS oder Sass. Beide Quellen können hier heruntergeladen werden. Sie können sie auch mit der Laube mit dem folgenden Befehl erhalten:

 Bower installieren materialisieren 

Stellen Sie nach dem Abrufen der Quellen sicher, dass Sie sie ordnungsgemäß in Ihrer Projektdatei verlinken oder die Quelle kompilieren, wenn Sie die Sass-Version verwenden.

Eigenschaften

In diesem Abschnitt werde ich einige Funktionen erläutern, die Materialise bietet.

1. Sass Mixins

Dieses Framework enthält Sass Mixins, die automatisch alle Browser-Präfixe hinzufügen, wenn Sie bestimmte CSS-Eigenschaften schreiben. Es ist eine großartige Funktion, die sichergestellt werden muss Kompatibilität mit allen Browsern, mit so wenig Aufwand und Code wie möglich.

Sehen Sie sich die folgenden Animationseigenschaften an:

 -Webkit-Animation: 0.5s; -Moz-Animation: 0,5s; -o-Animation: 0,5 s; -ms-Animation: 0.5s; Animation: 0,5 s; 

Diese Codezeilen können mit einer einzigen Zeile von Sass-Mixin wie folgt umgeschrieben werden:

 @include Animation (.5s); 

Es gibt ungefähr 19 Hauptmixins verfügbar. Um die vollständige Liste anzuzeigen, gehen Sie zur Kategorie Sass in der MIXINS Tab.

2. Fließtext

Während andere Frontend-Frameworks festen Text verwenden, implementiert Materialize wirklich reaktionsschnellen Text. Textgröße und Zeilenhöhe werden ebenfalls ansprechend skaliert, um die Lesbarkeit zu gewährleisten. Bei kleineren Bildschirmen wird die Zeilenhöhe größer skaliert.

Um Fließtext zu verwenden, können Sie einfach das hinzufügen Fließtext klasse auf dem gewünschten text. Zum Beispiel:

 
Dies ist Fließtext.
 

Schauen Sie sich die Demo hier im Bereich Fließtext an.

3. Welleneffekt mit Wellen

Material Design bietet auch interaktives Feedback. Ein bemerkenswertes Beispiel ist der Ripple-Effekt. In Materialise wird dieser Effekt aufgerufen Wellen. Wenn Benutzer auf eine Schaltfläche, eine Karte oder ein anderes Element klicken oder tippen / berühren, wird der Effekt angezeigt. Wellen können einfach durch Hinzufügen erstellt werden Welleneffekt Klasse auf deine Elemente.

Dieser Ausschnitt gibt Ihnen den Welleneffekt.

 einreichen 

Die Wellen sind standardmäßig grau. Wenn Sie jedoch einen dunklen Hintergrund haben, möchten Sie möglicherweise die Farbe ändern. Fügen Sie einfach eine andere Farbe hinzu Wellen- (Farbe) zum Element. Ersetzen Sie "(Farbe)" durch einen Namen einer Farbe.

 einreichen 

Sie können aus 7 Farben wählen: hell, rot, gelb, orange, lila, grün und türkis. Sie können jederzeit Ihre eigenen Farben erstellen oder anpassen, wenn diese Farben nicht Ihren Anforderungen entsprechen.

4. Schatten

Um Beziehungen zwischen Elementen zu erzeugen, empfiehlt Material Design die Verwendung von Höhen auf den Flächen. Materialise liefert dieses Prinzip mit seinem Z-Tiefe- (Anzahl) Klasse. Sie können die Schattentiefe bestimmen, indem Sie die (Anzahl) von 1 bis 5 ändern:

 
 
Schattentiefe 3
  
 

Alle Schattentiefen werden mit dem Bild unten veranschaulicht.

5. Schaltflächen und Symbole

In Material Design gibt es drei Hauptknopfarten: hochgezogene Taste, Fab (schwebende Aktionsschaltfläche) und flacher Knopf.

(1) Erhöhter Knopf

Die hochgezogene Schaltfläche ist die Standardschaltfläche. Um diese Schaltfläche zu erstellen, fügen Sie einfach eine hinzu btn Klasse zu deinen Elementen. Wenn Sie beim Klicken oder Drücken den Welleneffekt erhalten möchten, gehen Sie wie folgt vor:

 Taste 

Alternativ können Sie der Schaltfläche auch ein Symbol links oder rechts vom Text geben. Für das Symbol müssen Sie benutzerdefinierte hinzufügen Tag mit dem Symbol Klassenname und Position. Zum Beispiel:

 Herunterladen 

In dem obigen Ausschnitt verwenden wir MDI-Datei-Datei-Download Klasse für das Download-Symbol. Es gibt ungefähr 740 verschiedene Symbole Sie können verwenden. Um sie auf der Sass-Seite auf der Registerkarte "Icons" anzuzeigen.

(2) Schwimmende Taste

Eine schwebende Schaltfläche kann durch Anhängen erstellt werden BTN-Floating Klasse und Ihr gewünschtes Symbol. Zum Beispiel:

In Material Design wird die flache Schaltfläche häufig im Dialogfeld verwendet. Zum Erstellen fügen Sie einfach hinzu btn-flach zu deinem Element wie so:

 Ablehnen 

Zusätzlich können Tasten mit der deaktiviert werden deaktiviert Klasse und größer gemacht mit btn-groß Klasse.

6. Gitter

Materialise verwendet einen Standard 12-spaltiges responsives Raster System. Die Reaktionsfähigkeit ist in drei Teile unterteilt: Klein (e) für Mobile, Medium (M) für Tablet und groß (l) für den Desktop.

Verwenden Sie zum Erstellen von Spalten s, m oder l, um die Größe anzugeben, gefolgt von der Gitternummer. Wenn Sie beispielsweise ein Layout mit halber Größe für ein mobiles Gerät erstellen möchten, sollten Sie ein s6 Klasse in dein Layout. s6 steht für klein-6 was bedeutet 6 Spalte auf kleinen Gerät.

Sie müssen auch eine col Klasse in das Layout, das Sie erstellen, und fügen Sie es in ein Element ein, das die Reihe Klasse. Damit kann das Layout richtig in Spalten eingefügt werden. Hier ist ein Beispiel:

 
 
Ich habe hier 12 Spalten oder volle Breite
 
4 Spalten (ein Drittel) hier
 
4 Spalten (ein Drittel) hier
 
4 Spalten (ein Drittel) hier
 
 

Hier sind die Ergebnisse:

Standardmäßig, col s12 hat eine feste Größe und ist für alle Bildschirmgrößen optimiert col s12 m12 l12. Wenn Sie jedoch die Größe der Spalten für verschiedene Geräte angeben möchten. Alles, was Sie tun müssen, ist, die zusätzlichen Größen wie folgt aufzulisten:

 
 
Meine Breite hat überall 12 Spalten
 
Ich habe 12 Spalten auf dem Handy, 6 auf dem Tablet und 9 auf dem Desktop
 
 

So sieht das aus:

Dies sind nur einige Funktionen von Materialise. Weitere Informationen zu den anderen Funktionen finden Sie auf der Dokumentationsseite.