Rediger CSS Designs In-Browser med CSS George

Har du noen gang ønsket å gjøre 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 her CSS George kommer inn. Dette gratis redigeringsverktøyet i nettleseren fungerer på toppen av LESS, og det er initiert av en enkel JavaScript-fil .

De fleste utviklere foretrekker en nettleserbasert redigerer siden ikke alle bruker den MINDRE prekompilatoren. 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 for å legge til kildefilene i ditt nåværende prosjekt:

 npm installere - save-dev css-george 

Eller du kan trekke George.js filen fra GitHub der den er vert sammen med alle andre kildefiler. Hele prosjektet er gratis og åpen kildekode, slik at du kan laste ned en full kopi fra GitHub hvis du ikke vil bruke npm.

Med .js filen lagt til i nettstedet ditt, kan du begynne å utføre George-funksjoner rett fra nettleseren. For å åpne redigeringsvinduet, klikk på tilde-tasten som er tilgjengelig fra Shift + `plassert øverst til venstre på de fleste tastaturer. Et nytt vindu skal vises som ser slik ut:

Fra denne skjermen kan du redigere de mindre variablene som brukes for 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 som skal inkluderes . 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 ikke bør inkluderes i kjøretid . Med mindre du spesielt ønsker å la besøkende redigere sidens farge og stil, som generelt ikke er en god idé. Men for lokal testing er CSS George 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.