Δημιουργήστε εύκολα σύγχρονες διατάξεις με το Gridlex CSS Grid System
Η ανάπτυξη του Frontend έχει βελτιωθεί ριζικά με την εισαγωγή του CSS flexbox. Αυτό το κάνει πολύ πιο εύκολο δημιουργήστε πλέγματα & στήλες που φυσικά μετατοπίζεται για ανταποκρινόμενες διατάξεις.
Αντί να κωδικοποιήσετε το δικό σας δίκτυο flexbox από το μηδέν, είναι πολύ πιο εύκολο να χρησιμοποιήσετε ένα εργαλείο όπως το Gridlex. Αυτή η ελεύθερη βιβλιοθήκη flexbox ανοιχτού κώδικα είναι εξαιρετικά ελαφρύ και πολύ εύκολο να προσαρμόσετε.
Το μόνο που κάνετε είναι προσθέστε το φύλλο στυλ Gridlex στην ιστοσελίδα σας και εργασία με τις τάξεις δικτύου. Οι εσωτερικές στήλες παίρνουν μια τάξη .διάσελο και τυλίγετε όλα αυτά μέσα σε ένα .πλέγμα δοχείο. Αυτό ορίζει κάθε στήλη στο ίδιο πλάτος και δημιουργεί μια ομοιόμορφη διεπαφή.
Αυτή η προεπιλογή μπορεί να αντικατασταθεί προσθέτοντας ταξινόμησης μεγέθους σε κάθε στήλη. Με αυτόν τον τρόπο μπορείτε να έχετε μια στήλη πλάτους 70% και μια άλλη στήλη με πλάτος 30% (π.χ. περιεχόμενο / πλαϊνή μπάρα).
Θα βρείτε τόνοι δείγματα πλέγματος στην αρχική σελίδα του Gridlex με live demos και αποσπάσματα κώδικα για αντιγραφή / επικόλληση στον ιστότοπό σας. Είναι μια τεράστια βιβλιοθήκη με τόσα πολλά προαιρετικές τάξεις για να σας βοηθήσει να δημιουργήσετε τα πιο απλά δίκτυα για κάθε ιστότοπο.
Όλα τα δίκτυα ανέρχονται σε ένα συνολικά 12 μίνι-στήλες, ώστε να μπορείτε να καθορίσετε πόσο διάστημα θα έπρεπε να καταλαμβάνει κάθε στήλη. Αυτό μπορεί να φαίνεται συγκεχυμένο αλλά έχει νόημα όταν βλέπετε τα οπτικά demos.
Εδώ είναι α παράδειγμα κώδικα χρησιμοποιείται για μεγαλύτερο πλέγμα με διαφορετικά πλάτη:
.........
Σημειώστε ότι το .πλέγμα η τάξη περιέχει τα πάντα και οι στήλες προσπαθούν να χωρίζονται σε 12 μέρη (στο παράδειγμα αυτό θα ήταν ⅓ πλάτος για κάθε ένα). Ωστόσο, οι σταθερές στήλες έκταση 2 και 6 στήλες αντίστοιχα, έτσι ώστε η πρώτη στήλη χρησιμοποιεί ένα αυτόματο πλάτος με βάση ό, τι έχει απομείνει.
Χρησιμοποιώντας τις άλλες δύο στήλες, μπορούμε να συμπεράνουμε ότι θα υπήρχαν 4 στήλες (12-6-2) έπληξε συνολικά 12. Είναι όλα πολύ απλά μαθηματικά αλλά τα ονόματα των τάξεων μπορεί να είναι συγκεχυμένα. Μόλις αρχίσετε να παίζετε με το Gridlex σε ένα έργο, θα πάρετε γρήγορα το σύστημα ονομασίας.
Το Gridlex είναι επί του παρόντος στην έκδοση 2.x και είναι ενημερώνεται συνεχώς στο GitHub. Καθώς η υποστήριξη του προγράμματος περιήγησης αυξάνεται, θα εγγυούσα μεγαλύτερη προσοχή στο flexbox, με περισσότερους ιστότοπους που υιοθετούν αυτό το μοντέλο για δικτυακούς τόπους.
Μπορείτε να βρείτε ακόμη και ένα πλήρη γκαλερί των ιστοτόπων που χρησιμοποιούν το Gridlex για να δούμε πώς φαίνεται αυτό όταν εφαρμόζεται σε ζωντανές ιστοσελίδες.
Εάν δεν έχετε χρησιμοποιήσει ποτέ flexbox πριν από τότε Gridlex μπορεί να είναι μια διασκεδαστική βιβλιοθήκη για να παίξει με. Αλλά συνιστώ επίσης να χρησιμοποιήσετε πρώτα παιχνίδια funbox flex για να ελέγξετε τις γνώσεις σας και να βοηθήσετε να κατανοήσετε τα βασικά στοιχεία.
Το Gridlex είναι διατίθεται δωρεάν στο GitHub repo ή μπορείτε να το τραβήξετε μέσω npm ή bower. Προσφέρει πλήρη τεκμηρίωση στον κύριο ιστότοπο, συμπεριλαμβανομένων των δειγμάτων για στήλες μεταβλητού εύρους και ερωτήματα μέσων.
Εχεις πλήρης έλεγχος μέσω του σχεδιασμού flexbox και μόνο παίρνει μερικές τάξεις CSS για να συμβεί αυτό! Και αν έχετε ποτέ μια γρήγορη ερώτηση ή θέλετε να μοιραστείτε έναν ιστότοπο που δημιουργήσατε χρησιμοποιώντας το Gridlex, μπορείτε να στείλετε μήνυμα στον δημιουργό στο Twitter @webdevlint.
