Δημιουργήστε ένα UI με βάση την κάρτα με βάση

Με βάση την κάρτα Διατάξεις ιστοτόπου έχουν αναλάβει τον ιστό. Δημοφιλή από το Pinterest, το Twitter, το Facebook και το Google, οι κάρτες έχουν γίνει ένα σχέδιο σχεδιασμού για πολλές διαφορετικές περιπτώσεις χρήσης.

Δεν είναι δύσκολο να δούμε γιατί. Οι κάρτες λειτουργούν τέλεια μέσα σχεδιασμός ιστοσελίδων προσαρμοζόμενος σε συσκευές . Ως αυτοτελείς μονάδες, μπορούν να μετακινηθούν, να ανακατευτούν και να αναμειγνύονται με διαφορετικούς τύπους περιεχομένου. Απαντούν επίσης εύκολα σε διαφορετικά μεγέθη οθόνης, από μία στήλες σε κινητές συσκευές έως πολυ-στήλες σε μεγαλύτερες συσκευές.

• Βήματα για την τέλεια διάταξη ιστοσελίδων

Η Ομάδα Ζάνιας έχει χρησιμοποιήσει διάταξη με βάση την κάρτα στο έργο του για χρόνια. Το Frontend Framework, το Ίδρυμα, έχει πάντα επιδιώξει να εξοπλίσει τους σχεδιαστές ιστοσελίδων με τα εργαλεία που χρειάζονται για να σχεδιάσουν γρήγορα και να δημιουργήσουν ανταποκρινόμενους ιστότοπους, συμπεριλαμβάνοντας ένα ευρύ φάσμα αρθρωτών και εύκαμπτων εξαρτημάτων. Η έκδοση 6.3 που προστέθηκε σε αυτή τη συλλογή των δομικών στοιχείων φέρνει μια ολοκαίνουργια εφαρμογή εκτός καμβά, ανταποκρινόμενη ακορντεόν / καρτέλες και ένα ισχυρό νέο στοιχείο της κάρτας.

Σε αυτό το σεμινάριο θα μάθουμε πώς να δημιουργήσουμε ένα ευαίσθητο UI με βάση την κάρτα που εκμεταλλεύεται το πλέγμα που βασίζεται στο FlexBox του Ιδρύματος για να ανοίξει μια ολόκληρη σειρά δυνατοτήτων.

01. Δημιουργία περιβάλλοντος ανάπτυξης

Το πρώτο βήμα είναι να δημιουργηθεί ένα περιβάλλον ανάπτυξης. Για αυτό το σεμινάριο, θα χρησιμοποιήσουμε ένα περιβάλλον ανάπτυξης με βάση τον κόμβο, ώστε να χρειαστεί να εγκαταστήσετε το node.js. Οι λεπτομέρειες για να το κάνετε αυτό εξαρτώνται από το περιβάλλον σας, οπότε ελέγξτε εδώ για να μάθετε τι να κάνετε.

Μόλις εγκαταστήσετε τον κόμβο, εγκαταστήστε το θεμέλιο CLI χρησιμοποιώντας npm install -g Ίδρυμα-Cli , που θα διευκολύνει τη δημιουργία ενός νέου έργου θεμελίωσης.

02. Ξεκινήστε ένα νέο έργο

Ας δημιουργήσουμε ένα νέο έργο με βάση το Zurb Pemplate. Εκτελέστε την εντολή Ίδρυμα Νέο Καθημερινό Περιοδικό-σεμινάριο , επιλέξτε 'Ένας ιστότοπος (Ίδρυμα για τοποθεσίες)', 'Net-Magazine-Tutorial' και στη συνέχεια Zurb Template. Αυτό θα δημιουργήσει ένα πρότυπο έργου που βασίζεται στο Ίδρυμα, πλήρης με διακομιστή συστήματος κατασκευής και ανάπτυξης.

