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

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]

Подпишитесь на рассылку

Раз в неделю мы будем присылать на почту дайджест с лучшими материалами

Похожие записи

Полное руководство по дизайну iOS 9 в Sketch

iOS сильно выросла в течение последних лет. С ее iOS 9 апгрейдом, Apple представил новый системный шрифт под названием San Francisco, 3D Touch и многозадачность на iPad. В Xcode вы найдете Stack Views, фантастический инструмент для более адаптивных макетов, гораздо проще Auto Layout.

Самое подробное руководство по дизайну в Sketch

Работая со Sketch последние три года, я освоил ряд ключевых техник, которые значительно улучшили мой рабочий процесс. Так как я, помимо рисования, также обожаю прототипировать и кодить, мне нужен инструмент для быстрого выполнения дизайн-проектов и легкой генерации исходников. Sketch вместе с его плагинами и другие инструменты для прототипирования полностью справляются с этой задачей. Часть 1 Часть 3 Часть 4

Серия уроков Sketch (часть1 из 5): Настройка Sketch

Первое что нам следует изучить, это настройка Sketch. Если вы только начали создавать дизайны для веб и являетесь новичком в Sketch или Photoshop, или вы просто разработчик, желающий включить UI-дизайн в свой репертуар, эти простые уроки по настройке идеально подойдут для быстрого ознакомления с работой Sketch. Часть 2 Часть 3 Часть 4 Часть 5