Ας ξεκινήσουμε με μια παρατήρηση: Αγαπώ μερικά πλαίσια. Ως εναλλακτική λύση για την πλήρη επανεφεύρεση του τροχού ή για το σχεδιασμό ενός κουμπιού από το μηδέν, είναι και πάλι δύσκολο να κερδίσετε μια λύση "all-in-one" στις βασικές σας ανάγκες HTML / CSS / JavaScript.
Το πρόβλημα είναι, λοιπόν, είναι αυτό που είπα ακριβώς εκεί επάνω. Πλαίσια δεν είναι πραγματικά λύση all-in-one; Για όλα αυτά τα έχουμε καταστήσει αρθρωτά και εύκολα προσαρμόσιμα, μερικές φορές απλά δεν έχουν αυτό που χρειαζόμαστε.
Είναι αδύνατο να συμπεριληφθεί οποιοδήποτε πιθανό απόσπασμα HTML, στυλ στοιχείου ή λειτουργία javascript που μπορεί να χρειαστείτε. Αλλά τότε, αυτό μπορεί επίσης να είναι καλό.
Ένα πλαίσιο μπορεί να έχει πολλά πράγματα που απλά δεν χρειαζόμαστε. Μερικά από τα πιο απογοητευτικά έργα μου αφορούσαν ποτέ χειροκίνητα την αναζήτηση των τεράστιων αρχείων CSS του Bootstrap για να αλλάξουν λίγο κομμάτι κώδικα που έβλαπτε τον σχεδιασμό μου.
Ακριβώς πάρτε το στοιχείο της γραμμής πλοήγησης του Bootstrap για παράδειγμα. Είναι υπέροχο, λειτουργεί άψογα και φαίνεται καλό. Αλλά αν προσπαθήσετε να αλλάξετε τον τρόπο που βλέπει με οποιοδήποτε μεγάλο τρόπο, θα πρέπει να αλλάξετε πολλά στυλ, και χρειάζεται κάποια στιγμή για να τα βρείτε όλα. Αν είναι απλώς μια οριζόντια λίστα συνδέσμων στο επάνω μέρος της σελίδας που θέλετε, ίσως είναι πιο εύκολο να κωδικοποιήσετε ένα νέο από την αρχή.
Αλλά hey, τα πιο δημοφιλή πλαίσια εκεί έξω, ειδικά το Bootstrap, έχουν πολλά εργαλεία προσαρμογής, έτσι; Ναι, και αυτό είναι ένα σπουδαίο πράγμα, αλλά οι προεπιλεγμένες επιλογές δεν σας δίνουν αρκετό περιθώριο για εργασία.
Με απλά λόγια, εάν επικεντρωθείτε στη δημιουργικότητα, ένα τεράστιο πλαίσιο πιθανότατα δεν είναι ο δρόμος προς την κατεύθυνση. Σίγουρα, μπορείτε να το hack, αλλά αυτό θα πάρει πολύ χρόνο.
Ένα ακόμη πρόβλημα που αντιμετώπισα: οι ασυμβατότητες JavaScript. Ως τύπος που δεν είναι πραγματικά προγραμματιστής, αυτό ήταν επώδυνο.
Συγκεκριμένα, υπήρξε αυτή η φορά όταν προσπάθησα να ενσωματώσω μερικά jQuery plugins σε ένα σχέδιο βασισμένο στο Foundation. Αυτό δεν είναι μόνο ένας διαχωριστής της συμφωνίας, αλλά είναι περισσότερο χρόνο που αφιερώνεται σε σφάλματα.
Φυσικά, αυτό ήταν κάποια στιγμή πέρυσι. Ειλικρινά δεν ξέρω τι θα συνέβαινε αν προσπαθούσα το ίδιο πράγμα με τις νέες εκδόσεις του ίδιου πλαισίου και plugins, αλλά είναι ακόμα κάτι που πρέπει να εξετάσουμε.
Συνοπτικά, υπάρχουν στιγμές που τα πλαίσια δεν είναι απλά η απάντηση. Εδώ έρχεται η εργαλειοθήκη και πρέπει να έχετε ένα.
Ένα εργαλείο, στο πλαίσιο αυτού του άρθρου, είναι ένα αυτοσυγκέντρωμενο και επιμελημένο σύνολο εργαλείων, αποσπασμάτων, προσθηκών και πόρων που σας επιτρέπουν να κωδικοποιείτε τα έργα σας πολύ πιο γρήγορα. Οι άνθρωποι θα βρίσκουν συχνά αυτούς τους πόρους με την πάροδο του χρόνου και θα γίνουν συνδεδεμένοι με αυτούς. Είναι ένα προσωπικό πράγμα και πρέπει πραγματικά να φτιάξετε το δικό σας.
Ομοιότητες
Διαφορές
Το πλεονέκτημα ενός εργαλείου πάνω σε ένα πλαίσιο είναι η τεράστια ευελιξία του. Όπως αναφέρθηκε προηγουμένως, σε σχέδια όπου σκοπεύετε να ωθήσετε τα όρια σχεδιαστικά, ένα πλαίσιο είναι συχνά πάρα πολύ δυσκίνητο.
Η ίδια ποιότητα είναι επίσης η πτώση του πλαισίου σε έργα μικρού έως μέσου μεγέθους. Δημιουργείτε μια σελίδα προορισμού προώθησης; Ένας ιστότοπος μιας σελίδας; Ένα απλό ιστολόγιο; Στη συνέχεια, ένα πλαίσιο είναι πιθανώς απλώς περιττό. Είναι καλύτερα να ξεκινάτε από το μηδέν και να κάνετε κάθε λεπτομέρεια του έργου σας.
Θα έφευγα τόσο πολύ που θα έλεγα - αυτή είναι μόνο η γνώμη μου - ότι οι περισσότεροι ιστότοποι που βασίζονται στο περιεχόμενο δεν χρειάζονται ένα πλήρως ανεπτυγμένο πλαίσιο. Η εξαίρεση θα ήταν για μαζικές τοποθεσίες, όπως ars technica για παράδειγμα. Για κάτι μεγάλο που θα πρέπει να χρησιμοποιήσετε ένα πλαίσιο, αλλά θα πρέπει πιθανώς να το αναπτύξετε από το μηδέν για να ικανοποιήσετε τις ακριβείς ανάγκες του δικτυακού τόπου.
Όπου πλαίσια όπως το Bootstrap και το Ίδρυμα πραγματικά λάμπει είναι στην ανάπτυξη εφαρμογών ιστού και ιστοσελίδες που βασίζονται σε εφαρμογές. Σε αυτά τα έργα, οι σχετικά δύσκαμπτοι περιορισμοί είναι χρήσιμοι, αντί να σας επιβραδύνουν.
Κάνοντας τη δική σας εργαλειοθήκη είναι θέμα χρόνου, υπομονής και εμπειρίας. Εννοώ, σίγουρα, θα μπορούσατε να πάτε και να κάνετε αναζήτηση για "πόρους σχεδιασμού ιστοσελίδων". Κάνατε χιλιάδες χιλιάδες επισκέψεις και σε μερικές ώρες θα μπορούσατε να κατεβάσετε περισσότερα κομμάτια κώδικα από ό, τι θα μπορούσατε ενδεχομένως να χρησιμοποιήσετε.
Αλλά αυτό δεν είναι ένα σύνολο εργαλείων. Αυτή είναι μια βιβλιοθήκη που δεν πρόκειται ποτέ να αγγίξετε, διότι η διαλογή μέσα από αυτό θα διαρκέσει πάρα πολύ καιρό. Είμαστε απασχολημένοι με τους ανθρώπους, έτσι έχω υιοθετήσει μια πιο οργανική προσέγγιση σε αυτό: όταν αντιμετωπίζω ένα πρόβλημα, εγώ Google αυτό.
Τα αποσπάσματα είναι συχνά πάρα πολύ καιρό για να απομνημονεύσετε, οπότε αν βρω τον εαυτό μου επανειλημμένα ψάχνοντας για το ίδιο πράγμα, το προσθέτω στο σύνολο εργαλείων μου. Το ίδιο ισχύει για το λογισμικό: εάν είναι κάτι που ξέρετε ότι πρόκειται να χρησιμοποιήσετε πολλά, μπορείτε να το προσθέσετε.
Αυτό δεν σημαίνει ότι δεν πρέπει ποτέ να αφιερώσετε χρόνο για να πειραματιστείτε με κάποια καινούργια "παιχνίδια" ... θα έπρεπε. Αν ακούτε για έναν συγκεκριμένο πόρο που θα μπορούσε να αλλάξει τον τρόπο με τον οποίο εργάζεστε προς το καλύτερο, ελέγξτε το με όλα τα μέσα. Αλλά θυμηθείτε ότι τα εργαλεία είναι καλύτερα διατηρημένα σχετικά μικρά. Θα πρέπει να εστιάσετε στη διατήρηση όσων χρειάζεστε για να καλύψετε τις ανάγκες που συναντάτε τακτικά.
Και πάλι, θα επαναλάβω ότι τα εργαλεία είναι κάτι που πρέπει να κάνετε για να ικανοποιήσετε τις δικές σας ανάγκες. Ακόμα, πρόκειται να απαριθμήσω τα πράγματα στην εργαλειοθήκη μου για να σας δώσω μια καλύτερη ιδέα για το τι να ψάξετε καθώς δημιουργείτε το δικό σας.
CSS προ-επεξεργαστές όπως ΠΙΟ ΛΙΓΟ και SASS κάνετε δύο πράγματα:
Εάν δεν έχετε δοκιμάσει ήδη την κωδικοποίηση του CSS με έναν προ-επεξεργαστή, σας παρακαλώ να το κάνετε τώρα. Τώρα αμέσως. Θα περιμένω.
Μια καλά οργανωμένη λίστα σελιδοδεικτών μπορεί να είναι πολύ χρήσιμη όταν χρειάζεστε κάτι που δεν μπορείτε να αποθηκεύσετε στον τοπικό σκληρό σας δίσκο. Μαρτυρίζω τα πράγματα όπως Γεννήτριες CSS3 , γεννήτριες sprite , δημιουργούς χρωμάτων , και άλλα εργαλεία που με βοηθούν να ολοκληρώσω γρήγορα τις εργασίες που παίρνουν ακριβώς αυτό πολύ περισσότερο όταν τα κάνεις με το χέρι.
Τα συστήματα πλέγματος είναι το 2000. Από τότε που ανταποκρίθηκε ο σχεδιασμός ιστοσελίδων έγινε ένα πραγματικό πράγμα, τα συστήματα πλέγματος έχουν γίνει όλο και πιο σύνθετα για να καλύψουν τις ανάγκες των μυριάδων συσκευών.
Και τι εάν χρειάζεστε ένα προσαρμοσμένο σύστημα πλέγματος; Θα μπορούσατε να χτυπήσετε έναν από τους πολλούς σε απευθείας σύνδεση ανταποκρινόμενους γεννήτριες του δικτύου, αλλά είναι περιορισμένοι.
Η λύση έρχεται με τη μορφή semantic.gs . Τώρα, ενώ ο συγγραφέας του ονομάζει ένα σύστημα πλέγματος, επιλέγω να το ονομάσω μηχανή διάταξης, επειδή δεν είναι ένα πλέγμα. Πρόκειται για ένα εργαλείο που βασίζεται στην προεπεξεργασία CSS (μπορείτε να το χρησιμοποιήσετε με λιγότερα, SASS και Stylus) και σας επιτρέπει να δημιουργείτε πλέγμα που σας αρέσει, σταθερού πλάτους ή απόκρισης.
Το μόνο που έχετε να κάνετε είναι να αλλάξετε ορισμένους αριθμούς σε ένα αρχείο .less (ή SASS, κ.λπ.) και να πάτε.
Emmet είναι μια συλλογή από plugins που μετατρέπουν συντομεύσεις σε πλήρεις γραμμές κώδικα, τόσο σε HTML όσο και σε CSS.
Βασικά, το κάνει αυτό:
div>ul>li*3>aΣε αυτό:
- https://github.com/purplefish32/sublime-text-2-wordpress" class=external rel=nofollow> αυτό για το WordPress . Οι λειτουργίες του προτύπου του WordPress και οι επιλογές για τις λειτουργίες.php μπορεί να είναι δύσκολο να θυμηθούν, γι 'αυτό είναι μια σωτηρία ζωής.
jQuery plugins
Όπως είπα και πριν, δεν είμαι πραγματικός προγραμματιστής. Έτσι, όταν απαιτείται οποιοδήποτε είδος προηγμένης λειτουργικότητας animation ή UI, αλλά όχι τόσο πολύ για να δημιουργηθεί ένα πλαίσιο που αξίζει τον κόπο, γυρίζω σε μεμονωμένα plugins.
Μερικά από τα αγαπημένα μου είναι:
- Scrollto.js : μια ομαλή δέσμη κύλισης.
- idTabs : για όταν χρειάζεστε κάποιο είδος UI με καρτέλες.
- Υπεραστικά : όταν χρειάζεστε μια παρουσίαση ολόκληρης της σελίδας.
- ResponsiveSlides.js : τι λέει το όνομα. Πρόκειται για ένα ρυθμιστικό εικόνας που ανταποκρίνεται. Τι περισσότερο θα μπορούσατε να θέλετε;
Δεν είναι ποτέ πολύ νωρίς για να έχετε τη δική σας προσωπική βιβλιοθήκη χρήσιμων πραγμάτων.
Ποια εργαλεία θα θέλατε να δείτε στη εργαλειοθήκη σας; Ποιους πόρους δεν θα μπορούσατε να ζήσετε χωρίς; Ενημερώστε μας στα σχόλια.
Προτεινόμενη εικόνα / μικρογραφία, μαθηματικό εργαλείο εικόνας μέσω του Marc Kjerland.