Το πρότυπο έρχεται με μια σελίδα δείγματος στο SRC / PAGAS / Index.html . Για απλότητα, θα αφαιρέσουμε αυτό το δείγμα και θα το αντικαταστήσουμε με ένα κενό & lt; header & gt; & lt; / header & gt; Για να ξεκινήσετε από το Scratch που δημιουργεί το UI που βασίζεται στην κάρτα μας. Τρέξιμο npm start Από τη γραμμή εντολών για να εκτελέσετε τον διακομιστή ανάπτυξης και θα πρέπει να δείτε μια γυμνή σελίδα HTML έτοιμη για κάρτες.

03. Δημιουργήστε μια κάρτα

Τώρα ήρθε η ώρα να δημιουργήσετε την πρώτη μας κάρτα. Προς το παρόν, ας το βάλουμε απλά μέσα σε ένα τμήμα με την τάξη . Cards-Container . Κατά τη δημιουργία μιας κάρτας χρησιμοποιώντας το Ίδρυμα, υπάρχουν τρεις βασικές τάξεις που πρέπει να γνωρίζουν: .κάρτα , .Card-τμήμα και .Card-διαιρέτης . Για πιο προχωρημένους χρήστες, καθένα από αυτά αντιστοιχεί σε ένα Mixin SCSS ( Κάρτα-δοχείο , Κάρτα-τμήμα και Κάρτα-διαιρέτης ).

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

ο .Card-τμήμα η τάξη ορίζει ένα επεκτάσιμο μπλοκ περιεχομένου, όπου μπορείτε να βάλετε περιεχόμενο, ενώ το .Card-διαιρέτης Η κατηγορία ορίζει ένα μη αναπτυσσόμενο μπλοκ, όπως ένα υποσέλιδο, κεφαλίδα ή διαιρέτη. Ας χρησιμοποιήσουμε όλες αυτές τις τάξεις για να δημιουργήσουμε την πρώτη, βασική κάρτα μας.

 & LT; Header & GT;
  & lt; div class = "Στήλες γραμμών" & GT;
    & lt; h3 & gt; οι κάρτες είναι το καλύτερο & lt; / h3 & gt;
  & lt; / div & gt;
& lt; / header & gt;
& lt; τάξη κλάσης = "cards-container" & gt;
  & lt; div class = "κάρτα" & gt;
    & lt; div class = "card-divider" & gt;
      & lt; h4 & gt; yeti header & lt; / h4 & gt;
    & lt; / div & gt;
    & lt; div class = "card-section" & gt;
      & lt; img src = "https://foundation.zurb.com/sites/docs/assets/img/yeti.svg" & gt; / img & gt;
    & lt; / div & gt;
    & lt; div class = "card-divider" & gt;
      & lt; p & gt; yeti footer & lt; / p & gt;
    & lt; / div & gt;
  & lt; / div & gt;
& lt; / τμήμα & gt; 

04. Προσθέστε στυλ συστατικών

Αν το κάνουμε αυτό, η κάρτα μας θα είναι τεράστια, επεκτείνοντας για να γεμίσει ολόκληρη την οθόνη. Θα ασχοληθούμε σύντομα με το συνολικό μέγεθος, αλλά για τώρα να το χρησιμοποιήσουμε ως δικαιολογία για να μάθετε πώς να προσθέσετε συστατικά στυλ στο zurb pemplate.

Προσθέστε ένα αρχείο _card.scss προς την SRC / Ενεργητικό / SCS / Components / προσδιορίζοντας ένα Μέγιστο πλάτος: 300px Για .κάρτα και να συμπεριλάβετε το αρχείο στο κύριο CSS μας προσθέτοντας @ import εξαρτήματα / κάρτα. προς την SRC / Ενεργητικό / SCSS / APP.SCSS .

05. Κάντε επαναχρησιμοποίηση των καρτών σας

Για να δημιουργήσετε μια επαναλαμβανόμενη διάταξη με πολλαπλές κάρτες, πρόκειται να θέλουμε τα χαρτιά μας να είναι επαναχρησιμοποιήσιμα εξαρτήματα που μπορούμε να συνδέσουμε ξανά και ξανά. Το zurb pemplate που χρησιμοποιούμε για αυτό το σεμινάριο χρησιμοποιεί μια γλώσσα προτύπωσης που ονομάζεται τιμονιά, η οποία περιλαμβάνει τη δυνατότητα δημιουργίας μερικών ή επαναχρησιμοποιήσιμων μπλοκ κώδικα.

