Rediger din CSS Designs In-Browser med CSS George

Har du nogensinde ønsket at foretage direkte redigeringer i din browser uden at skifte tilbage til dine CSS-filer? En løsning er Chrome Developer Tools, men nogle udviklere foretrækker en enklere arbejdsgang.

Det er der CSS George kommer ind. Dette gratis redigeringsværktøj i browser arbejder på toppen af ​​mindre og det er initieret af a simpel JavaScript-fil.

De fleste udviklere foretrækker en browserbaseret editor da ikke alle bruger den mindre precompiler. Men CSS George kører på et mindre miljø som kan installeres hurtigt via npm.

Hvis du har installeret npm, kan du køre denne enkle kode til Tilføj kildefilerne til dit nuværende projekt:

 npm installer - save-dev css-george 

Eller du kan trække George.js fil fra GitHub hvor det er vært sammen med alle de andre kildefiler. Hele projektet er gratis og open source, så du kan download en fuld kopi fra GitHub, hvis du ikke vil bruge npm.

Med .js fil tilføjet til dit websted header, kan du starte udfører George funktioner lige fra browseren. Til Åbn redigeringsvinduet, Klik på tilde-tasten, som er tilgængelig fra Shift + 'placeret øverst til venstre på de fleste tastaturer. EN nyt vindue skal vises som ser sådan ud:

Fra denne skærm kan du rediger de mindre variabler bruges til alt fra farver til skrifttypestørrelser eller skrifttypefamilier.

Dette er hvor MINDRE plugin bliver en nødvendighed fordi du skal fortælle CSS George hvilke variabler der skal medtages. Når de er oprettet, kan du bare Åbn CSS George browser editor og gå til byen.

Jeg håber det er indlysende, at dette værktøj burde ikke inkluderes i løbetid. Medmindre du specifikt ønsker at lade besøgende rediger sidens farve og stil, som generelt ikke er en god ide. Men for lokal testning, CSS George er et sjældent værktøj, der tilbyder værktøj til alle frontend-udviklere.

Du kan se det live på CSS George demosiden, eller download en fuld kopi via npm eller fra GitHub repo.