Όλοι αρχίζουμε κάπου. Ως νέος σχεδιαστής, δεν θα μπορούσα να φροντίσω λιγότερο για τη δομή στα σχέδιά μου. Θα ανοίξω το Photoshop και θα σπρώξω pixels μέχρι να φτιάξω κάτι που νόμιζα ότι φαινόταν δροσερό. Όπως έμαθα να κωδικοποιήσω, η διαδικασία μου ήταν εξίσου τυχαία.
Δεν κοιτάω πίσω στις παλιές μέρες με πάρα πολλή αγάπη. Το έργο μου ήταν παραπλανητικό και αδιάφορο. Δεν είχα σαφείς στόχους. Ως αρχή, υποθέτω ότι δεν είναι τόσο κακό, δεδομένου ότι το μεγαλύτερο μέρος της σχεδιαστικής μου εκπαίδευσης προήλθε από ιστοσελίδες του Photoshop tutorial, το έργο μου δεν ήταν τρομερό.
Τότε έμαθα για τα συστήματα πλέγματος. Ξεχάσω ακριβώς πότε και πώς έγινε ευρέως χρησιμοποιημένος στο σχεδιασμό ιστοσελίδων, αλλά ξαφνικά, κάθε ιστοσελίδα που σχετίζεται με το σχεδιασμό ιστού, στην οποία πήγα, έσπαζε με άρθρα σχετικά με το 960.gs ή με κάποιο άλλο σύστημα πλέγματος. Η σημασία της παροχής συνεπούς οπτικής δομής στις διατάξεις μας τονίστηκε από όλα τα μεγάλα ονόματα και μετατράπηκε σε τάση.
Ακριβώς όπως γρήγορα η τάση έγινε βιομηχανικό πρότυπο και τώρα οι περισσότεροι από εμάς δεν σκέφτονται δύο φορές για το αν πρόκειται να εφαρμόσουμε ένα σύστημα δικτύου. Το μόνο ερώτημα είναι ποιο; Θα πάμε με ένα από τα μεγάλα ονόματα ή μια λιγότερο γνωστή παραλλαγή, ή ακόμα και να φτιάξουμε το δικό μας;
Σε αυτό το άρθρο θα ήθελα να ρίξω μια ματιά στη δεύτερη επιλογή: νέα και λιγότερο γνωστά συστήματα πλέγματος. Υπάρχει πάντα κάποιος που έρχεται με νέους τρόπους για να λύσει τα διάφορα προβλήματα της διάταξης και νομίζω ότι είναι σημαντικό να γνωρίζουμε όσο το δυνατόν περισσότερες προσεγγίσεις, οπότε ας δούμε μερικά βασικά πλαίσια δικτύων.
34Grid είναι η ισότιμη κατανομή της στήλης. Μπορεί να φιλοξενήσει και άνισες διανομές, αλλά αυτό δεν είναι ο πρωταρχικός σκοπός αυτού του δικτύου. Για όσους από εσάς επιθυμείτε να διαιρέσετε τις περισσότερες ή όλες τις σελίδες σας σε οριζόντια ίσες μερίδες, αυτό είναι το πλαίσιο σας.
Πως δουλεύει
Το πλαίσιο έχει σχεδιαστεί ώστε να προσαρμόζεται στις ανάγκες σας, έτσι ώστε να μην κάνετε λήψη και μετάβαση. Πρέπει πρώτα να ρυθμίσετε το πλέγμα στην αρχική σελίδα του έργου. Μια γρήγορη φόρμα σάς επιτρέπει να καθορίσετε πόσες στήλες θα χωρέσει σε μια σειρά, πόσο μεγάλα θα είναι τα περιθώρια σας και εάν θα εφαρμόσετε ή όχι CSS3 μεταβάσεις στις στήλες σας όταν αλλάζει το μέγεθος του παραθύρου προβολής.
Ο ίδιος ο κώδικας χωρίζεται σε δύο αρχεία CSS: έναν με τον βασικό κώδικα και έναν με όλα τα ερωτήματα μέσων. Οι κλάσεις CSS είναι απλές. Η εφαρμογή του ".col_1" σε μια στήλη θα γεμίσει τη γραμμή στο 100%. '.col_2' θα δημιουργήσει μια στήλη με πλάτος 50% και ούτω καθεξής.
Επιπλέον, τα στοιχεία img, τα αντικείμενα και κάποια άλλα μετατρέπονται αυτόματα σε μεγέθυνση. Υπάρχει μια επιπλέον κλάση για να βοηθήσει τα αντικείμενα βίντεο να συμπεριφέρονται. Ο δικτυακός τόπος του έργου παρέχει συμβουλές σχετικά με τον τρόπο με τον οποίο μπορείτε να αποκτήσετε χρήματα στο Facebook και στο Twitter.
Μειονεκτήματα
Δεν φαίνεται να υπάρχει τρόπος να φωλιάζουμε στήλες ή να δημιουργούμε πιο πολύπλοκες ρυθμίσεις στήλης μέσα σε μία μόνο σειρά. Από την άλλη πλευρά, εάν δεν χρειάζεστε πολυπλοκότητα και απλά θέλετε ένα απλό πλαίσιο που μπορείτε να προσαρμόσετε όποτε χρειάζεται, το 34Grid θα κάνει τη δουλειά.
Απλό πλέγμα είναι μια απόκριση επιλογή που maxes έξω σε πλάτος 1140 pixels. Με άλλα λόγια, ενώ έχει σχεδιαστεί για να παίζει ωραία με ταμπλέτες και τηλέφωνα, το Simple Grid εξασφαλίζει ότι δεν θα παραμείνουν μεγαλύτερες οθόνες.
Πως δουλεύει
Όπως το όνομα θα σήμαινε, αυτό το σύστημα πλέγματος είναι αρκετά ελαφρύ. Το όλο θέμα έρχεται σε ένα μη-συμπιεσμένο αρχείο CSS τεσσάρων κιλών.
Τα ονόματα κλάσεων σχεδιάζονται για να είναι εύκολα κατανοητά: '.col-2-6' θα διαιρέσει τη σειρά σε έξι στήλες και θα καθορίσει το πλάτος της στήλης σε πλάτος δύο στηλών. Κάθε σειρά μπορεί να χωριστεί σε μία στήλη, '.col-1-1' ή δύο, τρία, τέσσερα, κλπ. Σε όλη τη διαδρομή μέχρι δώδεκα.
Μειονεκτήματα
Όπως και στο 34Grid, δεν φαίνεται να υπάρχει πρόβλεψη για στήλες στήλης. Επίσης, το χειρισμό των περιθωρίων για την πρώτη και την τελευταία στήλη ενδέχεται να δημιουργήσει δυσκολίες κατά τη δημιουργία, για παράδειγμα, μιας συλλογής φωτογραφιών.
Αυτό είναι για οποιονδήποτε προτιμά ένα απλό πλέγμα με απλά αγγλικά ονόματα τάξεων. Είναι ευαίσθητη, κατανοητή και γρήγορα εφαρμοσμένη.
Πως δουλεύει
Αφού τοποθετηθούν τα συνήθη στοιχεία ".container" και ".grid", οι στήλες υλοποιούνται με τον παλιό τρόπο. Μια κλάση ('.unit') χρησιμοποιείται για τον ορισμό των γενικών χαρακτηριστικών μιας στήλης και μια άλλη κλάση χρησιμοποιείται για τον καθορισμό του πλάτους. Οι σειρές μπορούν να χωριστούν σε 2-5 στήλες και όλα τα ονόματα κλάσεων μοιάζουν με αυτά: '.one-of-three, .two-of-three'.
Περιλαμβάνονται επίσης ορισμένα βασικά τυπογραφικά στυλ.
Μειονεκτήματα
Για άλλη μια φορά, αυτό είναι ένα πλαίσιο δικτύου που προορίζεται για απλές διατάξεις, οπότε δεν υπάρχει πρόβλεψη για ένθετες στήλες. Επίσης, υπάρχει μόνο ένα σημείο θραύσης, το οποίο έχει οριστεί σε πλάτος προβολής 650 pixel, έτσι ώστε μερικές από τις στήλες σας μπορεί να καταλήξουν πρόωρα μάλλον ευρείες.
Matt (AKA Δώρο ) είναι λίγο σαν εμένα. Αγαπά το σχεδιασμό, αλλά δεν αγαπά τα μαθηματικά αρκετά. Ως αποτέλεσμα, του Αναλογικά δίκτυα φαίνεται να καταργεί όσο το δυνατόν περισσότερο ατελείωτους υπολογισμούς ανάλογα με το box-sizing ιδιοκτησία. Το αποτέλεσμα είναι ένα πλήρες, αλλά ακόμα αρκετά ελαφρύ, σύστημα πλέγματος που καλύπτει τις βάσεις σας για ευέλικτη διάταξη.
Πως δουλεύει
Όταν λέω ότι εξαρτάται αυτό το σύστημα box-sizing , Εννοώ ότι στις στήλες δίνονται ποσοστιαία πλάτη χωρίς να υπολογίζονται τα υδρορροές. Οι υδρορροές σταθερού πλάτους ορίζονται από το padding . και box-sizing σιγουρεύεται ότι οι στήλες παίζουν ωραία μαζί.
Τα πλάτη των υδρορροών και οι περισσότερες άλλες μετρήσεις ορίζονται με το "ems". Αληθινή στο όνομα αυτού του πλέγματος, οι κλάσεις των στηλών είναι ανάλογες (δηλ. .col-one-third , .col-two-thirds ) και οι στήλες είναι περισσότερο ή λιγότερο άπειρες, κάτι που μου αρέσει πάρα πολύ.
Περιλαμβάνονται κατηγορίες για την αλλαγή των διαστάσεων της στήλης σε τρία διαφορετικά σημεία διακοπής. Τα ερωτήματα των μέσων μαζικής ενημέρωσης είναι διαρθρωμένα με τρόπο «κινητό-πρώτο», σύμφωνα με τις συνήθεις πρακτικές.
Υπάρχει ξεχωριστό φύλλο στυλ για τον Internet Explorer 8 και παλαιότερους. Βλέποντας ότι το IE8 δεν υποστηρίζει ερωτήματα μέσων και οι εκδόσεις που είναι παλαιότερες από αυτές δεν υποστηρίζουν box-sizing , είναι εφοδιασμένα με διάταξη σταθερού πλάτους.
Περιλαμβάνονται επίσης τα αρχεία SASS (τόσο .sass όσο και .scss) για γρήγορη και εύκολη προσαρμογή του συστήματος πλέγματος.
Μειονεκτήματα
Δεν θα ήθελα να δουλέψω με άλλα πλάτη στηλών (πέμπτα, έκτα, όγδοα). Διαφορετικά, πρόκειται για ένα μεγάλο δίκτυο χωρίς σφάλματα και καλά στρογγυλεμένο δίκτυο.
Από τα προηγμένα συστήματα πλέγματος σε αυτή τη λίστα, Ενας% είναι η απλούστερη, αλλά σε καμία περίπτωση δεν είναι πλήρης. Έχει σχεδιαστεί για να φιλοξενήσει κάποιες μεγαλύτερες οθόνες και μεγάλα στοιχεία UI, αν η αρχική του σελίδα είναι οποιαδήποτε ένδειξη.
Το όνομα προέρχεται από το γεγονός ότι το πλάτος του πλέγματος και της στήλης υπολογίζεται έτσι ώστε να ισούται πάντα με το 99%, αντί για το 100%. Αυτό εξαλείφει την ανάγκη για μερικά από τα πιο περίπλοκα επαναλαμβανόμενα δεκαδικά ψηφία και τη στρογγυλοποίηση των αριθμών που συχνά αναγκάζονται να κάνουν τα προγράμματα περιήγησης.
Πως δουλεύει
Το ίδιο το δίκτυο χωρίζεται σε κλασικές δώδεκα στήλες. Οι κλάσεις είναι απλές ( .onerow , .col1 , .col6 ), και μου αρέσει ότι εσείς, ως επί το πλείστον, χρησιμοποιείτε μόνο μία τάξη ανά στήλη.
Δύο σημεία διακοπής περιλαμβάνονται από προεπιλογή: 768 pixels και 1024 pixels. Αν είμαι ειλικρινής, αυτό το πρώτο φαίνεται λίγο ... μεγάλο ... αλλά μπορείτε πάντα να προσθέσετε ένα άλλο σημείο διάλειμμα εάν χρειαστείτε ένα. Παρέχονται επίσης δύο παραδείγματα πλάτους διάταξης επιφάνειας εργασίας: 1000 pixels και 1200 pixels.
Στην αρχική σελίδα των έργων, μπορείτε να κάνετε λήψη των αρχείων δράσης του Photoshop και των PSD κατάλληλων για την αποτυχία των σχεδιαγραμμάτων σας με αυτό το σύστημα πλέγματος.
Μειονεκτήματα
Τα δύο μεγάλα μου προβλήματα είναι τα συνηθισμένα. Πρώτον: δεν υπάρχουν στήλες φωλιάζουν. Οι στήλες των φεγγαριών είναι καλές, οι άνθρωποι! Δεύτερον: Η τελευταία στήλη σε κάθε σειρά χρειάζεται να έχει το .last τάξη που εφαρμόζεται σ 'αυτήν.
Ένα πλέγμα πλαισίου cross-browser CSS που δεν κρύβει pixels στα περιθώρια! Αυτό είναι το tagline για Flurid, και μια γρήγορη ματιά στην τεκμηρίωση θα σας πει γιατί: ο δημιουργός του Flurid πραγματικά δεν θέλει τη διάταξή σας να σπάσει. Πάντα.
Εδώ είναι το πράγμα, επειδή ο τρόπος στρογγυλοποίησης υπο-pixel λειτουργεί, ένα πρόγραμμα περιήγησης θα λέει περιστασιακά "βιδώστε" και βάλτε την τελευταία στήλη στη σειρά κάπου δεν πρέπει να πάει. Το Flurid είναι κατασκευασμένο για σταθερότητα, έτσι ώστε η διάταξή σας να λειτουργεί πάντα, ακόμα και σε παλαιότερες εκδόσεις του IE. (Η συμβατότητα παρατίθεται ως IE5 +.)
Πως δουλεύει
Το Flurid διαθέτει όλα τα χαρακτηριστικά που θα χρειαστείτε: τακτικές στήλες, μικτές στήλες, ένθετες στήλες και μετατοπισμένες στήλες. Ο κατάλογος πιθανών πλάτους και κλάσεων στηλών είναι εκτεταμένος και βασίζεται σε αναλογία, επομένως θα θέλετε να δώσετε στον εαυτό σας χρόνο να εξοικειωθείτε με αυτά.
Ορισμένες εύλογα ολοκληρωμένες τεκμηρίωση παρέχονται μέσω του GitHub, καθώς και ένα πρόσθετο jQuery που προσθέτει πρόσθετα χαρακτηριστικά - ναι, έρχεται με το δικό του plugin jQuery, το οποίο παρέχει στήλες ίσου ύψους και μπορεί να τοποθετήσει εναλλασσόμενες κατηγορίες στις στήλες σας, για την ευχαρίστηση του styling σας.
Μειονεκτήματα
Είναι τόσο ενοχλητικό .last τάξη ξανά. Ακόμα, σύμφωνα με την τεκμηρίωση, υπάρχει ένας καλός λόγος για αυτή τη φορά.