Editați-vă designul CSS în browser cu CSS George

V-ați dorit vreodată? efectuați editări directe în browser-ul dvs., fără a reveni la fișierele dvs. CSS? O singură soluție este Instrumentele pentru dezvoltatori Chrome, dar unii dezvoltatori preferă un flux de lucru mai simplu.

Aici este locul CSS George intră. Acesta este gratuit în instrumentul de editare în browser lucrări pe partea de sus a LESS și este inițiat de a simplu fisier JavaScript.

Cei mai mulți dezvoltatori preferă o editor bazat pe browser deoarece nu toată lumea folosește precompilatorul LESS. Dar CSS George funcționează într-un mediu mai puțin care pot fi instalate rapid prin npm.

Dacă aveți instalat npm, puteți rula acest cod simplu adăugați fișierele sursă la proiectul curent:

 npm instala --save-dev css-george 

Sau puteți trage George.js fişier de la GitHub unde este găzduit alături de toate celelalte fișiere sursă. Întregul proiect este gratuit și open source, astfel încât să puteți descărcați o copie completă de la GitHub dacă nu doriți să utilizați npm.

Cu .js fișier adăugat la antetul site-ului dvs., puteți începe executând funcțiile lui George chiar din browser. La deschideți fereastra editorului, faceți clic pe tasta tilde care este accesibilă de la Shift + "situat în colțul din stânga sus al majorității tastaturilor. A fereastră nouă ar trebui să apară care arată cam așa:

Din acest ecran, poți editați variabilele LESS utilizate pentru totul, de la culori la dimensiuni de fonturi sau familii de fonturi.

Aici este locul în care se află pluginul LESS devine o necesitate pentru că trebuie să-i spui lui George CSS care variabile să includă. Odată ce au fost înființate, puteți doar deschideți editorul de browser CSS George și du-te în oraș.

Sper că este evident că acest instrument nu ar trebui să fie incluse în timpul rulării. Doar dacă doriți să lăsați în mod special vizitatori modificați culoarea și stilul paginii, care, în general, nu este o idee bună. Dar pentru testarea locală, CSS George este un instrument rar care oferă utilitate pentru toți dezvoltatorii frontend.

Poti vezi-o live pe pagina demo CSS George, sau descărcați o copie completă prin npm sau prin repo GitHub.