Upravte své CSS vzory In-Browser s CSS George

Už jste někdy chtěli provádět přímé úpravy ve vašem prohlížeči bez přepnutí zpět do souborů CSS? Jedním z řešení jsou Nástroje pro vývojáře Chrome, ale někteří vývojáři dávají přednost jednoduššímu pracovnímu postupu.

To je tam kde CSS George přichází v editačním nástroji prohlížeče funguje na vrcholu LESS a je iniciována a jednoduchý JavaScript soubor.

Většina vývojářů preferuje editor založený na prohlížeči protože ne každý používá předkompilátor LESS. Ale CSS George běží v prostředí LESS které lze rychle nainstalovat přes npm.

Pokud máte nainstalovaný npm, můžete tento jednoduchý kód spustit přidat zdrojové soubory k vašemu aktuálnímu projektu:

 npm install --save-dev css-george 

Nebo můžete vytáhněte George.js soubor z GitHubu, kde je umístěn vedle všech ostatních zdrojových souborů. Celý projekt je zdarma a open source, takže můžete stáhnout úplnou kopii z GitHubu, pokud nechcete používat npm.

S .js soubor přidán do záhlaví webu, můžete začít vykonávání George funkcí přímo z prohlížeče. Na otevřete okno editoru, klikněte na tlačítko tilde, které je přístupné z Shift + 'umístěného v levém horním rohu většiny klávesnic. A nové okno by mělo vypadat, že vypadá takto:

Z této obrazovky můžete editovat proměnné LESS používá se pro vše od barev po velikosti písma nebo rodiny fontů.

Zde je doplněk LESS stává nutností protože musíte říct CSS George které proměnné zahrnout. Jakmile jsou nastaveny, můžete prostě otevřete editor prohlížeče CSS George a jít do města.

Doufám, že je zřejmé, že tento nástroj neměl by být zahrnuta za běhu. Pokud nechcete, aby návštěvníci upravit barvu a styl stránky, obecně není dobrý nápad. Ale pro místní testování, CSS George je vzácný nástroj, který nabízí nástroj pro všechny vývojáře frontendu.

Můžeš vidět to žít na demo stránce CSS George, nebo stáhnout úplnou kopii přes npm nebo z repo GitHub.