Δέκα εργαλεία οδηγού στυλ για τους σχεδιαστές ιστοσελίδων - Best of

ΕΝΑ ζωντανό οδηγό στυλ είναι ένα τεκμηρίωση στοιχείων και μοτίβα UI που συλλέγονται από έναν ιστότοπο ή μια εφαρμογή με σκοπό να επιτρέπουν στους προγραμματιστές να χρησιμοποιούν συνεπή στυλ σε ολόκληρο το έργο τους. Στο παρελθόν, οι προγραμματιστές δημιούργησαν εγχειρίδια στυλ χειροκίνητα, πράγμα που είναι πολύ έργο. Μετά από λίγο, άρχισαν να αυτοματοποιούν τη ροή εργασίας και τα εργαλεία οδηγού στυλ που μετασχηματίζουν τον κωδικό της μπροστινής γραμμής καλά οργανωμένες βιβλιοθήκες UI έχουν αρχίσει να εμφανίζονται.

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

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

1. Με Διαισθάνεσαι

Αυτό το εργαλείο είναι πολύ διασκεδαστικό: απλά επικολλήστε το σύνδεσμο της ιστοσελίδας που θέλετε να αναλύσετε και παρακολουθήστε καθώς ο οδηγός στυλ του δημιουργείται με ένα κλικ ενός ποντικιού. Με Με αστράφτει, μπορείτε γρήγορα να αποκτήσετε μια επισκόπηση των μοτίβων ενός ιστότοπου, συμπεριλαμβανομένων των χρωμάτων, των γραμματοσειρών, του μεγέθους και της απόστασης. Μόλις ολοκληρωθεί η διαδικασία, μπορείτε κατεβάστε τον οδηγό στυλ σε μορφή PDF.

2. Κατασκευαστής

Κατασκευαστής σας επιτρέπει να δημιουργήσετε το δικό σας εργαλείο UI, να οργανώσετε το σύστημα σχεδιασμού σας και να δημιουργήσετε έναν οδηγό στυλ από τον κώδικα εργαλείων σας. Εάν εργάζεστε σε μια ομάδα, μπορείτε να γράψετε την τεκμηρίωση στο Markdown για να διευκολύνετε τη χρήση άλλων προγραμματιστών. Μπορεί να σας βοηθήσει οργανώστε τη ρουτίνα σχεδιασμού / κωδικοποίησης με τον τρόπο που σας αρέσει.

3. Προτεραιότητα

Πρόβλεψη Περιλαμβάνει τα πάντα, από ψηφιακές mockups έως wireframing. Έχουν επίσης ένα εργαλείο καθοδήγησης στυλ που προσφέρει μια καθαρή μινιμαλιστική διαδικασία σχεδιασμού χωρίς καμία ταλαιπωρία. Μπορείτε να εγγραφείτε δωρεάν και να εισαγάγετε όλες τις απαραίτητες πληροφορίες με μη αυτόματο τρόπο. Η διαδικασία πρέπει να περιλαμβάνει την παλέτα χρωμάτων, τις επιλογές γραμματοσειράς, τα εικονίδια, τα λογότυπα, ενδεχομένως τα συνθήματα ή το προτιμώμενο αντίγραφο ιστού.

4. Aigis

Με Aigis, μπορείτε να δημιουργήσετε οδηγούς στυλ από οποιαδήποτε αρχεία κειμένου (π.χ.. .css, .scss, .στυλ, .md). Μπορείτε επίσης να γράψετε τεκμηρίωση στο Markdown και να προσαρμόσετε το θέμα του ιστότοπού σας.

5. Ολόγραμμα

Ολόγραμμα δημιουργήθηκε από την Trulia και αποτελεί μια εξαιρετική λύση για τη δημιουργία οδηγών στυλ. Είναι ένα στολίδι του Ruby αναλύει σχόλια στο CSS σας για να δημιουργήσετε τρομερούς οδηγούς στυλ. Το ολόγραμμα έχει ένα templating σύστημα με μερικά βασικά στυλ και πλοήγηση για να κάνει τον οδηγό στυλ σας ακόμα πιο εύκολο.

