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

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

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

 

Скринкаст

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

 

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

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

 

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

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

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

Профессия «Дизайнер интерактивных медиа»
Профессия «Дизайнер интерактивных медиа»
Скидка 45% по промокоду UXPUB
Узнать подробнее

Способ 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]

Total
0
Shares
1 комментарий
Добавить комментарий

Ваш адрес email не будет опубликован.

Похожие статьи
Sketch Plugins - Библиотека плагинов для выравнивание элементов, типографики и цветовых палитр
Подробнее

Sketch Plugins – Библиотека плагинов для выравнивание элементов, типографики и цветовых палитр

Sketch Plugins - Эта библиотека плагинов для Sketch используется для работы с горизонтальными/вертикальными сеточными макетами и типографикой. Также здесь представлены дополнительные плагины для масштабирования типографики и генерации цветовых палитр.

Еженедельная рассылка

Одно письмо с лучшими записями за неделю

Total
0
Share