Μια γρήγορη εισαγωγή στο Material Design χρησιμοποιώντας το Materialize

Τι είναι ο σχεδιασμός υλικών;

Το Material Design είναι μια σχεδιαστική γλώσσα που δημιουργήθηκε από την Google. Σύμφωνα με το material.io, το Material Design στοχεύει να συνδυάσει:

… Κλασικές αρχές καλής σχεδίασης με την καινοτομία και τη δυνατότητα της τεχνολογίας και της επιστήμης. Στοχεύει στην ανάπτυξη ενός ενιαίου υποκείμενου συστήματος που επιτρέπει μια ενοποιημένη εμπειρία σε πλατφόρμες και μεγέθη συσκευών. Οι εντολές για κινητά είναι θεμελιώδεις, αλλά το άγγιγμα, η φωνή, το ποντίκι και το πληκτρολόγιο είναι όλες οι μέθοδοι εισαγωγής πρώτης κατηγορίας.

Γιατί να χρησιμοποιήσετε το Υλικό Σχεδιασμός;

Το Material Design παρέχει μια απρόσκοπτη εμπειρία χρήστη σε όλες τις συσκευές. Αποκριτικές μεταβάσεις και κινούμενα σχέδια, μαζί με επένδυση και εφέ βάθους όπως σκιές και αστραπές, το καθιστούν κομψό και φιλικό προς το χρήστη. Η Google χρησιμοποιεί Σχεδίαση υλικών σε όλες σχεδόν τις εφαρμογές της (όπως το Keep και το Ημερολόγιο).

Πώς μπορείτε να χρησιμοποιήσετε τη σχεδίαση υλικών στις εφαρμογές ιστού σας;

Το Materialize είναι μια αποκριτική βιβλιοθήκη συστατικών front-end παρόμοια με το Bootstrap. Προσφέρει ό, τι έχει να προσφέρει το Bootstrap, αλλά η διαφορά είναι ότι το Materialize ακολουθεί τις αρχές σχεδιασμού υλικών. Ακολουθεί ένα παράδειγμα προτύπου.

Ακολουθεί μια λίστα χαρακτηριστικών που προσφέρει το Materialize:

  • Πλέγμα
  • Πίνακες
  • Κονκάρδες, κουμπιά, ψωμιά
  • Κάρτες, μάρκες, συλλογές
  • Υποσέλιδο, φόρμες
  • Navbar
  • Και πολύ περισσότερα!

Πως να ξεκινήσεις

Σε αντίθεση με το Bootstrap, το Materialize δεν απαιτεί popper.js. Απαιτεί μόνο jQuery. Αυτό είναι το μόνο που χρειάζεστε για να ξεκινήσετε. Προσθέστε αυτό στο HTML και θα είστε έτοιμοι!

Χρωματιστά

Χρησιμοποιώντας το Materialize, μπορείτε να αλλάξετε το χρώμα οποιουδήποτε στοιχείου HTML απλώς δίνοντάς του ένα όνομα κλάσης του χρώματος που θέλετε. Για παράδειγμα, εάν θέλετε να δώσετε στην ετικέτα παραγράφου το κόκκινο χρώμα, κάντε τα εξής:

Lorem Ipsum

Επιπλέον, μπορείτε επίσης να φωτίσετε ή να σκουρύνετε ένα χρώμα δίνοντάς του ένα άλλο όνομα τάξης lighten-1ή darken-1. Για παράδειγμα,

Sample Texτ

. Το 1 μπορεί να αντικατασταθεί με αριθμούς έως 5 για ελαφρύτερο και έως 4 για σκοτεινό. Οι υψηλότεροι αριθμοί θα εφαρμόζουν ελαφρύτερες ή πιο σκούρες αποχρώσεις του χρώματος.

Κουμπιά

Για να πραγματοποιήσετε ένα κουμπί, απλώς δώστε το όνομα της τάξης btn. Μπορείτε επίσης να προσθέσετε ένα δροσερό κινούμενο σχέδιο σε αυτό δίνοντάς του μια άλλη τάξη waves-effect. Εάν χρειάζεστε ένα μεγαλύτερο κουμπί, btn-largeμπορεί να χρησιμοποιηθεί τάξη. Για παράδειγμα:

 Click    Click    Click  

Σκιά

Στην υλική σχεδίαση, όλα πρέπει να έχουν ένα ορισμένο βάθος z που καθορίζει πόσο μακριά ανυψώνεται ή βρίσκεται κοντά στη σελίδα που είναι το στοιχείο.

Για να εφαρμόσετε ένα εφέ σκιάς σε ένα στοιχείο, z-depth-2μπορεί να χρησιμοποιηθεί η κλάση (2 μπορούν να αντικατασταθούν με αριθμούς 1–5). Για παράδειγμα:

συμπέρασμα

Έχω χάσει μόνο την επιφάνεια εδώ. Υπάρχουν πολλά περισσότερα διαθέσιμα στο Materialize (όπως μεταβάσεις, κάρτες, καρουσέλ και modals). Μπορείτε να μάθετε πώς να χρησιμοποιείτε όλα τα στοιχεία από τα έγγραφα. Τα ονόματα των τάξεων είναι πολύ απλά και το πλέγμα είναι πολύ χρήσιμο για τη γρήγορη δημιουργία αποκριτικών στηλών. Σας εύχομαι καλή τύχη!