Δημιουργία ιστοσελίδων Superfast με το Foundation 5 [Οδηγός]
Η χρήση ενός πλαισίου διεπαφής μπορεί να βελτιώσει τη ροή εργασίας σας στο web design με πολλούς τρόπους. Μπορεί να σας βοηθήσει να ακολουθήσετε τις σύγχρονες αρχές σχεδιασμού όπως η κινητή πρώτη προσέγγιση, η σημασιολογική σήμανση και ο σχεδιασμός που ανταποκρίνεται. Μπορείς λάβετε μόχλευση πολλών έτοιμων προς χρήση στοιχείων CSS και JavaScript και σημαντικά επιταχύνετε την αναπτυξιακή διαδικασία σας, ελευθερώνοντας περισσότερο χρόνο για να εστιάσετε στην οπτική και τη σχεδίαση της εμπειρίας των χρηστών.
Το Zurb Foundation 5 είναι ένα από τα ισχυρότερα σύνολα προεντεταμένων στην αγορά. Είναι λογικά κατασκευασμένο, εύκολο στη χρήση και εντελώς δωρεάν. Σας επιτρέπει να χρησιμοποιήσετε ένα ευέλικτο δίκτυο CSS ότι διευκολύνει τη δημιουργία ενός καθαρού, φιλικού προς το χρήστη διάταξης. Το πλαίσιο του Ιδρύματος είναι επίσης πολύ δοκιμασμένο, επομένως φροντίζει τη συμβατότητα μεταξύ των προγραμμάτων περιήγησης και των πολλαπλών συσκευών.
Σε αυτό το σεμινάριο θα σας δείξω πώς μπορείτε να φτιάξετε έναν υπερσύγχρονο ιστότοπο με το Zurb Foundation 5. Μπορείτε να ρίξετε μια ματιά στο τελικό αποτέλεσμα στη σελίδα επίδειξης.
Θα δημιουργήσω τη διάταξη της ιστοσελίδας, το καθήκον της προσθήκης λεπτών στοιχείων σχεδιασμού σας περιμένει. Ο δικτυακός τόπος που θα δημιουργήσουμε μαζί σε αυτό το σεμινάριο θα ολοκληρώσει το όνειρο του σύγχρονου σχεδιαστή UX: θα είναι ευαίσθητο, φιλικό προς το χρήστη, και φιλικό προς το χρήστη και σημασιολογικό.
Λόγω του μήκους αυτού του οδηγού, εδώ είναι οι συντομεύσεις για να φτάσετε στο τμήμα που θέλετε γρήγορα:
- Λήψη του Ιδρύματος 5
- Κατανόηση του δικτύου
- Πότε να χρησιμοποιήσετε τις μαζικές-N, μεσαίες-N και μικρές-N κλάσεις
- Προσθέτοντας την επάνω γραμμή μενού
- Κατανομή του κύριου μέρους
- Προσθήκη πίνακα για δημοφιλείς θέσεις
- Προσθέτοντας 3 περισσότερες αναρτήσεις στο δημοφιλή πίνακα
- Προετοιμασία του CSS
- Προσθήκη κάποιου επιπλέον περιεχομένου
- Προσθήκη σελίδας
- Ο πληθυσμός της πλευρικής γραμμής
- Το έντυπο του ενημερωτικού δελτίου
- Flex βίντεο
- Το μενού Sidebar
- συμπέρασμα
1. Κατεβάστε το Ίδρυμα 5
Μπορείτε να κατεβάσετε το Ίδρυμα 5 σε 4 διαφορετικές φόρμες:
- τον πλήρη κωδικό
- μια ελαφρύτερη έκδοση με μόνο τον βασικό κώδικα
- μια προσαρμοσμένη έκδοση όπου μπορείτε να προσαρμόσετε τι χρειάζεστε και τι όχι
- μια έκδοση Sass αν θέλετε να ορίσετε τις μεταβλητές και τις μεταλλάξεις σας στο SCSS.
Σε αυτό το σεμινάριο θα επιλέξω τον πλήρη κωδικό με το CSS βανίλιας, αλλά φυσικά μπορείτε να επιλέξετε οποιεσδήποτε άλλες εκδόσεις εάν θέλετε να εξορθολογίσετε τον ιστότοπό σας και να χρησιμοποιήσετε μόνο αυτό που χρειάζεστε πραγματικά.
Αφού έχετε κατεβάσει και αποσυσκευάσει το αρχείο zip, ανοίξτε το αρχείο index.html στο πρόγραμμα περιήγησης και θα δείτε κάτι παρόμοιο:
Ναι, οι devs περιελάμβαναν εύχρηστους συνδέσμους στο αρχείο ευρετηρίου. Μπορείτε να το αφήσετε με αυτόν τον τρόπο και να δημιουργήσετε ένα νέο αρχείο για το πρωτότυπο σας με το όνομα home.html ή κάτι παρόμοιο, αλλά δεν χρειάζεται πραγματικά να το κρατήσετε καθώς μπορείτε εύκολα να φτάσετε στην τεκμηρίωση του Foundation όποτε θέλετε.
Ανοίξτε το αρχείο index.html στον αγαπημένο σας επεξεργαστή κειμένου και διαγράψτε τα πάντα μέσα στο αλλά πριν το κλείσιμο Οι κανόνες στυλ που προσθέτουμε στο app.css αρχείο σε αρκετά πρωτότυπο μας είναι τα εξής: Καθώς το Ίδρυμα 5 χρησιμοποιεί σχετικές μονάδες, πρέπει να χρησιμοποιήσουμε “em”-s ή “rem”-s αντί για εικονοστοιχεία να συμβαδίσει με τους κανόνες. (Μπορείτε να διαβάσετε σχετικά με τις μονάδες CSS: Pixels vs ems vs% εδώ.) Χρησιμοποιούσα την επέκταση Firebug του Firefox για να προσδιορίσω πού πρέπει να παρακάμψω τους κανόνες CSS του Foundation 5, αν μπορείτε να χρησιμοποιήσετε οποιαδήποτε άλλη επέκταση προγράμματος περιήγησης. Εδώ, σε αυτό το σύντομο απόσπασμα CSS, έπρεπε μόνο να αντικαταστήσουμε την προεπιλεγμένη CSS του ιδρύματος μόνο μία φορά, στον τελευταίο κανόνα (.row .row.popular-main). Εδώ είναι η εμφάνιση του demo site: Χρησιμοποιώντας τους ίδιους κανόνες όπως και πριν, θα προσθέσουμε λίγο περισσότερο περιεχόμενο στο κύριο τμήμα της σελίδας. Το περιεχόμενο που θα προσθέσουμε τώρα θα είναι το τελευταίες δημοσιεύσεις με μικρές μικρογραφίες. Το Ίδρυμα 5 έχει πολύ δροσερά προετοιμασμένα στυλ μικρογραφιών που θα χρησιμοποιήσουμε σε αυτό το Βήμα. Τα Thumbnails του Foundation χρησιμοποιούν α προεπιλεγμένη κλάση CSS που ονομάζεται “th” ότι πρέπει να προσθέσουμε στις εικόνες που θέλετε να εμφανίζονται ως μικρογραφίες με τον τρόπο που μπορείτε να τις δείτε στο απόσπασμα κώδικα παρακάτω. Για κάθε Τελευταία Δημοσίευση προσθέτουμε μια νέα γραμμή κάτω από το Λαϊκό Πάνελ με το δικό μας προσαρμοσμένη κλάση CSS που ονομάζεται “πιο πρόσφατο μήνυμα”. Σε μέγεθος tablet και επιφάνειας εργασίας θα εμφανιστεί μια μικρή μικρογραφία χρησιμοποιώντας την κατηγορία μικρογραφιών του Foundation στο αριστερό μέρος και τον τίτλο και μια σύντομη περιγραφή στα δεξιά. Στο κινητό, ο τίτλος και η περιγραφή θα πέσουν κάτω από τη μικρογραφία. Τώρα χρησιμοποίησα το “μεσαίες-3 στήλες” και “μεσαίες-9 στήλες” για να τα διαχωρίσετε σε 1: 3, 25% για την εικόνα και 75% για το κείμενο από το μέσο μέγεθος. Εισαγάγετε το ακόλουθο απόσπασμα κώδικα κάτω από το Δημοφιλέστερο πλαίσιο τρεις φορές (για τις τρεις τελευταίες δημοσιεύσεις). Εδώ συμπεριλαμβάνω τον κώδικα μιας σειράς τελευταίας ανάρτησης, καθώς όλοι χρησιμοποιούν το ίδιο σημάδι HTML, αλλά το περιεχόμενο διαφέρει. Περιεχόμενο τελευταίας δημοσίευσης ... Το προσαρμοσμένο αρχείο CSS που δημιουργήθηκε στο βήμα 4.3, app.css παίρνει επίσης μερικούς νέους κανόνες στυλ για να κρατήσει τα βλέμματα του demo τακτοποιημένο. Σημείωση: Εάν θέλετε να προσθέσετε το δικό σας προσαρμοσμένο CSS στο Foundation, μην ξεχάσετε ποτέ να ελέγξετε, με ένα εργαλείο dev web, όπου θα πρέπει να αντικαταστήσετε τους προεπιλεγμένους κανόνες. Στο απόσπασμα CSS παρακάτω, πρέπει να το παρακάμψουμε στον πρώτο κανόνα (.row .row.latest-post). Στο δεύτερο κανόνα αρκεί να χρησιμοποιήσουμε μόνο το δικό μας προσαρμοσμένο επιλογέα (.latest-post h4). Το πρωτότυπο μας τώρα μοιάζει με αυτό: Σε αυτό το βήμα θα προσθέσουμε μια δροσερή στοιχειοθέτηση κάτω από τις τελευταίες δημοσιεύσεις. Το Ίδρυμα 5 μας δίνει ένα χέρι βοήθειας από τα βολικά, έτοιμα για χρήση μαθήματα σελίδωσης. Χρησιμοποιούμε τον ίδιο κώδικα σε αυτό το βήμα που μπορείτε να βρείτε στο “Προχωρημένος” στο εσωτερικό των εγγράφων σελίδωσης. Ακολουθούν τα πιο πρόσφατα μηνύματα με την πρόσφατα προστιθέμενη σελίδα Σελίδες: Τώρα που είμαστε έτοιμοι με το κύριο περιεχόμενο του demo site μας, ήρθε η ώρα να συμπληρώσουμε τη δεξιά πλευρά. Η δεξιά πλαϊνή μπάρα θα γλιστρήσει κάτω από το κύριο περιεχόμενο σε μεγέθη για κινητά και tablet. Θα πρέπει να εισαγάγετε όλα τα αποσπάσματα κώδικα σε αυτήν την ενότητα μέσα στο Η αριστερή πλαϊνή μπάρα θα περιλαμβάνει μια φόρμα εγγραφής στο ενημερωτικό δελτίο (1), ένα τελευταίο βίντεο (2) και ένα μενού πλευρικής γραμμής σε μορφή ακορντεόν με το ψευδώνυμο “Το βιβλίο μαγειρικής μας” (3). Στο τέλος αυτού του βήματος θα είμαστε έτοιμοι με το demo που θα μοιάζει με αυτό: Για να δημιουργήσετε μια φόρμα στο Ίδρυμα 5, δεν χρειάζεται να κάνετε τίποτα άλλο, απλά τοποθετήστε το πλέγμα μέσα σε ένα Ετικέτα HTML. Εάν ρίξετε μια ματιά στο απόσπασμα κώδικα παρακάτω, θα δείτε ότι βάζουμε τη φόρμα σε μια σειρά στην οποία θέτουμε διαφορετικούς επιλογείς CSS για όλα τα 3 πλέγματα: “μικρή-12”, “μέσο-9”, και “μεγάλο-12”. Επιλέξαμε αυτή τη λύση επειδή ένα 100% ευρύ έντυπο ενημερωτικού δελτίου φαίνεται δροσερό σε μέγεθος κινητού τηλεφώνου, αλλά είναι πολύ δύσκολο για το μέγεθος του tablet καθώς γίνεται πολύ ευρύς. Ευτυχώς το Ίδρυμα 5 μας επιτρέπει να το χρησιμοποιήσουμε “Ελλιπείς σειρές”: πρέπει απλά να προσθέσουμε το “τέλος” τάξη στον ορισμό κλάσης CSS της ατελούς στήλης. Έτσι αυτό είναι που πρόκειται να συμβεί εδώ: σε μέγεθος κινητού, η πλαϊνή γραμμή θα εμφανιστεί κάτω από το κύριο περιεχόμενο με μια φόρμα εγγραφής στο ενημερωτικό δελτίο που καλύπτει ολόκληρη την οθόνη. Σε μεσαίο μέγεθος, η πλαϊνή μπάρα θα παραμείνει κάτω από το κύριο περιεχόμενο, αλλά το έντυπο Newsletter θα καλύπτει μόνο το 75% της οθόνης, ενώ το υπόλοιπο 25% θα παραμείνει κενό. Στο μέγεθος της επιφάνειας εργασίας, η πλαϊνή μπάρα θα βρίσκεται ακριβώς δίπλα στο κύριο περιεχόμενο και το έντυπο Newsletter θα καλύψει ξανά ολόκληρο το πλάτος της πλαϊνής γραμμής. Δείτε τα Έγγραφα Grid για να διαβάσετε περισσότερα σχετικά με τις ατελείς σειρές. Τώρα ρίξτε μια ματιά στο εσωτερικό του επικεφαλίδα margin-bottom: 2em; .popular-πρόσθετο h4 font-size: 1.125em; ανώτατο όριο περιθωρίου: 0.4εκ. .row .row.popular-main margin-bottom: 1.5em;
4.4 Προσθήκη κάποιου επιπλέον περιεχομένου
Τίτλος τελευταίας δημοσίευσης
.σειρά .row.latest-post margin-bottom: 1.5em; .latest-post h4 margin-top: 0; μέγεθος γραμματοσειράς: 1.125em;
4.5 Προσθήκη σελίδωσης
5. Πληθυσμός της πλευρικής γραμμής
5.1 Το έντυπο του ενημερωτικού δελτίου
Εγγραφείτε στο ενημερωτικό μας δελτίο
Τα έντυπα βάσης έχουν πολλές άλλες επιλογές σχεδίασης, όπως ετικέτα πρόθεμα, ετικέτα ακτίνας προθέματος, κουμπί Postfix και ετικέτα Postfix. Επιλέξαμε εδώ την επιλογή Postfix Button καθώς είναι πιο φιλική προς το χρήστη: οι χρήστες μπορούν να κάνουν κλικ σε αυτό και να στείλουν τη φόρμα ταυτόχρονα.
Μέσα στη φόρμα θα προσθέσουμε μια νέα, ένθετη γραμμή, η οποία χωρίζει την οθόνη σε 2: 1. Η εισαγωγή κειμένου θα έχει 8 στήλες και το κουμπί postfix θα πάρει 4. Επειδή θέλουμε να έχουμε αυτή τη διάταξη ακόμη και σε οθόνη κινητού, θα θέσουμε το “μικρές-8 στήλες” και “μικρές-4 στήλες” CSS-επιλογείς εδώ, το μικρό δίκτυο είναι το μικρότερο μέγεθος όπου θέλουμε να εφαρμόσουμε αυτήν τη σήμανση.
Μπορείτε να δείτε άλλο ένα νέο πράγμα στον κώδικα HTML πάνω από το οποίο είναι το “κατάρρευση σειράς” τάξη. Αυτό είναι το ενσωματωμένο ύφος του Foundation 5. Από προεπιλογή υπάρχει ένα υδρορροή μεταξύ δύο παρακείμενων στηλών, αλλά αν προσθέσουμε το “κατάρρευση” τάξη στη σειρά μας, η υδρορροή θα εξαφανιστεί. Αυτό το κάνουμε επειδή θέλουμε το κουμπί να βρίσκεται ακριβώς δίπλα στην εισαγωγή κειμένου χωρίς κανένα κενό μεταξύ τους.
Τώρα είναι ώρα να εισαγάγετε αυτό το απόσπασμα κώδικα στο
5.2 Flex Video
Κάτω από το τμήμα Newsletter θα προσθέσουμε μια καθημερινή συνταγή βίντεο στην πλαϊνή μας μπάρα. Το Ίδρυμα 5 μας βοηθάει καθιστούν τα ενσωματωμένα βίντεο ευαίσθητα και τα αναγκάζετε να αυτομάτως κλιμακώνονται με τη λειτουργία Flex Video.
Τα βίντεο Flex χρησιμοποιούν το ενσωματωμένο “flex-video” CSS τάξη. Δημιουργούμε μια νέα σειρά για την ενότητα της ημερήσιας γραμμής του Daily Video Recipe και τοποθετήστε μια μεγάλη στήλη σε αυτήν με το “μικρές 12 μεσαίες 9 μεγάλες-12 στήλες τέλος” CSS επιλογείς για τον ίδιο λόγο χρησιμοποιήσαμε μια ατελής σειρά στο μεσαίο δίκτυο στο προηγούμενο βήμα.
Εδώ είναι ο κώδικας που πρέπει να επικολλήσετε κάτω από την ενότητα Newsletter. Μπορείτε να χρησιμοποιήσετε οποιοδήποτε βίντεο από Youtube, Vimeo κλπ.
Ημερήσια Συνταγή βίντεο
5.3 Το μενού Sidebar
Για το μενού Sidebar θα χρησιμοποιήσουμε τη λειτουργία Accordion του Foundation 5. Τα ακορντεόν είναι στοιχεία ιστού που επεκτείνουν και συμπτύσσουν το περιεχόμενο σε λογικές ενότητες.
Στο demo site μας, αυτά τα λογικά τμήματα είναι οι 3 διαφορετικές ομάδες τροφίμων (Κύρια πιάτα, Πιάτα, Επιδόρπια) και κάθε ομάδα περιέχει περισσότερες μικρότερες ομάδες όπως “Πουλερικά”, “Χοιρινό”, “Βοδινό κρέας”, “Χορτοφάγος”.
Τοποθετούμε ολόκληρη την Ακορντία της πλαϊνής γραμμής σε μια μεγάλη στήλη με την ίδια λογική όπως στο 5.1 και 5.2 βήματα πριν. Βάζουμε το ακορντεόν μέσα σε αυτό ως μια λίστα με τις κατάλληλες ενσωματωμένες κατηγορίες CSS όπως “ακορντεόν” και “ακορντεόν-πλοήγηση”.
Καθώς το Accordions του Foundation λειτουργεί με το JavaScript, μπορείτε να προσαρμόσετε τη συμπεριφορά του με τη βοήθεια προκαθορισμένων μεταβλητών JavaScript, αν θέλετε. Για να το κάνετε αυτό, κοιτάξτε το “Προαιρετική ρύθμιση παραμέτρων JavaScript” στην ενότητα Acordion Docs. Το παρακάτω απόσπασμα κώδικα έρχεται κάτω από την ενότητα Flex Video μέσα στο αρχείο index.html.
Το βιβλίο μαγειρικής μας
συμπέρασμα
Τώρα που είμαστε έτοιμοι με το demo site μας, ας δούμε τι άλλο μπορείτε να πετύχετε με το Foundation 5. Τα στοιχεία που χρησιμοποιήσαμε σε αυτό το demo είναι απλά ένα μικρό σύνολο των χαρακτηριστικών του πλαισίου του Ιδρύματος. Υπάρχουν πολλά άλλα πράγματα που μπορείτε να χρησιμοποιήσετε στο σχεδιασμό σας, όπως προσαρμόσιμα εικονίδια μπαρ, Breadcrumbs, Lightboxes, εύρος διαδρομών, επικύρωση φόρμας και πολλά άλλα. Τα Έγγραφα είναι αρκετά καλά γραμμένα και βοηθούν τους προγραμματιστές με πολλά παραδείγματα κώδικα.
Αν είστε εξοικειωμένοι με το Sass, έχετε ακόμα περισσότερες επιλογές, καθώς κάθε τμήμα των Εγγράφων εξηγεί πώς μπορείτε να δημιουργήσετε τα δικά σας mixins και ποιες μεταβλητές Sass μπορείτε να χρησιμοποιήσετε για να προσαρμόσετε τον ιστότοπό σας. Πριν ξεκινήσετε να σχεδιάζετε την ιστοσελίδα σας, μην ξεχάσετε να ελέγξετε τη συμβατότητα του πλαισίου του Ιδρύματος για να βεβαιωθείτε ότι λειτουργεί σε όλα τα προγράμματα περιήγησης που χρειάζεστε για να δημιουργήσετε.
- Προβολή επίδειξης
- Λήψη πηγής
