Ένα πρόσθετο JQuery για βέλτιστη χρήση του χώρου οθόνης
Η βελτιστοποίηση του τρόπου με τον οποίο χρησιμοποιείται ο χώρος σε μια οθόνη αποτελεί βασικό στοιχείο του καλού σχεδιασμού ιστοσελίδων και ιδιαίτερα του ανταποκρινόμενου σχεδιασμού.
Υπάρχουν διάφοροι τρόποι προσέγγισης αυτού του είδους της πρόκλησης και ένα από τα πιο δημοφιλή είναι η αυτόματη διάταξη στοιχείων μέσα σε ένα γονικό κοντέινερ. Είναι αποτελεσματικό και, όταν εκτελείται καλά, δημιουργεί μια διάταξη που είναι τόσο ελκυστική για το οπτικό πεδίο όσο και λειτουργικά βέλτιστη.
Αν σχεδιάζετε έναν ανταποκρινόμενο ιστότοπο, θα βρείτε σχεδόν σίγουρα την ανάγκη αναδιάταξης του περιεχομένου με δυναμικό τρόπο, ανάλογα με το μέγεθος της οθόνης της συσκευής του χρήστη. Το περιεχόμενο αυτόματης ρύθμισης έχει νόημα, καθώς ελαχιστοποιεί το χρόνο που αφιερώνεται στην προσαρμογή των σημείων διακοπής για κάθε σελίδα και κάθε στοιχείο.
Οι ιστοτόποι με συνεχώς μεταβαλλόμενο περιεχόμενο (όπως blogs ή ηλεκτρονικά καταστήματα) μπορούν να επωφεληθούν ιδιαίτερα από την αυτόματη ρύθμιση. Μετά από όλα, θέλετε πραγματικά να πρέπει να πάτε στον κώδικα για τον ιστότοπο του πελάτη σας και να προσαρμόσετε τα σημεία διακοπής και τη διάταξη εάν αποφασίσουν ξαφνικά να αρχίσουν να γράφουν μεγαλύτερες ή μικρότερες θέσεις blog;
Κάνοντας όλα αυτά από το μηδέν είναι χρονοβόρα και πέρα από τις ικανότητες των περισσότερων σχεδιαστών που δεν είναι και προγραμματιστές. Αντ 'αυτού, είναι λογικό να χρησιμοποιήσετε μια προϋπάρχουσα προσθήκη ή πλαίσιο.
Η JavaScript (συμπεριλαμβανομένης της jQuery και άλλων βιβλιοθηκών) είναι ο πιο συνηθισμένος τρόπος δημιουργίας αυτού του είδους της διάταξης, πιθανότατα λόγω της ευρείας διασταυρούμενης συμβατότητάς της. Έτσι λειτουργούν οι υπάρχουσες προσπάθειες, όπως το vGrid, το Wookmark και το Masonry.
Freetile.js είναι ένα πρόσφατο πρόσθετο jQuery που επιτρέπει αυτό το είδος δυναμικής, οργανωμένης, ανταποκρινόμενης διάταξης. Χρησιμοποιήθηκε ως κινητήρας πίσω από το Assemblage και Assemblage Plus για σχεδόν δύο χρόνια και είναι πλέον διαθέσιμος ως ανεξάρτητο έργο ανοιχτού κώδικα.
Είναι διαφορετικό από τις υπάρχουσες προσπάθειες σε αυτό το χώρο για λίγους λόγους. Επιτρέπει τη χρήση οποιωνδήποτε στοιχείων μεγέθους χωρίς την ανάγκη για ένα πλέγμα στήλης σταθερού μεγέθους. Αυτό σας απαλλάσσει από την υποχρέωση να καθορίσετε ένα εύρος στήλης κατάλληλο για τα στοιχεία σας. Και μπορείτε να προσαρμόσετε τον αλγόριθμο που αξιολογεί τις πιθανές θέσεις εισαγωγής για κάθε στοιχείο, επιτρέποντάς σας να εκφράσετε προτιμήσεις όπως ευθυγράμμιση και εγγύτητα.
Έχει μια έξυπνη ρουτίνα κινούμενων εικόνων που διευκολύνει τη διάκριση μεταξύ των στοιχείων που πρέπει να κινούνται και τα οποία δεν πρέπει. Ο προσδιορισμός της κινούμενης εικόνας μέσα στον κώδικα είναι επίσης εύκολος.
Η χρήση του Freetile.js είναι απλή στη χρήση. Ακόμη και αν δεν είστε ικανός στο JavaScript, θα πρέπει να είστε σε θέση να καταλάβετε τη χρήση του αρκετά γρήγορα.
Το Freetile.js διατίθεται βάσει της Άδειας BSD και διατίθεται μέσω του GitHub.
Έχετε χρησιμοποιήσει το Freetile.js; Τι κατασκευάσατε; Μοιραστείτε τις εμπειρίες σας στα σχόλια.