Πριν από δύο εβδομάδες το διάσημο Ιδρυτικό πλαίσιο κυκλοφόρησε την τέταρτη έκδοση. Αν δεν έχετε ακούσει ποτέ για το Ίδρυμα, θα σας καθοδηγήσουμε χρησιμοποιώντας αυτό το ευέλικτο πλαίσιο.

Δεδομένου ότι η έκδοση 3 του Foundation ιδρύθηκε από το έδαφος χρησιμοποιώντας το SASS - έναν προεπεξεργαστή CSS που βοηθά στη συγγραφή πιο αποτελεσματικού CSS - αυτή η νέα έκδοση είναι επίσης φιλική προς το κινητό και προσφέρει πολλές δυνατότητες στο δίκτυο, t από άλλα πλαίσια.

Ας σκεφτούμε το Ίδρυμα και να δούμε γιατί είναι τόσο δημοφιλές ...

Το πλέγμα

Το Ίδρυμα χρησιμοποιεί ένα ενσωματωμένο πλέγμα 12 στηλών, το οποίο θα προσαρμόζεται σε οποιαδήποτε οθόνη μεγέθους, αν έχετε ήδη χρησιμοποιήσει πλέγματα, όλα αυτά πρέπει να είναι πολύ γνωστά σε εσάς. Όλα τα μίγματα στο Ίδρυμα χρησιμοποιούν το μέγεθος κιβωτίων: border-box, έτσι ώστε τα σύνορα και το padding να μην επηρεάζουν το πλάτος και το ύψος του στοιχείου, κάνοντας τα μαθηματικά λίγο πιο εύκολο για εμάς. Αλλά το καταπληκτικό πράγμα για το πλέγμα του Ιδρύματος είναι ότι παίρνετε πραγματικά 2 πλέγματα, ένα μεγάλο πλέγμα όταν η οθόνη έχει πλάτος μεγαλύτερο από 768px και ένα μικρότερο πλέγμα που μπορείτε να ελέγξετε εξίσου απλά. Για το σκοπό αυτό, το Ίδρυμα χρησιμοποιεί τις μικρές # και τις μεγάλες # κατηγορίες, όπως έτσι:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Σε αυτόν τον κώδικα δημιουργήσαμε μια σειρά στην οποία υπάρχουν 3 divs που είναι ακριβώς το ίδιο πλάτος όταν το πρόγραμμα περιήγησης είναι ευρύτερο από 768px αλλά όταν είναι μικρότερο, όπως βλέπετε σε αυτή τη μικρή τάξη στα divs, το τελευταίο θα κατέχει το μισό ενώ τα άλλα δύο θα καταλαμβάνουν το 25% το καθένα, αυτό σας δίνει τεράστιο έλεγχο για τον τρόπο εμφάνισης της ιστοσελίδας μας σε όλες τις οθόνες.

Το ίδρυμα σας επιτρέπει επίσης να αντισταθμίσετε μια στήλη, με την οποία εννοώ ότι μπορείτε να έχετε μια σειρά με 2 στήλες που έχουν μόνο 3 κολόνες πλάτους, αλλά μπορείτε να αντισταθμίσετε τη δεύτερη που επιπλέει προς τα δεξιά και για να το χρησιμοποιήσουμε, κατηγορίας offset ή κατηγορίας μικρού offset:

3, offset 6

Αποκλεισμός πλέγματος

Το πλέγμα μπλοκ είναι απλά ένα ωραίο έξτρα, είναι ένας τρόπος για να χωρίσετε το περιεχόμενο μιας λίστας μέσα στο δίκτυο, είναι χρήσιμο όταν θέλετε αυτό το συγκεκριμένο τμήμα της ιστοσελίδας σας να παραμείνει ομοιόμορφα σε απόσταση ανεξάρτητα από το μέγεθος του browser. Αυτός ο τύπος πλέγματος χρησιμοποιεί τις τάξεις μικρού μπλοκ-πλέγματος και πλέγματος μεγάλου πλέγματος, αν ορίσετε μόνο το πρώτο, το πλέγμα θα διατηρήσει το επιθυμητό διάστημα, ανεξάρτητα από το τι είναι το παράθυρο προβολής, αλλά αν χρησιμοποιείτε μόνο το μεγάλο μπλοκ- όταν το παράθυρο προβολής φτάσει στο σημείο διακοπής των 768 pixel τα στοιχεία πλέγματος θα στοιβάζονται το ένα πάνω στο άλλο, μπορείτε να πάρετε πάντα περισσότερο έλεγχο χρησιμοποιώντας και τις δύο αυτές κλάσεις, όπως π.χ.:

Χρησιμοποιώντας αυτό, οι εικόνες θα είναι ομοιόμορφα σε απόσταση ανεξάρτητα από το μέγεθος. Όταν το παράθυρο προβολής είναι μεγαλύτερο από 768px, θα καταλαμβάνουν μόνο μία σειρά και όταν είναι μικρότερο από αυτό θα καταλαμβάνουν δύο σειρές με 2 εικόνες το καθένα.

Η κύρια πλοήγηση

Τώρα που καλύψαμε το πλέγμα στο Ίδρυμα και πώς σας δίνει αρκετό έλεγχο σε όλα τα περιβάλλοντα, θα μιλήσουμε για κάτι που σχεδόν πάντα θα χρησιμοποιούμε στους ιστότοπούς μας: μια κορυφαία γραμμή πλοήγησης. Και φυσικά αυτή η πλοήγηση μπορεί επίσης να είναι ευέλικτη με ελάχιστη ή και καθόλου εργασία χρησιμοποιώντας αυτό το πλαίσιο. Για να δημιουργήσετε μια απλή πλοήγηση μέσω του Foundation, χρησιμοποιείτε:

