UIkit: Ένα Framework για τη Γρήγορη Ανάπτυξη Layouts

Για παράδειγμα, το Bootstrap και το Foundation είναι τέτοια δημοφιλή frameworks. Ωστόσο, υπάρχουν και άλλα λιγότερο δημοφιλή που μπορούν να μας εξοικονομήσουν πολύ χρόνο στον προγραμματισμό. Με αυτό κατά νου, ας γνωρίσουμε το UIkit κι ας συζητήσουμε μερικά από τα καταπληκτικά χαρακτηριστικά του.

Τι είναι το UIkit

Ακολουθεί η ακριβής του περιγραφή, όπως αναφέρεται στον ιστότοπό του:

Ένα ελαφρύ και ευέλικτο framework για front-end προγραμματισμό με στόχο τη δημιουργία γρήγορων και ισχυρών web interfaces.

Το UIkit δεν απαιτεί τη χρήση του jQuery. Μπορείς να το ενσωματώσεις στα projects σου ακολουθώντας οποιαδήποτε από τις μεθόδους που περιγράφονται στη σελίδα εγκατάστασης.

Ας δούμε τώρα μερικά από τα βασικά χαρακτηριστικά/components του.

Τροποποιήσεις με SASS

Εάν είσαι εξοικειωμένος με τη χρήση preprocessors CSS και package managers, μπορείς να παρακάμψεις το προεπιλεγμένο στυλ του UIkit ανάλογα με τις ανάγκες του θέματος σου.

Με αυτό κατά νου, παρακάτω είναι τα προεπιλεγμένα breakpoints του UIkit όπως δηλώνονται στο αντίστοιχο SCSS αρχείο:

Αν χρειάζεσαι διαφορετικά breakpoints στο θέμα σου, το μόνο που πρέπει να κάνεις είναι να ορίσεις τις ίδιες μεταβλητές στο SCSS αρχείο σου, όπως φαίνεται παρακάτω:

Καρουζέλ

Χάρη στα Slideshow και Slider components, μπορείς να δημιουργήσεις ελκυστικά καρουζέλ που λειτουργούν καλά σε διάφορες οθόνες και συσκευές.

Είτε θέλεις ένα καρουζέλ full-screen, είτε ένα καρουζέλ με εικόνες αλλά και βίντεο, ή parallax εφέ για να δώσεις ζωή στα slides σου, το UIkit τα έχει όλα. Απλώς έλεγξε τις σχετικές οδηγίες και ξεκίνησε να δημιουργείς!

Στοιχεία που παραμένουν σταθερά

Πόσες φορές έχεις θελήσει να τοποθετήσεις ένα ή και περισσότερα στοιχεία που παραμένουν σταθερά καθώς γίνεται κύλιση; Για να το πετύχεις, μπορεί να έχεις χρησιμοποιήσει εξωτερικές βιβλιοθήκες JavaScript όπως το ScrollMagic.js.

Το UIkit παρέχει το Sticky component για να πετύχει αυτή τη συμπεριφορά. Στην πιο απλή του μορφή, μπορείτε να κάνετε ένα στοιχείο σταθερό προσθέτοντας το χαρακτηριστικό `uk-sticky`.

Ίσα Ύψη

Μία από τις πιο συχνές απαιτήσεις όταν δημιουργούμε grid layouts είναι να έχουν ορισμένα στοιχεία ίσο ύψος.

Για παράδειγμα, ας δούμε την ακόλουθη διάταξη:

Εδώ οι μπλε τίτλοι έχουν διαφορετικά ύψη. Αυτό που θα θέλαμε είναι το εξής αποτέλεσμα:

Χάρη στο UIkit μπορούμε να επιτύχουμε αυτήν τη διάταξη απλά προσθέτοντας το χαρακτηριστικό `uk-height-match` σε ένα parent στοιχείο με την κατάλληλη τιμή που στοχεύει στα στοιχεία που θα πρέπει να έχουν ίσα ύψη. Εναλλακτικά, θα έπρεπε να χρησιμοποιήσουμε custom JavaScript ή μια εξωτερική βιβλιοθήκη όπως το matchHeight.js. Επίσης, σε αυτήν την περίπτωση, μια λύση μόνο με CSS θα μπορούσε να λειτουργήσει, κάνοντας εκτεταμένη χρήση του flexbox.

Lightbox

Μια άλλη συχνή απαίτηση για τους UI προγραμματιστές είναι η δημιουργία responsive lightboxes. Μπορεί να έχεις ακούσει για δημοφιλή plugins lightbox της JavaScript, όπως το Magnific Popup και το Fancybox.

Το UIkit παρέχει το πολύ χρήσιμο Lightbox component για τη δημιουργία lightbox galleries, ακολουθώντας μια απλή δομή. Αξίζει να το δοκιμάσεις!

Εφέ Κύλισης

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

Εκτός από τις δημοφιλείς βιβλιοθήκες JavaScript για κύλιση (π.χ. ScrollTrigger), με τις οποίες μπορεί να είσαι ήδη εξοικειωμένος, το UIkit μας επιτρέπει να συμπεριλάβουμε εύκολα εφέ κύλισης χάρη στο Scrollspy component. Όλα τα διαθέσιμα animations αναφέρονται στο Animation component.

Συμπέρασμα

Αυτοί είναι μόνο μερικοί από τους λόγους για τους οποίους, εμείς στη Double Dot, αγαπάμε το UIkit και το χρησιμοποιούμε ως σημείο εκκίνησης για κάθε έργο που δημιουργούμε. Κάποια στιγμή, ελπίζουμε σύντομα, η νέα του έκδοση θα κυκλοφορήσει. Ανυπομονούμε να την έχουμε στα χέρια μας και να δοκιμάσουμε τα νέα συναρπαστικά χαρακτηριστικά που θα φέρει!

Τι σκέφτεσαι λοιπόν; Θα δοκιμάσεις αυτό το framework;