Rediger CSS Designs In-Browser med CSS George

Har du noen gang ønsket å gjør direkte redigeringer i nettleseren din uten å bytte tilbake til CSS-filene dine? En løsning er Chrome Developer Tools, men noen utviklere foretrekker en enklere arbeidsflyt.

Det er hvor CSS George kommer inn. Dette gratis redigeringsverktøy i nettleseren virker på toppen av mindre og det er initiert av a enkel JavaScript-fil.

De fleste utviklere foretrekker en nettleserbasert editor siden ikke alle bruker MINDRE precompiler. Men CSS George kjører på et mindre miljø som kan installeres raskt via npm.

Hvis du har installert npm, kan du kjøre denne enkle koden til legg til kildefilene til ditt nåværende prosjekt:

 npm installere - save-dev css-george 

Eller du kan trekk på George.js fil fra GitHub hvor den er vert sammen med alle andre kildefiler. Hele prosjektet er gratis og åpen kildekode så du kan last ned en full kopi fra GitHub hvis du ikke vil bruke npm.

Med .js fil lagt til nettstedet ditt header, kan du starte utfører George-funksjoner rett fra nettleseren. Til åpne redigeringsvinduet, klikk på tilde-tasten som er tilgjengelig fra Shift + 'plassert øverst til venstre på de fleste tastaturer. EN nytt vindu skal vises som ser slik ut:

Fra dette skjermbildet kan du rediger de mindre variablene brukes til alt fra farger til skriftstørrelser eller skriftfamilier.

Dette er hvor MINDRE plugin blir en nødvendighet fordi du må fortelle CSS George hvilke variabler å inkludere. Når de er satt opp, kan du bare åpne CSS George-nettlesereditoren og gå til byen.

Jeg håper det er åpenbart at dette verktøyet burde ikke bli inkludert i kjøretid. Med mindre du spesielt ønsker å gi besøkende rediger sidefarge og stil, som generelt ikke er en god ide. Men for lokal testing, CSS George er et sjeldent verktøy som tilbyr verktøy for alle frontend-utviklere.

Du kan se det live på CSS George demo siden, eller last ned en full kopi via npm eller fra GitHub repo.