Автор Тема: Emmet LiveStyle  (Прочитано 11707 раз)

Loac

  • Administrator
  • Сообщений: 605
Emmet LiveStyle
« : Августа 12, 2013, 05:32:35 »
Часто спрашивают про возможность редактирования стилей налету. Ничего, кроме криво работающего LiveReload не было.
Но вдруг засветился Emmet LiveStyle. На первый взгляд все выглядит очень круто.

<a href="http://www.youtube.com/watch?v=iQLhGbkupS4" target="_blank">http://www.youtube.com/watch?v=iQLhGbkupS4</a>

Проект находится в режиме публичной беты. Пока инструмент работает в Google Chrome, Safari и Sublime Text. В будущем планируется поддержка других браузеров.

Возможности

  • Результат виден сразу после внесения изменений — никаких сохранений и обновлений страниц.
  • Не требуется хранить файлы локально, для редактирования их можно открыт напрямую с FTP.
  • Кроссплатформенность.
  • Результат можно просматривать одновременно в нескольких окнах, все изменения будут происходить «на лету». Удобно для тестирования адаптивного дизайна.
  • Можно редактировать одновременно несколько сайтов, например, десктоп и мобильную версию.
  • Легкая установка и работа: достаточно открыть CSS-файл в редакторе и связать его с файлом стилей сайта.

Ниже описан процесс установки для Google Chrome.

  • Для Sublime Text установить Package Control
  • В Sublime Text открыть Command Palette (Ctrl+Shift+P) и выбрать Package Control: Install Package. 
  • В списке найти и установить расширение LiveStyle. 
  • Установить расширение для Google Chrome
  • Открыть в Sublime Text CSS-файлы. 
  • Открыть в браузере страницу для редактирования 
  • Открыть DevTools (Ctrl+Shift+I) и во вкладке LiveStyle связать файлы стилей сайта с открытыми в Sublime Text. Для работы плагина DevTools необходимо держать открытым для каждого окна. 

Описание grokru habrahabr.
« Последнее редактирование: Августа 12, 2013, 05:39:53 от Loac »

ElizabethII

  • Сообщений: 5
Re: Emmet LiveStyle
« Ответ #1 : Июня 10, 2015, 12:06:24 »
Часто спрашивают про возможность редактирования стилей налету. Ничего, кроме криво работающего LiveReload не было.
Но вдруг засветился Emmet LiveStyle. На первый взгляд все выглядит очень круто.

<a href="http://www.youtube.com/watch?v=iQLhGbkupS4" target="_blank">http://www.youtube.com/watch?v=iQLhGbkupS4</a>

Проект находится в режиме публичной беты. Пока инструмент работает в Google Chrome, Safari и Sublime Text. В будущем планируется поддержка других браузеров.

Возможности

  • Результат виден сразу после внесения изменений — никаких сохранений и обновлений страниц.
  • Не требуется хранить файлы локально, для редактирования их можно открыт напрямую с FTP.
  • Кроссплатформенность.
  • Результат можно просматривать одновременно в нескольких окнах, все изменения будут происходить «на лету». Удобно для тестирования адаптивного дизайна.
  • Можно редактировать одновременно несколько сайтов, например, десктоп и мобильную версию.
  • Легкая установка и работа: достаточно открыть CSS-файл в редакторе и связать его с файлом стилей сайта.

Ниже описан процесс установки для Google Chrome.

  • Для Sublime Text установить Package Control
  • В Sublime Text открыть Command Palette (Ctrl+Shift+P) и выбрать Package Control: Install Package. 
  • В списке найти и установить расширение LiveStyle. 
  • Установить расширение для Google Chrome
  • Открыть в Sublime Text CSS-файлы. 
  • Открыть в браузере страницу для редактирования 
  • Открыть DevTools (Ctrl+Shift+I) и во вкладке LiveStyle связать файлы стилей сайта с открытыми в Sublime Text. Для работы плагина DevTools необходимо держать открытым для каждого окна. 

Описание grokru habrahabr.
Если браузер по умолчанию НЕ Хром, то открывается не в Хроме. Как открыть в Хроме при этом не меняя браузер по умолчанию?