Πώς να τροποποιήσετε το Bootstrap απλά και αποτελεσματικά
Bootstrap δεν είναι καθόλου το μόνο πλαίσιο διασύνδεσης HTML / CSS εκεί έξω, αλλά νομίζω ότι είναι ασφαλές να πούμε ότι άλλαξε το παιχνίδι. Αυτός ο σωρός κώδικα που περιλαμβάνει την κουζίνα-νεροχύτη έχει κάνει πολύ πιο εύκολο το σχεδιασμό και την ανάπτυξη πολλών εφαρμογών (και της ιστοσελίδας) και έχει κάνει δημοφιλείς το τεράστιο πλαίσιο HTML ως παραπροϊόν.
Δυστυχώς, η τεράστια έκταση της σειράς χαρακτηριστικών της απευθύνεται στις πτυχές της ανθρώπινης φύσης, και πολλοί από τους ανθρώπους που επιλέγουν να τη χρησιμοποιήσουν επιμείνουν στις αθετήσεις. Τώρα, το μυαλό σας, τα προεπιλεγμένα στυλ και το πλέγμα διάταξης δεν είναι κακά από οποιοδήποτε τμήμα της φαντασίας. Είναι αποτέλεσμα πολλών σκληρών εργασιών και εκτεταμένων δοκιμών από την ομάδα του Twitter. Είναι τόσο στέρεο θεμέλιο για να αξιοποιήσετε όσο το δυνατόν.
Αλλά αυτά είναι όλα: ένα ίδρυμα. Τα πλαίσια, όπως υποδηλώνει το όνομά τους, δεν προορίζονται να χρησιμοποιηθούν ως μια τελική λύση για τις ανάγκες σας στο UX. Η μόνη εξαίρεση σε αυτόν τον κανόνα μπορεί να είναι αν αναπτύσσετε κάτι εσωτερικό που δεν θα δει ποτέ το κοινό. Αλλά ακόμα και τότε ... Η όλη ιδέα είναι να τα πάρουμε περαιτέρω, να τα επεκτείνουμε και να τα αλλάξουμε.
Οι προγραμματιστές του Bootstrap έχουν κάνει πραγματικά μια πολύ καλή δουλειά να κάνουν αυτό εύκολο να κάνουμε: ο κώδικας τους είναι αρθρωτός. και μπορείτε να κατεβάσετε μεμονωμένα στοιχεία του πλαισίου για να χρησιμοποιήσετε όπως κρίνετε κατάλληλο. Έχουν δώσει ακόμη και ένα βασικό εργαλείο προσαρμογής στην ιστοσελίδα τους που σας επιτρέπει να επεξεργαστείτε όλες τις μεταβλητές ανάλογα με τις ανάγκες.
Τα υπόλοιπα, όμως, εξαρτώνται από εμάς. Και ο άνθρωπος, μερικοί πραγματικά εντυπωσιακοί σχεδιαστές και προγραμματιστές έχουν ενισχύσει τη δημιουργία mods και εργαλεία που αφήνουν τους υπόλοιπους από εμάς χωρίς δικαιολογίες. Δεν υπάρχει κανένας λόγος να επιλυθούν οι αθετήσεις.
Αξιολογήστε τα μεμονωμένα έργα σας. ίσως η προεπιλεγμένη τυπογραφία του Bootstrap είναι κατάλληλη για εσάς, αλλά το σχέδιο χρωμάτων και το πλέγμα δεν είναι, ίσως χρειάζεστε διαφορετικά εικονίδια. Προσδιορίστε τα μέρη όπου το Bootstrap δεν ανταποκρίνεται στις ανάγκες σας και ρίξτε μια ματιά στους παρακάτω πόρους.
Mods Bootstrap
Αυτά είναι πλήρεις mods που παίρνουν το βασικό UI bootstrap και το μετατρέπουν σε κάτι σχεδόν μη αναγνωρίσιμο. Οι χρήσεις τους είναι κάπως συγκεκριμένες και περιορισμένες. αλλά αν ικανοποιούν τις ανάγκες σας, μπορούν να σας εξοικονομήσουν χρόνο και χρήματα.
Flat UI
Η πρώτη mod στη λίστα αυτή είναι Flat UI. Κυκλοφόρησε από τα παιδιά στο Designmodo , Flat UI πέτυχε άμεση δημοτικότητα στην κοινότητα σχεδιασμού και για καλό λόγο: είναι όμορφο.
Δημιουργήθηκε για όσους αγαπούν το επίπεδο σχεδιασμό - σε αντίθεση με τις κάπως σποραδικές τάσεις του Bootstrap - κάθε στοιχείο UI έχει σχεδιαστεί εκ νέου από το έδαφος με μια νέα αισθητική.
Με εικονίδια διανυσμάτων, νέα γραμματοσειρά εικονιδίων glyph, προσαρμοσμένα στοιχεία UI (όπως μια λίστα υποχρεώσεων) και πολλαπλά εύκολα αλλαγμένα σχέδια χρωμάτων, το Flat UI με έκανε και πιθανόν πολλοί άλλοι να ξανασκεφτούν τι μπορεί να μοιάζει με το Bootstrap.
Το μόνο μου peeve pet: το μέγεθος του κειμένου για το βασικό σας στοιχείο παραγράφου είναι λίγο μικρό για έναν ιστότοπο. Για να είμαστε δίκαιοι, είναι ίσως μόνο σωστό για μια διεπαφή εφαρμογών όπου μπορείτε να τοποθετήσετε κείμενο σε σχετικά μικρούς χώρους.
Το επίπεδο UI είναι δωρεάν, αλλά μπορείτε να πληρώσετε για μια επαγγελματική έκδοση με πρόσθετα στοιχεία, λειτουργικότητα και αρχεία PSD.
Fbootstrapp
Θυμάστε πώς είπα ότι μερικά από αυτά τα mods είχαν μάλλον συγκεκριμένες περιπτώσεις χρήσης; Λοιπόν δεν είπα. Fbootstrapp έχει πλήρως επεξεργαστεί ώστε να είναι συμβατό με τα στοιχεία διεπαφής χρήστη του Facebook.
Γιατί θα μπορούσε κανείς να το κάνει; Λοιπόν, με τα δικά τους λόγια, "το Fbootstrapp είναι ένα εργαλείο που έχει σχεδιαστεί για να ξεκινήσει την ανάπτυξη των εφαρμογών Facebook iFrame σε αμφότερα τα σχετικά μεγέθη. Περιλαμβάνει βάση CSS και HTML για τυπογραφία, φόρμες, κουμπιά, πίνακες, πλέγματα, πλοήγηση και πολλά άλλα, στυλισμένα στο τυπικό look and feel του Facebook. "
Οι προγραμματιστές εφαρμογών του Facebook, λάβετε υπόψη: η δουλειά σας μόλις έγινε ευκολότερη.
Jumpstart UI admin templates
Η Bootstrap μπορεί να προορίζεται για χρήση σε εφαρμογές, αλλά χρειάζεται λίγη δουλειά αν σκοπεύετε να δημιουργήσετε ένα κλασικό "admin interface" με αυτό. JIstartart UI σας φέρνει τρία διαφορετικά πρότυπα που το κάνουν αυτό θαυμάσια.
Τα εικονίδια διαχειριστή UI, τα στυλ widget, τα plug-ins οπτικοποίησης δεδομένων που βασίζονται σε jQuery και άλλα, συγκεντρώνονται σε καθαρά, προσαρμόσιμα και πλήρως ανταποκρινόμενα σχήματα.
Αυτά τα mods είναι διαφορετικά από τα άλλα με ένα σημαντικό τρόπο, ωστόσο. Δεν υπάρχει δωρεάν έκδοση. πρέπει να πληρώσετε για αυτούς εντελώς. Δεν είναι πολύ ακριβό, όμως: κυμαίνονται μεταξύ $ 15 και $ 20 USD. Για την τεράστια προσπάθεια που έχει περάσει σε αυτά, θα έλεγα ότι αξίζει τον κόπο, αν ανταποκρίνονται στις συγκεκριμένες ανάγκες σας.
BootMetro
Κάποιοι το αγαπούν και πολλοί το κατακρίνουν με πάθος. αλλά δεν υπάρχει αμφιβολία ότι τα Windows 8 και το UI του Metro προκάλεσαν αναταραχή στον κόσμο του σχεδιασμού. Εγώ, για τη ζωή μου, δεν μπορώ πραγματικά να σκεφτώ κάποια περίπτωση χρήσης (έξω από κάποιο είδος λογισμικού) όπου αυτό το είδος UI θα ήταν ιδιαίτερα χρήσιμο. Αλλά hey, στο BootMetro έχουμε ένα!
Είναι δωρεάν, και φαίνεται να είναι αρκετά χαρακτηριστικό-πλήρες, οπότε ελέγξτε το. Μπορεί να μην είναι ιδιαίτερα χρήσιμο για τους περισσότερους ανθρώπους, αλλά είναι ένα ενδιαφέρον πείραμα κώδικα. (Εννοώ πραγματικά το Bootstrap και το Metro;
Εργαλεία προσαρμογής Bootstrap
Έτσι, θέλετε να προσαρμόσετε τη ρύθμιση Bootstrap για να καλύψετε καλύτερα τις ανάγκες σας UI / UX. Που ξεκινάτε; Λοιπόν, θα μπορούσατε να βουτήξετε κατευθείαν στον κώδικα. Έχω κάνει αυτό. Θα σας πω, όμως, μπορεί να είναι τραχύ.
Αν θέλετε να αλλάξετε ολόκληρη την τυπογραφία ή το κουμπί και να συνδέσετε τα χρώματα ή τα στυλ Navbar με το χέρι, θα πάτε εκεί για λίγο. Θα μπορούσατε να επεξεργαστείτε όλες τις μεταβλητές στην εφαρμογή προσαρμογής στην ιστοσελίδα Bootstrap, αλλά θα πρέπει να γνωρίζετε τους κώδικες HEX για όλα τα χρώματα και δεν λαμβάνετε κανένα οπτικό μήνυμα καθώς κάνετε αλλαγές.
Ευτυχώς για εμάς, υπάρχουν αρκετοί κατασκευαστές θεμάτων Bootstrap που δημιουργήθηκαν ειδικά για το σκοπό αυτό. Αυτά είναι τα δύο καλύτερα που έχω βρει μέχρι στιγμής.
StyleBootstrap
Αν μπορείτε να αγνοήσετε τη διεπαφή που είναι ανύπαρκτη, StyleBootstrap είναι ένα ισχυρό εργαλείο για την επεξεργασία των περισσότερων από τα προεπιλεγμένα στοιχεία UI που θα βρείτε στο πλαίσιο. Αν θέλετε να ξεκινήσετε γρήγορα, αλλάζοντας μόνο τα πιο προφανή πράγματα, τότε αυτό είναι το σημείο για να ξεκινήσετε.
Bootstrap Magic
Bootstrap Magic είναι το εργαλείο που θα χρησιμοποιήσετε εάν θέλετε να κάνετε μια σε βάθος ανακατασκευή του πλαισίου. Έχει μια ωραιότερη, πιο απλή διεπαφή και σας δίνει τη δυνατότητα να τσιμπήσετε πολύ περισσότερα στοιχεία από το StyleBootstrap. Να είστε προειδοποιημένοι, αν και ... αυτό θα διαρκέσει περισσότερο. Τούτου λεχθέντος, ακόμα δεν θα χρειαζόταν τόσο πολύ όσο θα άλλαζε τα πάντα με το χέρι.
Πρόσθετα & αποσπάσματα
Αρκεί να πείτε ότι υπάρχουν πράγματα που το Bootstrap δεν έχει ότι μπορείτε να βρείτε χρήσιμα. Αρχικά, έχουμε εικονίδια.
Γραμματοσειρά Awesome
Τα εικονίδια glyph του Bootstrap είναι δροσερά αλλά περιορισμένα. Έχετε σκοτεινά εικονίδια, έπειτα έχετε φωτεινά εικονίδια, τα οποία έχουν δημιουργηθεί σε μια όμορφη μικρή εικόνα. Οι γραμματοσειρές με εικονίδια, ωστόσο, είναι πολύ πιο ευέλικτες. Οτιδήποτε μπορείτε να κάνετε για να δημιουργήσετε κείμενο με CSS3, μπορείτε να κάνετε αυτά τα εικονίδια. Αλλάξτε το μέγεθος, το χρώμα, δώστε τους μια σκιά σταγόνας. είναι αρκετά κυριολεκτικά τόσο εύκολη όσο η γραφή CSS. Με περίπου 361 εικονίδια κατά τη στιγμή αυτής της γραφής, Γραμματοσειρά Awesome αξίζει τον έλεγχο.
Bootsnipp
Bootsnipp είναι μια βιβλιοθήκη αποσπασμάτων HTML σχεδιασμένων να συνεργάζεται με το Bootstrap, πιθανώς χωρίς την προσθήκη επιπλέον βιβλιοθηκών. Τα αποσπάσματα περιλαμβάνουν: καρτέλες εγγραφής και φόρμες σύνδεσης, καρουσέλ, καλύτερα ημερολόγια, ένα περιβάλλον ηλεκτρονικού ταχυδρομείου που μοιάζει με το Gmail, ένα περιβάλλον χρήστη πολυμέσων και πολλά άλλα.
Εάν είστε κολλημένοι προσπαθώντας να καταλάβετε πώς να τοποθετήσετε στοιχεία στο UI σας, ρίξτε μια ματιά μέσα από τη βιβλιοθήκη Bootsnipp. Εάν δεν έχουν ακριβώς αυτό που χρειάζεστε, τα παραδείγματα κώδικα μπορεί να σας βοηθήσουν να καταλάβετε πώς να το κάνετε.
Αυτό δεν είναι όλα ...
Με το αγαπημένο πλαίσιο του Twitter να είναι τόσο ευρέως αποδεκτό, είναι πιθανότατα περισσότερες πληροφορίες σχετικά με τον τρόπο προσαρμογής του Bootstrap από ό, τι μπορεί να περιέχει οποιοσδήποτε κατάλογος.
Μετά από όλα, αυτό είναι το θέμα του Διαδικτύου, έτσι; Αυτό και ... οι γάτες.
Έχετε τροποποιήσει το Bootstrap; Το κάνατε με το χέρι ή χρησιμοποιήσατε έναν πόρο; Ενημερώστε μας στα σχόλια.