Редактируйте свои CSS-проекты в браузере с помощью CSS George

Вы когда-нибудь хотели вносить прямые изменения в вашем браузере, не переключаясь обратно на ваши файлы CSS? Одним из решений является Chrome Developer Tools, но некоторые разработчики предпочитаю более простой рабочий процесс.

Это где CSS George входит. Это бесплатно инструмент для редактирования в браузере работает поверх МЕНЬШЕ и это инициировано простой файл JavaScript.

Большинство разработчиков предпочитают браузерный редактор Поскольку не все используют прекомпилятор LESS. Но CSS Джордж работает в МЕНЬШЕЙ среде которые могут быть установлены быстро через нпм.

Если у вас установлен npm, вы можете запустить этот простой код: добавить исходные файлы к вашему текущему проекту:

 Установка npm --save-dev css-george 

Или вы можете тянуть George.js файл из GitHub, где он хранится вместе со всеми другими исходными файлами. Весь проект бесплатный и с открытым исходным кодом, так что вы можете скачать полную копию из GitHub, если вы не хотите использовать npm.

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

С этого экрана вы можете редактировать переменные LESS используется для всего от цветов до размеров шрифта или семейств шрифтов.

Это где плагин МЕНЬШЕ становится необходимостью потому что вы должны сказать CSS Джордж какие переменные включать. Как только они настроены, вы можете просто откройте редактор браузера CSS George и поехать в город.

Я надеюсь, что очевидно, что этот инструмент не следует быть включенным во время выполнения. Если вы специально не хотите, чтобы посетители изменить цвет и стиль страницы, что вообще не очень хорошая идея. Но для локальное тестирование, CSS George - это редкий инструмент, который предлагает утилиту для всех разработчиков веб-интерфейса..

Вы можете увидеть это в прямом эфире на демонстрационной странице CSS George, или скачать полную копию через npm или из репозитория GitHub.