Περιεχόμενο
- 01. Η παρουσία των συστημάτων δικτύου
- 02. Τι χρειαζόμαστε από ένα πλέγμα
- 03. Ξεκινώντας
- 04. Καθιστώντας το ανταποκρινόμενο
- 05. Περίμενε. Αυτό δεν είναι σημασιολογικό
- 06. Επόμενα βήματα
- Σας άρεσε αυτό; Διαβάστε αυτά!
- Απαιτείται γνώση: Ενδιάμεσο CSS, ενδιάμεσο HTML
- Απαιτεί: Πρόγραμμα επεξεργασίας κώδικα, πρόγραμμα περιήγησης
- Ώρα έργου: 1 ώρα
- Αρχείο υποστήριξης
Η δημιουργία ιστοσελίδων είναι, ειλικρινά, καταπληκτική. Μπορούμε να δημιουργήσουμε πλούσιες, δυναμικές εμπειρίες που βλέπουν εκατοντάδες, χιλιάδες, εκατομμύρια άνθρωποι σε όλο τον κόσμο. Παίρνουμε να παίζουμε με νέα παιχνίδια, συνεργαζόμαστε με όλες τις καλύτερες εταιρείες και ξεφυλλίζουμε χωρίς να συναντηθούμε ως σπασίκλες (ξέρετε ότι είναι αλήθεια). Αυτό είναι το καλό πράγμα.
Το κακό (εντάξει, η πρόκληση) είναι ότι πρέπει να αντιμετωπίσουμε όλο και περισσότερους τύπους προγραμμάτων περιήγησης και συσκευών και να δημιουργήσουμε ολοένα και πιο περίπλοκους και πλήρεις ιστότοπους από ό, τι ποτέ πριν. Γι 'αυτό χρειαζόμαστε συστήματα δικτύου. Μας βοηθούν να φτιάχνουμε τα πράγματα γρηγορότερα και καλύτερα, και με γνώμονα το μέλλον της βιομηχανίας μας. Ας δούμε τι χρειάζεται ένα σύγχρονο σύστημα πλέγματος και, στη συνέχεια, δημιουργήστε το.
01. Η παρουσία των συστημάτων δικτύου
Τα πλέγματα δεν είναι καινούργια. Υπάρχουν, συντηρητικά, αρκετές δεκάδες τέλεια βιώσιμα συστήματα δικτύου ήδη εκεί για να σας βοηθήσουν να κάνετε τα πράγματα. Υπάρχουν πράγματα όπως 960.gs, Blueprint, Bootstrap, 320 and Up, Golden Grid, semantic.gs ... κλπ ... κ.λπ., διαφημιστική ναυτία. Ο καθένας φέρνει κάτι στο τραπέζι, το καθένα αφήνει κάποια πράγματα που είναι επιθυμητά.
Ο λόγος που τα πλέγματα είναι τόσο δημοφιλή είναι ότι λειτουργούν. Όταν δημιουργείτε μια διάταξη για τον ιστό, εννέα φορές στα 10 ένα εύκαμπτο σύστημα πλέγματος θα πάρει τη διάταξή σας 90 τοις εκατό του δρόμου εκεί και θα σας εξοικονομήσει ώρες προσαρμοσμένης κωδικοποίησης. Υπάρχουν θεμιτές ανησυχίες ότι τα συστήματα πλέγματος περιορίζουν τη σκέψη μας και μας περιορίζουν σε πράγματα που πρέπει να αποφεύγουμε, αλλά με λίγη πειθαρχία και μια σταθερή διαδικασία σχεδιασμού μπορούμε να το αποφύγουμε αυτό.
02. Τι χρειαζόμαστε από ένα πλέγμα
Τι ψάχνουμε σε ένα σύστημα πλέγματος; Αυτό που πρόκειται να εξετάσουμε εδώ δεν είναι λύση σε κάθε πρόβλημα, αλλά είναι ένας τρόπος σκέψης προς τα εμπρός (και αρκετά δροσερός) επίθεσης του προβλήματος.
Αυτό είναι που χρειαζόμαστε από το πλέγμα μας:
- Χρειαζόμαστε ευελιξία για διατάξεις πραγματικού κόσμου. Πρέπει να έχουμε αρκετές στήλες σε μια διαμόρφωση που μας επιτρέπει να καλύψουμε τις περισσότερες από τις πιθανές απαιτήσεις διάταξης. Αυτό σημαίνει κάτι που μπορεί να διαιρεθεί σε πολλές ομάδες χωρίς να γίνει πολύ κοκκώδες. Για τους σκοπούς μας σήμερα, θα χρησιμοποιήσουμε το 12. Αυτό μας επιτρέπει να διαιρούμε εύκολα τη σελίδα σε μισά, τρίτα και τέταρτα.
- Πρέπει να είμαστε σε θέση να φωλιάσουμε το πλέγμα. Ένα ενιαίο επίπεδο στηλών μας οδηγεί στο δρόμο εκεί, αλλά έχοντας κάτι που μπορείτε να φωλιάσετε μέχρι τα επίπεδα Ν σας προσφέρει απίστευτη ευελιξία.
- Χρειαζόμαστε το πλέγμα να ανταποκρίνεται. Αυτό μπορεί να φαίνεται σαν να βγαίνει από το αριστερό πεδίο, αλλά πιστέψτε με, είναι μια απαίτηση. Υπάρχουν, κυριολεκτικά, εκατοντάδες διαφορετικές συσκευές που πρέπει να υποστηρίζει ο ιστότοπός σας και ο αριθμός αυτός αυξάνεται μόνο. 960 πλέγματα είναι νεκρά, και καλό αδιέξοδο. Το πλέγμα μας πρέπει να είναι ρευστό (με βάση το ποσοστό) και να είναι διαμορφωμένο ώστε να περιορίζεται σε μικρότερες συσκευές.
- Χρειαζόμαστε το πλέγμα να είναι τροποποιήσιμο. Ένα από τα μεγαλύτερα παράπονα που θα δείτε από χρήστες ενός συστήματος απόκρισης πλέγματος είναι η δυσκολία τροποποίησης πραγμάτων όπως το μέγεθος του υδρορροή. Ο επαναληπτικός υπολογισμός των ποσοστών βάσει αλλαγής 4,4% σε 3,6% υδρορροών δεν είναι ένας διασκεδαστικός τρόπος για να περάσετε μια ώρα. Θα το επιτύχουμε αυτό χρησιμοποιώντας μια σχετικά μικρή χρησιμοποιημένη ιδιότητα CSS που θα συζητήσουμε λίγο. Είναι πολύ ωραίο.
- Χρειαζόμαστε το πλέγμα να είναι συμβατό προς τα πίσω. Σε ένα σημείο. Όλος ο κόσμος δεν χρησιμοποιεί Chrome ή iOS5 Mobile Safari. Τούτου λεχθέντος, ο στόχος μας σήμερα θα είναι η υποστήριξη για Android, iOS 4+, προγράμματα περιήγησης Webkit, Firefox και IE8 +.
03. Ξεκινώντας
Για να ξεκινήσουμε, χρειαζόμαστε ένα κενό αρχείο CSS που ονομάζεται grid.css. Θα χρησιμοποιήσουμε αυτό το αρχείο για το πλέγμα μας, ώστε να μπορεί να μεταφερθεί σε οποιοδήποτε έργο. Ως δευτερεύουσα σημείωση, το πλέγμα που χτίζουμε σήμερα θα είναι ακριβώς (ή πολύ κοντά) στο πλέγμα που χρησιμοποιείται στο Foundation 3 (επί του παρόντος στο 2.2.1).
Αρχικά, ας ρυθμίσουμε τη σύνταξη για το πλέγμα (είναι πολύ απλό). Βασικά, δημιουργούμε σειρές που διατηρούν στήλες. Θα χρησιμοποιήσουμε αυτές τις λέξεις, για να διατηρήσουμε αυτόν τον άνθρωπο αναγνώσιμο.
. σειρά {}
. στήλη,. στήλες {}
.row. ένα {}
.row .two {}
.row .three {}
.row. τέσσερα {}
.row .five {}
.row .six {}
.row .seven {}
.row .eight {}
.row .nine {}
.row .ten {}
.row .eleven {}
.row .twelve {}
Με αυτές τις κενές δηλώσεις, μπορείτε να δείτε πώς θα μοιάζει η σύνταξή μας σε HTML. Για να δημιουργήσουμε μια σειρά με τρεις στήλες εξίσου μεγέθους, θα το κάναμε:
div>
div>
...
/ div>
div>
...
/ div>
div>
...
/ div>
/ div>
Κάθε μία από αυτές τις στήλες μπορεί τώρα να περιέχει όποιο αυθαίρετο περιεχόμενο θέλουμε. Τώρα, πρέπει να λειτουργήσουμε αυτές οι στήλες και οι σειρές. Προσθέστε αυτές τις ιδιότητες στο .σειρά και .στήλη, .στήλες δηλώσεις:
.row {πλάτος: 1000 εικονοστοιχεία; μέγιστο πλάτος: 100%; ελάχιστο πλάτος: 768 εικονοστοιχεία; περιθώριο: 0 αυτόματη; }
. στήλη,. στήλες {float: left; ελάχιστο ύψος: 1px; επένδυση: 0 15px; θέση: σχετική }
Εντάξει, ας εξηγήσουμε τι συμβαίνει εδώ:
- Πλάτος σειράς: Στο στοιχείο γραμμής, ορίσαμε τη σειρά σε πλάτος 1.000 εικονοστοιχείων (το πλάτος της βασικής μας σελίδας). Ωστόσο, έχουμε επίσης πει ότι το μέγιστο πλάτος είναι 100%, πράγμα που σημαίνει ότι καθώς το πρόγραμμα περιήγησης μειώνεται (για παράδειγμα, σε iPad ή iPhone), η σειρά δεν μπορεί να υπερβαίνει το πλάτος του παραθύρου. Το ελάχιστο πλάτος μας θα διασφαλίσει ότι οι σειρές δεν θα είναι κωμικά μικρές στο IE8, το οποίο δεν υποστηρίζει ερωτήματα πολυμέσων.
- Περιθώριο σειράς: Με τον καθορισμό περιθωρίου: 0 αυτόματα έχουμε συγκεντρώσει τις σειρές μας στη σελίδα.
- Θέση στήλης: Όλες οι στήλες μας αιωρούνται προς τα αριστερά, τώρα, οπότε θα συσσωρεύονται μεταξύ τους.
- Ελάχιστο ύψος στήλης: Η ιδιότητα ελάχιστου ύψους διασφαλίζει ότι η κενή στήλη εξακολουθεί να επηρεάζει τη σειρά float.
- Επένδυση στηλών: Αυτή η ιδιότητα επένδυσης είναι στην πραγματικότητα η υδρορροή της στήλης μας Ρυθμίζοντας το σε 15 εικονοστοιχεία, βάζουμε 15 εικονοστοιχεία αριστερά και δεξιά κάθε στήλης, δημιουργώντας υδρορροές 30 εικονοστοιχείων μεταξύ στηλών.
Αυτό είναι προφανώς μόνο μέρος αυτού που χρειαζόμαστε για να λειτουργήσει το πλέγμα μας. Προφανώς, πρέπει να δηλώσουμε το πλάτος των στηλών μας. Δεδομένου ότι έχουμε πλέγμα 12 στηλών, αυτά τα πλάτη είναι ο αριθμός των στηλών πλάτος διαιρούμενος σε 12, ως ποσοστό 100. Για παράδειγμα: 6/12 = 0,5, 50%. Τα πλάτη μας μοιάζουν με αυτό:
.row .one {πλάτος: 8,33%}
.row .two {πλάτος: 16,66%}
.row .three {πλάτος: 25%}
.row .four {πλάτος: 33,33%}
.row .five {πλάτος: 41,66%}
.row .six {πλάτος: 50%}
.row .seven {πλάτος: 58,33%}
.row .eight {πλάτος: 66,66%}
.row .nine {πλάτος: 75%}
.row .ten {πλάτος: 83,33%}
.row .eleven {πλάτος: 91,66%}
.row .twelve {πλάτος: 100%}
Όλες οι στήλες μας έχουν πλάτη αντιπροσωπευτικά του μεγέθους που ορίζεται από τον αριθμό των στηλών τους. Αυτό που ίσως σκέφτεστε είναι, "αν κάνουμε στήλες με μέγεθος απλώς με βάση τη διαίρισή τους από 100, δεν θα τα κάνει η επένδυση που τις βάζουμε να είναι ευρύτερη και να βιδώσει το πλέγμα μας;" Κανονικά, ναι. Ας δούμε ένα κρίσιμο κομμάτι αυτού που δεν έχουμε ακόμη, και αυτή είναι μια απλή δήλωση που θα κάνετε για κάθε στοιχείο της σελίδας:
* {περίγραμμα-πλαίσιο; μέγεθος κουτιού: πλαίσιο-πλαίσιο; }
Αυτή η μικρή ιδιοκτησία κάνει κάτι φοβερό και ειρωνικό για εμάς. Αυτό που λέει είναι ότι τα στοιχεία της σελίδας δεν θα πρέπει να προσαρτούν την επένδυση και τα όρια στο πλάτος ενός αντικειμένου, αλλά πρέπει να τα θεωρούν μέρος του πλάτους.Έτσι, ένα αντικείμενο με πλάτος 50% και χωρίς επένδυση θα έχει το ίδιο πλάτος με ένα με πλάτος 50% και 15 εικονοστοιχεία εσωτερικής επένδυσης. Πολύ ωραίο, σωστά;
Ναί. Ειναι ΕΝΤΑΞΕΙ. Είναι επίσης το μοντέλο κουτιού IE6. Ειρωνικό, σωστά; Όλο αυτό το διάστημα, και όλο αυτό το σφάλμα στο IE6 (και σωστά έτσι) και στο τέλος ο IE6 χειρίστηκε πραγματικά το μοντέλο κουτιού με πολύ πιο λογικό τρόπο από οποιοδήποτε επόμενο πρόγραμμα περιήγησης. Ευχαριστώ το W3C για αυτό. Χωρίς αυτήν την ιδιότητα CSS ή χωρίς το μοντέλο πλαισίου IE6, είναι αδύνατο να δημιουργηθεί ένα αντικείμενο με πλάτος 50%, αλλά με 15px παραγεμισμάτων. (Σημείωση: δεν είναι απολύτως αλήθεια. Αλλά υποστήριξη για υπολ. () στο CSS είναι ουσιαστικά ανύπαρκτο αυτή τη στιγμή.)
Τώρα, για να λειτουργήσει αυτό πραγματικά, χρειαζόμαστε και ορισμένες προκαταρκτικές ιδιότητες προμηθευτή (το iOS 4 δεν το υποστηρίζει χωρίς -webkitκαι τις ανάγκες του Firefox -Μοζ). Η πλήρης δήλωση μοιάζει με αυτό:
* {-moz-box-sizing: border-box; -webkit-box-size: περίγραμμα-πλαίσιο? μέγεθος κουτιού: πλαίσιο-πλαίσιο; }
Αν θέλετε να βουτήξετε περισσότερο στο περίγραμμα, ο Ιρλανδός Paul έγραψε μια υπέροχη ανάρτηση σχετικά με τα οφέλη από τη χρήση οριοθέτησης σε όλα.
Ας ανακεφαλαιώσουμε πριν βυθίσουμε μερικά από τα πιο γλυκά κομμάτια. Το πλέγμα μας, αυτή τη στιγμή, θα πρέπει να μοιάζει με αυτό:
* {-moz-box-sizing: border-box; -webkit-box-size: περίγραμμα-πλαίσιο? μέγεθος κουτιού: πλαίσιο-πλαίσιο; }
.row {πλάτος: 1000 εικονοστοιχεία; μέγιστο πλάτος: 100%; ελάχιστο πλάτος: 768 εικονοστοιχεία; περιθώριο: 0 αυτόματη; }
. στήλη,. στήλες {float: left; ελάχιστο ύψος: 1px; επένδυση: 0 15px; θέση: σχετική }
.row .one {πλάτος: 8,33%}
.row .two {πλάτος: 16,66%}
.row .three {πλάτος: 25%}
.row .four {πλάτος: 33,33%}
.row .five {πλάτος: 41,66%}
.row .six {πλάτος: 50%}
.row .seven {πλάτος: 58,33%}
.row .eight {πλάτος: 66,66%}
.row .nine {πλάτος: 75%}
.row .ten {πλάτος: 83,33%}
.row .eleven {πλάτος: 91,66%}
.row .twelve {πλάτος: 100%}
Σημειώνεται πρόοδος, αλλά δεν πρόκειται να λειτουργήσει ακόμα. Πρώτα πράγματα πρώτα, ας διαμορφώσουμε το πλέγμα μας για υποστήριξη της ένθεσης. Δεδομένου ότι χρησιμοποιούμε ποσοστά, αυτό είναι απλό. Οποιαδήποτε ένθετη σειρά θα έχει συγκεκριμένες παρακάμψεις και διαφορετικά θα λειτουργήσει. Προσθέστε αυτήν τη γραμμή μετά το .σειρά δήλωση:
.row .row {width: auto; μέγιστο πλάτος: κανένα; ελάχιστο πλάτος: 0; περιθώριο: 0 -15 εικονοστοιχεία; }
Το μόνο δύσκολο πράγμα που συμβαίνει εδώ είναι ότι θέτουμε ένα αρνητικό αριστερό και δεξί περιθώριο στη σειρά. Το κάνουμε αυτό επειδή η σειρά κοντέινερ έχει επένδυση σε αυτό και το ίδιο ισχύει και για τις ένθετες στήλες - αλλά δεν θέλουμε να διπλασιάσουμε αυτήν την επένδυση ή οι ένθετες σειρές μας θα έχουν όλες τις εσοχές. Το αρνητικό περιθώριο και το πλάτος: αυτόματα σημαίνει ότι η σειρά θα επεκταθεί στα άκρα της σειράς κοντέινερ, έξω από την επένδυση της στήλης που περιέχει.
Εκπληκτικά, αυτό είναι το μόνο που χρειαζόμαστε για να υποστηρίξουμε τη φωλιά. Μπορούμε τώρα να έχουμε σύνταξη στο HTML που μοιάζει με αυτό:
div>
div>
div>
div>
...
/ div>
div>
...
/ div>
/ div>
/ div>
div>
...
/ div>
div>
...
/ div>
/ div>
Αυτή η απλή αλλαγή ανοίγει ένα τεράστιο φάσμα επιλογών διάταξης για εμάς. Δυστυχώς, το πλέγμα μας είναι ακόμα σπασμένο ως κόλαση χωρίς μερικές ακόμη αλλαγές. Στη συνέχεια, ας βεβαιωθούμε ότι οι σειρές μας στοιβάζονται πραγματικά σωστά, παρά το ότι περιέχουν μόνο αιωρούμενα στοιχεία (πράγμα που σημαίνει ότι η σειρά δεν έχει ύψος). Δεν θέλουμε να χρησιμοποιήσουμε υπερχείλιση: κρυμμένο στο .σειρά, σε περίπτωση που χρειαζόμαστε πράγματα όπως box-shadows για να βγουν. Αντ 'αυτού, χρησιμοποιήστε αυτό:
/ * Η μικροκαθάριση του Nicolas Gallagher * /
.row: before, .row: after, .clearfix: before, .clearfix: after {content: ""; οθόνη: τραπέζι; }
.row: after, .clearfix: after {clear: Και τα δύο; }
.row, .clearfix {zoom: 1; }
Όπως μπορείτε να δείτε, στηρίξτε στον Nicolas Gallagher για αυτό το απόσπασμα κώδικα. Αυτό διασφαλίζει ότι οι σειρές μας έχουν πραγματικό ύψος και ότι οι σειρές που στοιβάζονται η μία στην άλλη δεν θα επικαλύπτουν τις στήλες τους ούτε θα κάνουν τίποτα άλλο ατυχές. Βασίζεται στη συμπεριφορά των επιτραπέζιων οθονών, καθώς και στο περιεχόμενο: αφού παρέχει κάτι που ξεκαθαρίζει το float μας με κάθε σειρά.
Με αυτό στη θέση του, το πλέγμα μας λειτουργεί. Μπορούμε να δημιουργήσουμε σειρές και στήλες και να τις γεμίσουμε με αυθαίρετο περιεχόμενο - ακόμη και άλλες σειρές. Ένα τελευταίο πράγμα, μια ωραία που βοηθά το πλέγμα μας να φαίνεται πολύ γλυκό. Τοποθετήστε αυτές τις γραμμές αμέσως μετά το .στήλη, .στήλες δήλωση:
[class * = "στήλη"] + [class * = "στήλη"]: τελευταίο παιδί {float: right; }
[class * = "στήλη"] + [class * = "στήλη"]. τέλος {float: αριστερά; }
Εάν δεν έχετε χρησιμοποιήσει τους επιλογείς όπως αυτό πριν, αυτό μπορεί να φαίνεται παράλογο. Ας το αναλύσουμε:
- [class * = "στήλη"] - Αυτός είναι ένας μικρός επιλογέας που στοχεύει την τιμή ενός χαρακτηριστικού HTML. Σε αυτήν την περίπτωση, το χαρακτηριστικό "class". Βασικά οποιοδήποτε στοιχείο HTML με κλάση που περιέχει "Στήλη" θα ταιριάζει εδώ. Πρέπει να είστε πολύ προσεκτικοί με αυτούς τους τύπους επιλογών, επειδή θα ταιριάζουν επίσης με μια κατηγορία "sidebar-στήλη" ή "sidebarcolumn".
- [class * = "στήλη"] + [class * = "στήλη"] - Αυτός ο επιλογέας αδελφών σημαίνει ότι θέλουμε μόνο να στοχεύσουμε στήλες που έρχονται μετά μια άλλη στήλη. Αυτό μας βοηθά βασικά να παραλείψουμε μεμονωμένες στήλες, για παράδειγμα μια κεντρική στήλη ή ένα μπλοκ δώδεκα στηλών.
- [class * = "στήλη"] + [class * = "στήλη"]: τελευταίο παιδί - Τέλος, αυτό σημαίνει ότι θέλουμε μόνο το τελευταίος στήλη που έρχεται μετά από άλλη στήλη. Διαφορετικά, θα έχουμε κάθε στήλη εκτός από την πρώτη στη σειρά.
- float: σωστά - Αυτό μας βοηθά να επιλύσουμε ένα πρόβλημα με πλέγματα ποσοστού πλάτους: τα προγράμματα περιήγησης δεν τα στρογγυλοποιούν με τον ίδιο τρόπο. Χωρίς αυτό, θα παρατηρήσετε ότι οι σειρές δεν τελειώνουν πάντα στο ίδιο μέρος. Εάν ένα πλάτος 66,66% σημαίνει 666,6 pixel, ορισμένα προγράμματα περιήγησης θα αντιστοιχούν σε αυτήν την τιμή κάθε φορά (μόνο 666 εικονοστοιχεία, Chrome), μερικά θα ανταλλάσσουν δάπεδο και οροφή έτσι ώστε το ένα να είναι στρογγυλεμένο, το επόμενο κάτω κ.λπ. (Firefox) και μερικά θα ακόμη και το πρώτο ποσοστό. Κινούμενη δεξιά δεξιά στήλη σημαίνει ότι, ενώ η υδρορροή μπορεί να είναι ένα pixel ή δύο μεγαλύτερα, το δεξί άκρο θα είναι πάντα το ίδιο.
- [class * = "στήλη"] + [class * = "στήλη"]. τέλος - Ίσως να μην θέλετε η τελευταία στήλη να πηγαίνει σωστά κάθε φορά. Εάν δημιουργήσετε μια σειρά με μόνο δύο . τέσσερα. στήλη μπλοκ με σκόπιμο κενό χώρο προς τα δεξιά, μπορείτε να προσθέσετε μια κατηγορία .end για να βεβαιωθείτε ότι δεν κυμαίνεται. Αυτό είναι συνήθως λιγότερο πιθανό, επομένως είναι αυτό που πρέπει να επιλέξετε.
Μπά! Αυτή είναι μια βαρύτατη εξήγηση για μερικές γραμμές, αλλά είναι καλοί επιλογείς CSS και αξίζουν λίγη ανάλυση. Και τώρα τελειώσαμε (προς το παρόν). Ας ανακεφαλαιώσουμε ξανά. Δείτε πώς πρέπει να φαίνεται το πλέγμα μας:
* {-moz-box-sizing: border-box; -webkit-box-size: περίγραμμα-πλαίσιο? μέγεθος κουτιού: πλαίσιο-πλαίσιο; }
.row {πλάτος: 1000 εικονοστοιχεία; μέγιστο πλάτος: 100%; ελάχιστο πλάτος: 768 εικονοστοιχεία; περιθώριο: 0 αυτόματη; }
.row .row {width: auto; μέγιστο πλάτος: κανένα; ελάχιστο πλάτος: 0; περιθώριο: 0 -15 εικονοστοιχεία; }
. στήλη,. στήλες {float: left; ελάχιστο ύψος: 1px; επένδυση: 0 15px; θέση: σχετική }
[class * = "στήλη"] + [class * = "στήλη"]: τελευταίο παιδί {float: right; }
[class * = "στήλη"] + [class * = "στήλη"]. τέλος {float: αριστερά; }
.row .one {πλάτος: 8,33%}
.row .two {πλάτος: 16,66%}
.row .three {πλάτος: 25%}
.row .four {πλάτος: 33,33%}
.row .five {πλάτος: 41,66%}
.row .six {πλάτος: 50%}
.row .seven {πλάτος: 58,33%}
.row .eight {πλάτος: 66,66%}
.row .nine {πλάτος: 75%}
.row .ten {πλάτος: 83,33%}
.row .eleven {πλάτος: 91,66%}
.row .twelve {πλάτος: 100%}
/ * Micro clearfix του Nicolas Gallagher * /
.row: before, .row: after, .clearfix: before, .clearfix: after {content: ""; οθόνη: τραπέζι; }
.row: after, .clearfix: after {clear: Και τα δύο; }
.row, .clearfix {zoom: 1; }
Αυτό πληροί τα κριτήρια μας για ένα σύγχρονο πλέγμα; Ας ελέγξουμε:
- Ευκαμψία: Ναι, έχουμε αρκετές στήλες και ένθεση για να ολοκληρώσουμε τη δουλειά.
- Φωλιά: Ελέγξτε, δείτε παραπάνω.
- Ευαίσθητος: Οχι ακόμα. Χμμμ. Ας το κάνουμε.
04. Καθιστώντας το ανταποκρινόμενο
Για αυτό το σεμινάριο, θα εξετάσουμε το ελάχιστο δυνατό να το κάνουμε ανταποκρινόμενο: γραμμικοποίηση του πλέγματος σε μικρές συσκευές και δημιουργία κάθε στήλης στοίβα πάνω από την προηγούμενη. Θα χρησιμοποιήσουμε ένα ερώτημα μέσων CSS3 για αυτό, το οποίο υποστηρίζεται σε όλους τους στόχους μας εκτός από το IE8:
Οθόνη μόνο για μέσα ενημέρωσης και (μέγιστο πλάτος: 767 εικονοστοιχεία) {
...
}
Θα αντιστοιχίσουμε το ερώτημα μέσων μικρής συσκευής σε μικρότερο από ένα iPad (το οποίο αναφέρει το πλάτος του ως 768 εικονοστοιχεία, σε οποιοδήποτε προσανατολισμό, σε κανονικές ή αμφιβληστροειδείς οθόνες). Μέσα σε αυτό το ερώτημα πολυμέσων πρέπει να κάνουμε κάποια παράκαμψη:
.row {width: auto; ελάχιστο πλάτος: 0; περιθώριο αριστερά: 0; margin-right: 0; }
.column, .columns {width: auto! important; float: κανένα; }
. στήλη: τελευταίο παιδί,. στήλες: τελευταίο παιδί {float: none; }
[class * = "στήλη"] + [class * = "στήλη"]: τελευταίο παιδί {float: none; }
. στήλη: πριν,. στήλες: πριν,. στήλη: μετά,. στήλες: μετά {content: ""; οθόνη: τραπέζι; }
. στήλη: μετά,. στήλες: μετά {διαγραφή: και τα δύο; }
Δεν υπάρχουν πολλά εδώ που πρέπει να εξηγήσουμε με πάρα πολλές λεπτομέρειες: βασικά λέμε στο πρόγραμμα περιήγησης ότι, σε μια μικρή οθόνη, μην επιπλέουν τις στήλες, μην τους δίνετε ελάχιστο πλάτος, μην τους δίνετε περιθώρια . Βασιζόμαστε στην ίδια επένδυση όπως παραπάνω για να δημιουργήσουμε ένα κενό μεταξύ του περιεχομένου και της άκρης της οθόνης και ξεκαθαρίζουμε το float σε κάθε στήλη καθώς πηγαίνουμε για καλό μέτρο. Στοιβάζει το πλέγμα μας και ο σχεδιασμός μας με βάση το% φροντίζει τα υπόλοιπα για εμάς.
Εντάξει, τώρα πώς κάνουμε στη λίστα ελέγχου:
- Ευκαμψία: Ακόμα καλά.
- Φωλιά: Ροκ'ν'ρολ.
- Ευαίσθητος: Ναι. Υπάρχουν περισσότερα που μπορούμε να κάνουμε (και στο πλέγμα Foundation 3, στο Github, το κάνουμε), αλλά αυτό κάνει τη δουλειά για τώρα.
- Τροποποιητικός: Ναι, εύκολα. Αλλάζοντας την επένδυση στις στήλες και τα αρνητικά περιθώρια στις σειρές, μπορούμε να τροποποιήσουμε το μέγεθος της υδρορροής μας με δύο τιμές. Αν θέλουμε ένα πλέγμα 24 στηλών, είναι απλό μαθηματικό να διαιρέσουμε τα 1, 2, 3 σε 24 αντί των δώδεκα. Γλυκός.
- Συμβατό προς τα πίσω: Ναί. Το box-sizing λειτουργεί στην πραγματικότητα από το IE8 (go σχήμα). Υπάρχει ένα αρχείο συμπεριφοράς που μπορείτε να χρησιμοποιήσετε για να ενεργοποιήσετε την ιδιότητα μεγέθους κουτιού στο IE7, αλλά έχει ορισμένα σοβαρά προβλήματα με τα αυτόματα πλάτη. Ας ελπίσουμε ότι αυτό θα επιλυθεί σύντομα - εάν είναι, το πλέγμα μας είναι έτοιμο να ξεκινήσει στον IE7.
Και αυτή είναι η τζένγκα. Προχωρήστε και δημιουργήστε γλυκές διατάξεις.
05. Περίμενε. Αυτό δεν είναι σημασιολογικό
Ναι, δεν είναι. Μας έχετε. Αυτό είναι το εξής: μπορείτε να δημιουργήσετε ένα σημασιολογικό (καθαρό διαχωρισμό δεδομένων και οθόνης), όπως το semantic.gs, αλλά απαιτεί έναν προεπεξεργαστή όπως το Sass. Πέρα από την ανάγκη για ένα άλλο εργαλείο (και πραγματικά, το Sass και τα εργαλεία σαν αυτό είναι πολύ δροσερό) το CSS εξόδου ενός σημασιολογικού πλέγματος είναι, ειλικρινά, τρελό. Καταλήγετε είτε με επιλογείς οριοθετημένους με κόμματα που υπερβαίνουν τη δυνατότητα ανάγνωσης και τροποποίησής τους ή με ιδιότητες που επαναλαμβάνονται ξανά και ξανά και ξανά. Το Σημασιολογικό είναι πραγματικά φοβερό και στο μέλλον αυτό θα αρχίσει να γίνεται σημαντικό, αλλά δεν είμαστε εκεί τώρα. Η οικοδόμηση ενός καλύτερου ιστότοπου για πελάτες σημαίνει γρήγορη δημιουργία και επανάληψη και μπορείτε να δημιουργήσετε ταχύτερα, χωρίς να ανησυχείτε για αυτό (πάρα πολύ).
06. Επόμενα βήματα
Ένα στιβαρό, πλήρες σύστημα πλέγματος χρειάζεται πράγματα όπως όφσετ, παραγγελία πηγής, πλέγματα αντικειμένων Ν, όπως πλέγμα τριών-επάνω μπλοκ και πολλά άλλα. Μπορείτε να δείτε την πλήρη έκδοση αυτού του πλέγματος (και να το δείτε να εξελίσσεται ανάλογα με τις ανάγκες) στο Github. Εφόσον το Ίδρυμα είναι ανοιχτού κώδικα, παίξτε με αυτό το πλέγμα, ελέγξτε το πλήρες και, στη συνέχεια, βοηθήστε μας να το κάνουμε ακόμη καλύτερο. Η βιομηχανία μας εξελίσσεται κάθε μέρα, και τα εργαλεία πρέπει επίσης.
Ο Jonathan υπήρξε ένας τεράστιος geek για όσο μπορεί να θυμάται, που χρονολογείται από το παιχνίδι του παλιού παιχνιδιού λαβυρίνθου στο Prodigy έως μια καριέρα στον σχεδιασμό ψηφιακών μέσων. Εργάστηκε σε λογισμικό χρηματοοικονομικών υπηρεσιών στην Αλαμπάμα για λίγο πριν προχωρήσει στη δυτική ακτή για το ZURB: www.zurb.com
Σας άρεσε αυτό; Διαβάστε αυτά!
- Πώς να δημιουργήσετε μια εφαρμογή
- Διατίθεται δωρεάν λογισμικό γραφιστικής τώρα!
- Brilliant Wordpress επιλογή εκμάθησης
- Οι αγαπημένες μας γραμματοσειρές ιστού - και δεν κοστίζουν ούτε δεκάρα