6. Styledown

Με Styledown, μπορείτε να γράψετε οδηγούς στυλ CSS με ευκολία, όπως είναι α Γεννήτρια οδηγού στυλ βασισμένη σε σήμανση. Θα λειτουργήσει με τις περισσότερες ρυθμίσεις ανάπτυξης ιστού, καθώς είναι ουδέτερη για την πλατφόρμα. Απαιτεί πολύ λίγα για να το ξεκινήσει. Επίσης, τα σχόλια που πρέπει να προσθέσετε στο CSS σας είναι πολύ ελάχιστα. Μπορείτε να δημιουργήσετε την τεκμηρίωσή σας CSS σε ενσωματωμένα σχόλια CSS ή ως ξεχωριστό αρχείο Markdown.

7. KSS

KSS (Φύλλα στυλ Knyle) είναι κατά κύριο λόγο α προδιαγραφές τεκμηρίωσης και μια μορφή οδηγού στυλ που έχει τη δική του σχολιάζοντας σύνταξη. Το KSS περιλαμβάνει επίσης μια βιβλιοθήκη Ruby που αναλύει .sass, .scss, και .css αρχεία που τεκμηριώνονται με τις οδηγίες του KSS σε έναν προσεγμένο οδηγό στυλ. Το KSS είναι για πιο προχωρημένους χρήστες και επαγγελματικές ομάδες, καθώς η δημιουργία ενός οδηγού στυλ απαιτεί κωδικοποίηση γνώσεων.

8. Γεννήτρια οδηγού στυλ SC5

Με το Γεννήτρια οδηγού στυλ SC5 μπορείτε να δημιουργήσετε και να επεξεργαστείτε οδηγούς στυλ απευθείας στο πρόγραμμα περιήγησης. είναι με βάση το KSS με μερικά δροσερά χαρακτηριστικά, όπως ένα UI του AngularJS που σας βοηθά να δείτε, να αναζητήσετε και να δοκιμάσετε τα στυλ σας. Το SC5 χρησιμοποιεί την ίδια σημείωση εγγράφου με το KSS. Υποστηρίζει SASS, LESS, PostCSS και καθαρά φύλλα στυλ CSS.

9. Styledocco

StyleDocco είναι μια εύχρηστη εφαρμογή Node.js που δημιουργεί οδηγούς στυλ από τα φύλλα στυλ. Μπορείτε να το εγκαταστήσετε με npm. Στο δημιουργημένο styleguide, το StyleDocco εμφανίζει μια προεπισκόπηση με τα στυλ που έχετε εφαρμόσει και ένα παράδειγμα του κώδικα HTML.

Στην αρχική σελίδα του StyleDocco, μπορείτε να βρείτε δύο παραδείγματα οδηγών στυλ, ένα που δημιουργείται από ένα προεπιλεγμένο φύλλο στυλ και ένα άλλο που δημιουργείται από έναν ιστότοπο Bootstrap. Τα παραδείγματα μπορούν επίσης να σας βοηθήσουν να πάρετε τη σύνταξη της τεκμηρίωσης που χρησιμοποιεί η SytleDocco.

10. Lab Pattern

Εργαστήριο Pattern είναι μια συλλογή εργαλείων που σας βοηθούν να δημιουργήσετε ένα αρθρωτό σύστημα σχεδιασμού. Το Pattern Lab είναι μια προσαρμοσμένη γεννήτρια στατικών ιστοτόπων που συρράπτει μαζί όλα τα στοιχεία στυλ σε έναν ιστότοπο και μορφοποιεί πρότυπα και σελίδες από αυτά. Μπορεί να χρησιμεύσει ως έργο του έργου σας βιβλιοθήκη μοτίβων και οδηγός στυλ για τα σύνολα. Το Pattern Lab σας επιτρέπει να βλέπετε ταυτόχρονα τα στοιχεία στυλ αφηρημένα και στο πλαίσιο.