Να μετακινήσετε την εφαρμογή της κάρτας μας σε ένα μερικό, απλά κόψτε και επικολλήστε το .κάρτα συνιστώσα που χτίσαμε σε ένα αρχείο μέσα SRC / Μερικά , λένε SRC / Μερικά / Basic-Card.html . Στη συνέχεια, μπορείτε να συμπεριλάβετε αυτό το περιεχόμενο απλά προσθέτοντας τη γραμμή {{& gt; Βασική κάρτα}} στο αρχείο ευρετηρίου σας.

06. Αρχίστε να δημιουργείτε τη διάταξη σας

Θα καλύψουμε διαφορετικούς τύπους καρτών σε λίγο, αλλά πρώτα ας χρησιμοποιήσουμε την επαναχρησιμοποιήσιμη βασική μας κάρτα για να αρχίσετε να δημιουργείτε μια μεγαλύτερη, ανταποκρινόμενη διάταξη για τις κάρτες μας. Για να το κάνετε αυτό, θα χρησιμοποιήσουμε μια ιδέα από το Ίδρυμα που ονομάζεται πλέγμα μπλοκ.

Το Ίδρυμα περιέχει μερικούς διαφορετικούς τύπους δικτύων, αλλά ξεκινούν από την έννοια των σειρών και των στηλών. Μια σειρά δημιουργεί ένα οριζόντιο μπλοκ το οποίο μπορεί να περιέχει πολλαπλές κατακόρυφες στήλες. Αυτά τα βασικά δομικά στοιχεία αποτελούν τον πυρήνα σχεδόν όλων των διατάξεων.

Τα πλέγματα μπλοκ είναι ένας στενογραφικός τρόπος για να δημιουργήσετε εξίσου μεγέθους στήλες και να επιτρέψετε στον εαυτό σας την ευελιξία και την ελευθερία να προσθέσετε ένα αόριστο ποσό περιεχομένου και να το κάνετε ωραία σε ίσες στήλες. Απλώς προσθέτετε μια τάξη στη σειρά και στη συνέχεια προσθέστε όσα συστατικά στήλης όπως θέλετε. Το ίδρυμα θα τους βάλει έξω για σας τακτοποιημένα και καθαρά.

Δεδομένου ότι αναμένουμε να έχουμε έναν πολύ μεγάλο και μεταβαλλόμενο αριθμό καρτών, αυτό είναι ιδανικό για τους σκοπούς μας. Ας το ρυθμίσουμε γρήγορα σε ένα πλέγμα τεσσάρων στηλών και να προσθέσετε μερικές δεκάδες κάρτες. Προς το παρόν θα ανησυχούμε μόνο για μεγάλες οθόνες, έτσι ώστε να εφαρμόσουμε απλώς το .LARGE-UP-4 τάξη στη σειρά.

 & lt; Τμήμα κλάσης = "Κάρτα-δοχείο" & GT;
