CSSketch — полностью открытый и свободный, так что можете смело использовать его для своих разработок!

Скринкаст

CSSketch - CSS для Sketch 3. Дизайн с помощью стилей CSS

Скачивание и установка

CSSketch можно скачать через Sketch Toolbox. Это самый удобный способ для установки, так как плагин будет всегда обновляться автоматически.

Скачайте и установите вручную

Скачайте архив CSSketch.

Есть два способа установки:

Способ 1: Откройте CSSketch. sketchplugin, и Sketch спросит, хотите ли вы его установить

Способ 2: Пока Sketch 3 открыт, перейдите в Plugins -> Reveal Plugins Folder, и поместите CSSketch. sketchplugin в эту папку.

Использование CSSketch

  • Чтобы запустить CSSketch, вы должны запустить опцию с панели меню каждый раз, когда запускаете Sketch 3. Плагин можно открыть с меню Plugins -> CSSketch -> Layout Layers.
  • Список стилей настроен постранично. Вы можете подключить список стилей к нужной странице через меню Plugins -> CSSketch -> Set Page’s Stylesheet. Как только выполнена эта настройка, просто внесите изменения в список стилей и сохраните, чтобы увидеть результат.
  • Посмотрите в папку Examples/ для примеров того, что сейчас доступно в функционале плагина.
  • Пожалуйста, помните: пока что управление некоторыми правилами CSS не доступно.

Взможности

  • Поддержка Less: Поддерживаются переменные и функции. Больше информации на LessCSS.org
  • Автоматическое определение изменений в таблице стилей: Один раз задайте таблицу стилей, и все. Изменения фиксируются и применяются, как только вы сохраняете таблицу стилей.
  • Движок Webkit: CSSketch работает на движке WebKit, тот же код лежит в основе Safari и Google Chrome.
  • Иконка на панели инструментов: После запуска CSSketch на панель инструментов добавляется иконка для быстрого применения изменений.
  • Поддержка песочницы: CSSketch работает с версией Sketch 3 от Mac App Store, а также обычной версией.
  • Путь к таблице стилей хранится в документе: Вам нужно установить путь к таблице стилей только один раз. А затем он хранится в документе для будущего использования.

Поддержка CSS

  • CSSketch использует системную версию WebKit. Обновитесь до версии El Capitan для наилучшей совместимости со стандартами CSS.
  • Все переменные макета должны работать хорошо.
  • Все элементы даны со стандартными значениями по умолчанию для позиции: absolute, top, и left, с их текущими позициями на артборде.
  • Для селекторов: Всем слоям присвоен тип элементов «слой». Атрибут имени присваивает значение названия слоя без классов. Тип атрибута устанавливается как «text» для текста, и «artboard» для артбордов.
  • Поддерживается цвет фона
  • Поддерживаются границы (только сплошные линии)
  • Поддерживается тени
  • Поддерживаются цвета
  • Поддерживается трансформация текста (text-transform)

[dt_button size="big" style="default" animation="none" color_mode="default" icon="" icon_align="left" color="" link="https://github.com/JohnCoates/CSSketch/archive/master.zip" target_blank="true"]Скачать плагин CSSketch[/dt_button]