Grid.css - Ένα σύστημα ελάχιστου πλέγματος για προγραμματιστές Web

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

Αν ψάχνετε για ένα πολύ μικρότερο και βελτιωμένο σύστημα πλέγματος τότε θα αγαπήσετε Grid.css.

Αυτή η ελεύθερη βιβλιοθήκη ανοιχτού κώδικα έρχεται συσκευασμένη με το παραδοσιακό Σύστημα πλέγματος 12-col που μπορείτε να δομήσετε για οποιαδήποτε διάταξη. Το CSS είναι πραγματικά εύκολο στη χρήση και το ίδιο το αρχείο μόνο μετρά 560 byte (δηλαδή μισό KB!)

Το ξεκίνημα είναι εξαιρετικά εύκολο και απλά χρειάζεστε ένα αρχείο CSS προστέθηκε στην κεφαλίδα σας.

Μπορείτε να βρείτε το άμεση σύνδεση λήψης στην αρχική σελίδα του Grid.css ή στο επίσημο repos GitHub. Θα μπορούσατε ακόμη να χρησιμοποιήσετε το ωμή έκδοση CDN για να ενσωματώσετε αυτό το αρχείο απευθείας από το GitHub χωρίς να το φιλοξενήσετε μόνοι σας.

Τώρα, μπορείτε να ρυθμίσετε τη δομή της στήλης σας χρησιμοποιώντας τα στοιχεία που θέλετε (διαιρέσεις, τμήματα κ.λπ.).

Αυτό γενικά περιλαμβάνει α .σειρά στοιχείο (το δοχείο) μαζί με πολλούς στοιχεία εσωτερικής στήλης. Οι κλάσεις στήλης χρήση αριθμών για να ορίσετε το συνολικό τους χώρο μέσα στο δοχείο, για παράδειγμα, .col4 καταλαμβάνει τέσσερις στήλες των δώδεκα συνολικά.

Εδώ είναι ένα παράδειγμα απόσπασμα από το demo:

Μπορείτε να χρησιμοποιήσετε οποιονδήποτε συνδυασμό τάξεων στήλης που σας αρέσει, μόνο και μόνο εφ 'όσον προσθέστε μέχρι 12.

Αυτό σημαίνει ότι μπορείτε επίσης αναδιάρθρωση της σελίδας όσο θέλετε, χρησιμοποιώντας διαφορετικά δοχεία γραμμών. Για παράδειγμα, θα μπορούσατε να έχετε ένα μεγάλο άνοιγμα για την κεφαλίδα σας, αλλά να χρησιμοποιήσετε δύο διαφορετικές ρυθμίσεις row / col για το σώμα της σελίδας σας.

Φυσικά, αυτή η βιβλιοθήκη είναι 100% δωρεάν και ανοιχτή πηγή, έτσι μπορείτε να κάνετε αλλαγές όσο θέλετε.

Ο δημιουργός, Ahmed Tarek, έκανε επίσης Butns η οποία είναι μια παραλλαγή των πολλών κιτ UI κουμπιών εκεί έξω. Το ζευγάρια ωραία με Grid.css, έτσι είναι και οι δύο εξαιρετικές βιβλιοθήκες για να πάρει όταν ξεκινά ένα νέο web project.