& lt; div class = "σειρά μεγάλων-4" & gt;
{{#repeat 24}}
& lt; div class = "στήλη" & gt;
{{& gt; Βασική κάρτα}}
& lt; / div & gt;
{{/επαναλαμβάνω}}
& lt; / div & gt;
& lt; / τμήμα & gt; 

07. Κάντε την ανταποκρινόμενη

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

Ας βάλουμε μια κάρτα ανά σειρά σε κινητές οθόνες και τρεις ανά σειρά σε tablet, προσθέτοντας τα μαθήματα .small-up-1 και .medium-up-3 στη σειρά. Εάν το κάνουμε αυτό, και αφαιρέστε το stopgap Μέγιστο πλάτος Ακίνητα που βάζουμε _card.scss . Έχουμε ήδη μια όμορφα ανταποκρινόμενη διάταξη που φαίνεται καλή σε όλα τα μεγέθη οθόνης.

08. Δοκιμάστε ορισμένους νέους τύπους καρτών

Τώρα ας διαφοροποιήσουμε το σύνολο των καρτών μας, ένας άλλος τύπος είναι μια καθαρή φωτογραφία άκρης προς άκρη. Τα τμήματα κάρτας και τα διαχωριστικά καρτών περιέχουν padding από προεπιλογή, αλλά για να έχουν περιεχόμενο άκρων προς άκρη, μπορούμε απλά να βάλουμε την εικόνα απευθείας μέσα στην κάρτα. Ας το προσθέσουμε ως α Photo-card.html μεροληπτικός SRC / Μερικά .

 & lt; div class = "κάρτα" & gt;
& lt; img src = "http://foundation.zurb.com/assets/img/foundation-emails/inky-all-devices.svg" / & gt;
& lt; / div & gt; 

09. Εισαγωγή FlexBox

Υπάρχουν εκατοντάδες πιθανοί τρόποι που μπορούμε να βάλουμε μαζί κάρτες - για κάποια έμπνευση, μπορείτε να δείτε το Ίδρυμα αποθήκη καρπού . Αλλά ας προχωρήσουμε στο πώς διαχειρίζουμε τη διάταξη όταν έχουμε κάρτες διαφορετικών μεγέθους. Εάν εισάγετε τη φωτο-κάρτα μερική στη διάταξη που εναλλάσσεται με τη βασική κάρτα όπως κάναμε πριν, καταλήξουμε με λίγο μια οδοντωτή εμπειρία, επειδή τα ύψη μας είναι διαφορετικά. Αυτό μπορεί να είναι καλό, ή ίσως να θέλουμε να προσαρμόσουμε τη διάταξη μας για να αντισταθμίσουμε.

Για αυτό το σεμινάριο, θα αντισταθμίσουμε χρησιμοποιώντας την αγαπημένη μας νέα τεχνική διάταξης CSS - FlexBox. Το Ίδρυμα έρχεται με μια λειτουργία flexbox για το δίκτυό του. Για να το ενεργοποιήσετε, απλά πρέπει να ανοίξετε SRC / Ενεργητικό / SCSS / APP.SCSS , σχολιάζουν @include ίδρυμα-πλέγμα; και @include Ίδρυμα-float-classes; και έχασε @include Ίδρυμα-εύκαμπτο δίκτυο; και @include Ίδρυμα-flex-classes; .

10. Κάντε τα κάρτες σας το ίδιο ύψος

Με τις κλάσεις FlexBox είναι ενεργοποιημένες, είναι απλό να πάρετε τα χαρτιά μας να είναι το ίδιο ύψος. Πρώτον, μπορούμε να κάνουμε τις στήλες μας flex γονείς προσθέτοντας το .Φαλέτα τάξη. Αυτή είναι μια συντόμευση πρωτοτύπων για την προσθήκη του Εμφάνιση: Flex; ιδιοκτησία σε αυτούς. Μόλις το κάνουμε αυτό, όλες οι κάρτες θα γίνουν το ίδιο ύψος, αλλά αφού η Flex Child Elements συρρικνώνεται από προεπιλογή, μερικές από τις κάρτες μας γίνονται στενοί.

Μπορούμε να διορθώσουμε αυτό το ζήτημα απλώς λέγοντας αυτά τα στοιχεία να αναπτυχθούν. Αυτό γίνεται είτε με στόχευση τους με CSS και δίνοντάς τους Flex-Grow: 1; ή για απλότητα ενώ πρωτοτυπίες, μόνο προσθέτοντας την τάξη .Flex-Child-Grow . Μόλις όλα αυτά έχουν γίνει όλες οι κάρτες μας γεμίζουν τις στήλες και θα είναι όμορφα το ίδιο ύψος.

Αυτό το άρθρο εμφανίστηκε αρχικά στο καθαρό περιοδικό Τεύχος 293. Αγοράστε το εδώ ή Εγγραφείτε στο καθαρό εδώ .

Μου άρεσε αυτό; Δοκιμάστε αυτά ...

• 10 λόγοι για τους οποίους θα πρέπει να χρησιμοποιείτε ατομικό σχεδιασμό
• Δημιουργία και ζωντανή πολυγώνια SVG
• CSS κόλπα για να φέρει επανάσταση στις διατάξεις σας