Uređivanje CSS dizajna u pregledniku pomoću CSS-a George

Jeste li ikada željeli izravno uređivanje u pregledniku bez vraćanja na CSS datoteke? Jedno rješenje su alati za razvojne programere za Chrome, ali neki razvojni programeri preferiraju jednostavniji tijek rada.

To je gdje CSS George dolazi besplatno alat za uređivanje preglednika djela na vrhu MANJE i pokreće ga jednostavna JavaScript datoteka.

Većina programera preferira a uređivač utemeljen na pregledniku jer svi ne koriste LESS pretkompilator. Ali CSS George radi na LESS okruženju koji se može brzo instalirati putem npm.

Ako imate instaliran npm, možete pokrenuti ovaj jednostavan kod dodajte izvorne datoteke u vaš trenutni projekt:

 npm install --save-dev css-george 

Ili možete povuci George.js datoteka od GitHub gdje je smještena uz sve ostale izvorne datoteke. Cijeli projekt je slobodan i otvoren za sve preuzeti punu kopiju od GitHub ako ne želite koristiti npm.

Sa .js datoteku dodanu u zaglavlje web-lokacije, možete početi izvršava Georgeove funkcije izravno iz preglednika. Do otvorite prozor za uređivanje, kliknite tipku tilda koja je dostupna iz Shift + 'koja se nalazi u gornjem lijevom kutu većine tipkovnica. novi prozor trebao bi se pojaviti tako da izgleda ovako:

Na ovom zaslonu možete uredite varijable LESS koristi se za sve, od boja do veličine fonta ili obitelji fontova.

Ovdje je LESS plugin postaje nužnost jer morate reći CSS George koje varijable treba uključiti. Jednom kad su postavljeni, možete samo otvorite uređivač preglednika CSS George i idi u grad.

Nadam se da je očito da je ovaj alat ne bi trebalo biti uključeni u vrijeme izvođenja. Osim ako posebno ne želite dopustiti posjetiteljima uredite boju i stil stranice, što općenito nije dobra ideja. Ali za lokalno testiranje, CSS George je rijedak alat koji nudi program za sve programere.

Možeš vidjeti ga uživo na CSS George demo stranici, ili preuzeti punu kopiju preko npm ili iz GitHub repo-a.