Редактирайте CSS дизайните в браузъра с CSS George

Искали ли сте някога направете директни редакции в браузъра си, без да се връщате към CSS файловете си? Едно от решенията е инструментите за разработчици на Chrome, но някои разработчици предпочитате по-прост работен процес.

Ето къде CSS Джордж идва. Това безплатно инструмент за редактиране в браузъра върши работа отгоре на по-малко и е иницииран от a прост JavaScript файл.

Повечето разработчици предпочитат a редактор в браузър тъй като не всеки използва LESS предкомпилатора. Но CSS Джордж се изпълнява в по-малка среда които могат да се инсталират бързо чрез npm.

Ако имате инсталиран npm, можете да изпълните този прост код добавете изходните файлове към текущия ви проект:

 npm install --save-dev css-george 

Или можеш дръпнете George.js досие от GitHub, където е хоствано заедно с всички други източници. Целият проект е свободен и с отворен код, така че можете изтеглете пълно копие от GitHub, ако не искате да използвате npm.

С .JS файл, добавен към заглавката на сайта ви, можете да започнете изпълнява функции на Джордж направо от браузъра. Да се отворете прозореца на редактора, щракнете върху бутона тилда, който е достъпен от Shift + ', намиращ се в горния ляв ъгъл на повечето клавиатури. А нов прозорец трябва да се показва, че изглежда по следния начин:

От този екран можете редактирайте LESS променливите използва се за всичко - от цветове до шрифтове или семейства на шрифтове.

Това е мястото, където LESS плъгин става необходимост защото трябва да кажете на CSS Джордж кои променливи да се включат. След като бъдат настроени, можете просто отворете редактора на CSS Джордж и отидете в града.

Надявам се, че е очевидно, че този инструмент не трябва да бъдат включени по време на изпълнение. Освен ако не искате специално да споделите посетителите редактирайте цвета и стила на страницата, което обикновено не е добра идея. Но за локални тестове, CSS George е рядко средство, което предлага помощ за всички програмисти на frontend.

Можеш виж го на живо на демонстрационната страница на CSS George, или изтеглете пълно копие чрез npm или от репо GitHub.