Αυτό το bit HTML δημιουργεί μια απλή γραμμή πλοήγησης που έχει τον τίτλο της ιστοσελίδας στα αριστερά και στη συνέχεια δεξιά έχει τέσσερα στοιχεία μενού. Σημειώστε επίσης ότι όταν το παράθυρο προβολής είναι μικρότερο από 768px αυτό το μενού θα αντικατασταθεί από ένα εικονίδιο λίστας που θα κάνει αυτό το μενού απόκρισης. Αν θέλετε αυτό το πλέγμα να έχει τη θέση του σταθερό καθώς κάνετε κύλιση προς τα κάτω τη σελίδα που χρειάζεται απλά να το τυλίξετε σε div με μια κατηγορία σταθερών. Για να προσθέσετε αναπτυσσόμενα μενού στην πλοήγησή σας, απλά πρέπει να προσθέσετε κάτι τέτοιο στον τόπο όπου θέλετε να κάνετε την αναπτυσσόμενη λίστα σας:

Υπάρχει επίσης η δυνατότητα να προσθέσετε ένα διαχωριστικό στο στοιχείο λίστας προσθέτοντας μια μικρή γκρίζα κατακόρυφη γραμμή, για να το κάνετε αυτό, πρέπει απλώς να τοποθετήσετε ένα στοιχείο λίστας με την κλάση διαιρέτη μεταξύ των δύο στοιχείων λίστας που θέλετε να διαιρέσετε.

Κουμπιά

Κανένα πλαίσιο δεν θα είναι πλήρες χωρίς κάποια προκαθορισμένα κουμπιά και το Ίδρυμα έχει στην πραγματικότητα περισσότερα από ένα προκαθορισμένα στυλ κουμπιού, έχει προεπιλεγμένο ένα που χρησιμοποιεί μπλε χρώμα και στη συνέχεια προσθέτει τα στυλ επιτυχίας, συναγερμού και δευτεροβάθμιας εκπαίδευσης. Με την προσθήκη της κατηγορίας της ακτίνας δίνετε στο κουμπιά αυτό μια μικρή ακτίνα ακρών και δίνοντάς του την τάξη του γύρου κάνετε το κουμπί σχεδόν εξ ολοκλήρου στρογγυλό. Μπορείτε επίσης να προσθέσετε την κλάση απενεργοποιημένη στο κουμπί και υπάρχουν 4 τάξεις μεγέθους για να κάνετε το κουμπί τόσο μεγάλο όσο χρειάζεστε.

Για να δημιουργήσετε ένα απλό κουμπί dropdown θα πρέπει να προσθέσετε μόνο την αναπτυσσόμενη κατηγορία μετά την τελευταία τάξη, όπως π.χ.:

Όπως μπορείτε να δείτε, όταν πρόκειται για τυπογραφία, το Ίδρυμα μας παρέχει κάποια βασική βοήθεια και στη συνέχεια κάποιες πρόσθετες τάξεις για να καλύψουμε όλες τις ανάγκες μας.

Άλλα εξαρτήματα

Εάν αυτή η επίδειξη του πλαισίου του Ιδρύματος έχει ωθήσει την όρεξή σας να μάθετε περισσότερα και να ξεκινήσετε την οικοδόμηση με το Ίδρυμα θα πρέπει πραγματικά να ρίξετε μια ματιά στην τεκμηρίωση επειδή το Ίδρυμα προσφέρει επίσης πρόσθετα συστατικά του CSS όπως:

  • Κουτιά ειδοποίησης
  • Πάνελ
  • Πίνακες τιμολόγησης
  • Προοδευτικά μπαρ
  • Πίνακες
  • Μικρογραφίες
  • Flex βίντεο

Και επίσης κάποιο βοηθητικό JavaScript όπως:

  • Ξέφωτο
  • Πτώση
  • Joyride
  • Μαγγελάν
  • Τροχιά
  • Αποκαλύπτω
  • Ενότητα
  • Εργαλεία

Όπως μπορείτε να δείτε, υπάρχει πολύ Ίδρυμα για να εξερευνήσετε και σας συνιστώ να εξετάσετε όλες τις ιδιότητες CSS και JavaScript.

συμπέρασμα

Καλύψαμε αρκετά σε αυτό το άρθρο για να δούμε πώς το Ίδρυμα μπορεί να βοηθήσει στην οικοδόμηση γρηγορότερων και πιο ανταποκρινόμενων ιστότοπων, χρησιμοποιώντας το δίκτυό του, παίρνετε πολύ μεγαλύτερο έλεγχο στη δομή του ιστότοπού σας παρά όταν χρησιμοποιείτε ένα κανονικό εύκαμπτο πλέγμα και το Ίδρυμα σας δίνει επίσης πολλούς βοηθούς για να δημιουργήσετε τον ιστότοπό σας. Ελπίζω ότι αυτό το άρθρο σας έδωσε την ώθηση να μάθετε και να χρησιμοποιήσετε το Ίδρυμα για το επόμενο έργο σας.

Έχετε χρησιμοποιήσει το Ίδρυμα για ένα έργο; Ποιες λειτουργίες θεωρήσατε πιο χρήσιμες; Ενημερώστε μας στα σχόλια.