Δημιουργήστε λεπτές γραμμές εργαλείων στο Pure CSS με το Wenk
Με ένα τόσο περίεργο όνομα, δεν θα περιμένατε πολύ από Wenk, ένα δωρεάν CSS βιβλιοθήκη εργαλείων. Ωστόσο, είναι μια από τις μικρότερες βιβλιοθήκες μπορείτε να λάβετε μέτρηση κάτω από 1KB όταν είναι gzipped.
Ο Wenk χρησιμοποιεί καθαρό CSS με δεδομένα-* γνωρίσματα για να δημιουργήσω live συμβουλές ότι μπορείτε να αποκαταστήσετε και να τοποθετήσετε τις προτιμήσεις σας. Το καλύτερο από όλα, είναι μια εντελώς δωρεάν βιβλιοθήκη με τον πηγαίο κώδικα που διατίθεται στο GitHub.
Αυτά τα ελαφριά tooltips είναι πολύ απλά να προσθέσετε στον ιστότοπό σας. Χρειάζεστε μόνο το Wenk.css αρχείο προστέθηκε στην κεφαλίδα της σελίδας σας, που μπορείτε να κατεβάσετε από το repo GitHub.
Ή, θα μπορούσατε ακόμη προσθέστε το αρχείο CDN το οποίο φιλοξενείται στο CDN του GitHub. Εδώ είναι ο κώδικας για αυτό:
Ή εάν είστε ανεμιστήρας npm / bower μπορείτε να εγκαταστήσετε αυτό το πακέτο από το τερματικό.
Οι προεπιλεγμένες ετικέτες εργαλείων δεν έχουν πολλά προσαρμοσμένα δεδομένα. Σε αφήνουν επιλέξτε τη θέση και το πλάτος, αλλά εσύ πρέπει να να αλλάξετε με μη αυτόματο τρόπο το CSS αν θέλετε να στυλ διαφορετικά.
Για παράδειγμα, μπορεί να θέλετε να προστεθεί ένα βέλος CSS στην επεξήγηση εργαλείου που εμφανίζεται πάνω από το στοιχείο του υποδείγματος εργαλείου. Αυτό είναι αρκετά απλό στη δημιουργία, αλλά θα χρειαστεί να σκουπίσετε το φύλλο στυλ Wenk βρείτε την ακριβή κλάση CSS Παρατείνω.
Εδώ είναι ένα δείγμα μερικών προεπιλεγμένου κωδικού για τα εργαλεία Wenk:
Wenk προς τα δεξιά! Η κύρια σελίδα προορισμού Wenk περιλαμβάνει live demos που μπορείτε να δοκιμάσετε τοποθετώντας το δείκτη του ποντικιού. Αυτά είναι τα πιο βασικά εργαλεία θα έχετε, αλλά είναι τέλεια για μια βιβλιοθήκη που ζυγίζει λιγότερο από ένα kilobyte.
Ένα σημαντικό πράγμα που πρέπει να εξετάσουμε είναι υποστήριξη του προγράμματος περιήγησης. Όλες οι εκδόσεις του Chrome και του Firefox θα πρέπει να δουλεύει καλά. Ίδια με Opera 12+ και Opera Mini v8 +. Αλλά IE8 και IE10 φαίνεται να έχω πρόβλημα κάνοντας αυτά τα tooltips. Ευτυχώς, το μερίδιό τους στην αγορά πέφτει γρήγορα, αλλά είναι κάτι που πρέπει να εξετάσουμε πριν τη χρήση.
Είμαι ακόμα έκπληκτος πόσο μπορείτε να κάνετε με τόσο λίγα ΚΒ. Η βιβλιοθήκη Wenk είναι μαρτυρία της σύγχρονης ανάπτυξης των frontend και δείχνει ότι μπορεί λίγο να προχωρήσει πολύ.
Μπορείτε να σκάψετε μέσα από το ολόκληρη την πηγή στο GitHub, μαζί με live demos και αποσπάσματα κώδικα για να ρυθμίσετε και να δημιουργήσετε αυτές τις συμβουλές για τον δικό σας ιστότοπο.
