Επεξεργαστείτε το CSS Designs In-Browser με το CSS George

Θέλατε ποτέ κάνετε άμεσες αλλαγές στο πρόγραμμα περιήγησής σας χωρίς να επιστρέψετε στα αρχεία CSS; Μια λύση είναι τα Εργαλεία προγραμματιστή Chrome, αλλά μερικοί προγραμματιστές προτιμούν μια απλούστερη ροή εργασίας.

Αυτό είναι όπου CSS George έρχεται. Αυτό δωρεάν εργαλείο επεξεργασίας σε πρόγραμμα περιήγησης έργα πάνω από λιγότερο και ξεκινάει από ένα απλό αρχείο JavaScript.

Οι περισσότεροι προγραμματιστές προτιμούν ένα πρόγραμμα περιήγησης που βασίζεται στον browser δεδομένου ότι δεν χρησιμοποιεί ο καθένας τον προ-συγγραφέα LESS. Αλλά CSS George λειτουργεί σε περιβάλλον λιγότερο που μπορεί να εγκατασταθεί γρήγορα μέσω npm.

Αν έχετε npm εγκατεστημένο τότε μπορείτε να εκτελέσετε αυτόν τον απλό κωδικό σε προσθέστε τα αρχεία προέλευσης στο τρέχον έργο σας:

 npm install -save-dev css-george 

Ή μπορείτε τραβήξτε το George.js αρχείο από το GitHub όπου φιλοξενούνται μαζί με όλα τα άλλα αρχεία προέλευσης. Το όλο έργο είναι ελεύθερο και ανοικτό, έτσι μπορείτε κατεβάστε ένα πλήρες αντίγραφο από το GitHub αν δεν θέλετε να χρησιμοποιήσετε npm.

Με το .js αρχείου που προστέθηκε στην κεφαλίδα του ιστότοπού σας, μπορείτε να ξεκινήσετε εκτελώντας λειτουργίες του George από το πρόγραμμα περιήγησης. Προς το ανοίξτε το παράθυρο του προγράμματος επεξεργασίας, κάντε κλικ στο πλήκτρο tilde το οποίο είναι προσβάσιμο από το Shift + 'που βρίσκεται στην επάνω αριστερή γωνία των περισσότερων πληκτρολογίων. ΕΝΑ νέο παράθυρο θα πρέπει να εμφανιστεί κάτι που μοιάζει με αυτό:

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

Αυτό είναι το plugin MESS γίνεται αναγκαιότητα γιατί πρέπει να πείτε στο CSS George ποιες μεταβλητές πρέπει να συμπεριληφθούν. Μόλις δημιουργηθούν, μπορείτε απλά ανοίξτε τον επεξεργαστή περιηγητών CSS George και πηγαίνετε στην πόλη.

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

Μπορείς δείτε το ζωντανό στη σελίδα επίδειξης CSS George, ή κατεβάστε ένα πλήρες αντίγραφο μέσω npm ή από το repo GitHub.