Автоматический экспорт исходника Sketch в HTML и CSS код
Launchpad – это плагин для Sketch, который позволяет дизайнерам публиковать реальные сайты непосредственно из Sketch. Наш процесс преобразования дизайна Sketch в веб-сайт включает в себя много шагов. В основном, мы конвертируем артборды и слои Sketch в пакет файлов, который включает в себя HTML, CSS, изображения и файлы шрифтов, готовые к развертыванию. Дизайнеры и разработчики работают вместе, чтобы побороть … преступность?
Размещайте у нас или экспортируйте его
После создания файлов мы проводим множество оптимизаций для повышения скорости загрузки сайта. Такие вещи, как архивирование текстовых файлов, оптимизация PNG-файлов, использование заголовков Cache-Control для кеширования в браузере на наших серверах хостинга и многое другое. Тем не менее, иногда наши клиенты заинтересованы в экспорте пакета файлов для размещения на своем хостинге или добавлении к нему некоторой пользовательской логики. ?? Мы считаем, что дизайн принадлежит вам. И хотя мы призываем вас размещать его на наших быстрых серверах, если вы хотите его экспортировать, то это ваше право. В этой статье мы рассмотрим, как экспортировать ваш файл Sketch в кода HTML и как он выглядит. Если вы хотите узнать, как сделать ваш сайт отзывчивым, добавить видео, ссылки, эффекты и многое другое, изучите эти документы, или начните с этого урока 101.
Как экспортировать код
Ну, это довольно просто, нажмите Export HTML Code. http://doe.myportfolio.design/ А вот видео руководство (4:10): Видео руководство — Экспорт Sketch в HTML, используя Launchpad
Файлы верстки
Файлы верстки – это zip-файл, содержащий HTML-файлы, CSS-файлы, изображения и шрифты. Пример пакета экспортированного файла Sketch в HTML — Скачать Вы можете открыть HTML-файлы локально в своем браузере. Если вы откроете файлы в текстовом редакторе, вы увидите хорошо структурированный HTML и CSS.
Готовы начать?
Скачайте Launchpad здесь, изучите документы или начните с этого урока 101.
Часто задаваемые вопросы
Для того, чтобы ваш сайт был идеальным до пикселя, загружался очень быстро, при этом был чистый и читаемый – мы подготовили для вас некоторые решения со стилями кода.
Почему абсолютное позиционирование?
Разработчики склонны использовать относительное позиционирование в CSS, а Launchpad по умолчанию создает CSS с абсолютным позиционированием. Обеспечивает высокую точность, максимально приближая ваш дизайн в браузере к идеальному до пикселя. Вероятно, вы вряд ли увидите разрыв строки, где вы этого ожидали (минус относительного позиционирования).
Как работать с динамическим контентом?
Обычно большая часть вашего контента статична, а не динамична – например, логотипы, заголовки, кнопки меню, фоны и т. д. Однако, если вы передаете экспортированный код разработчику и вам нужно, чтобы слои перемещались относительно друг друга, просто используйте функцию стеков (Stacks). Когда вы используете стеки, слои расширяются и давят друг на друга. Скомпилированный CSS использует Flex—boxes, а не абсолютную позицию. Стеки также поддерживают переопределение символов для текста и скрывают слои для коррекции. Классно, что это также видно внутри Sketch ? Ага, вы можете увидеть, как это работает в Sketch
Создание HTML-компонента
В каталоге компонентов Oracle Content Management можно создать новый локальный компонент, а затем построить HTML-компонент, добавив и изменив файлы в папке активов.
Чтобы создать и построить HTML-компонент, выполните указанные ниже действия.
- Создайте компонент и назовите его HTML Component .
.wrapper < text-align: center; >.box < display: inline-block; position: relative; width: 200px; height: 200px; padding:0px 10px 10px 10px; background: transparent; border-width:1px; border-style:solid; border-radius: 5px; border-color:#CCCCCC; z-index: 0; margin: 2px 2px 2px 2px; transition: all .15s ease-in-out; >.box:hover < background: #9CC; z-index: 100; transform: scale(1.2,1.2); box-shadow: 0 5px 10px 0 rgba(0,0,0,.2); >.title < color:red; >.text
/* globals define */ define(['jquery', './mustache.min', 'text!./render.html', 'css!./design.css'], function($, Mustache, template, css) < 'use strict'; // ---------------------------------------------- // Create a Mustache-based component implemention // ---------------------------------------------- var SampleComponentImpl = function(args) < this.SitesSDK = args.SitesSDK; // Initialze the custom component this.createTemplate(args); this.setupCallbacks(); >; // create the template based on the initial values SampleComponentImpl.prototype.createTemplate = function(args) < // create a unique ID for the div to add, this will be passed to the callback this.contentId = args.id + '_content_' + args.viewMode; // create a hidden custom component template that can be added to the DOM this.template = '' + template + ''; >; SampleComponentImpl.prototype.updateSettings = function(settings) < if (settings.property === 'customSettingsData') < this.update(settings.value); >>; SampleComponentImpl.prototype.update = function(data) < this.data = data; this.container.html(Mustache.to_html(this.template, this.data)); >; // // SDK Callbacks // setup the callbacks expected by the SDK API // SampleComponentImpl.prototype.setupCallbacks = function() < // // callback - render: add the component into the page // this.render = $.proxy(function(container) < this.container = $(container); this.SitesSDK.getProperty('customSettingsData', $.proxy(this.update, this)); >, this); // // callback - SETTINGS_UPDATED: retrive new custom data and re-render the component // this.SitesSDK.subscribe(this.SitesSDK.MESSAGE_TYPES.SETTINGS_UPDATED, $.proxy(this.updateSettings, this)); // // callback - dispose: cleanup after component when it is removed from the page // this.dispose = $.proxy(function() < // nothing required >, this); >; // ---------------------------------------------- // Create the factory object for your component // ---------------------------------------------- var sampleComponentFactory = < createComponent: function(args, callback) < // return a new instance of the component return callback(new SampleComponentImpl(args)); >>; return sampleComponentFactory; >);
Чтобы убедиться в построении HTML-компонента (контрольная точка 1), выполните указанные ниже действия.
- Убедитесь, что в папке assets в компоненте содержатся следующие пять файлов:
- design.css
- mustache.min.js
- render.html
- render.js
- settings.html
- Добавьте новый HTML-компонент на страницу своего тестового сайта. В редакторе в режимах редактирования и предварительного просмотра компонент должен отображаться на странице следующим образом: Режим редактирования
Описание иллюстрации GUID-17434B91-A25C-46EA-98D6-1A82CDA2D260-default.png
Режим предварительного просмотра
Описание иллюстрации GUID-DF2B9038-2774-49AC-A92F-A893F59D5D63-default.png
Один CSS файл или несколько на сайт?
Выгуглить нормально не смог. Как делаете вы? Нашел несколько вариантов:
1. Для каждой страницы по CSS.
2. Для каждой страницы по CSS, но к каждой странице подключается не он, а сборщик, который их сливает. Какие есть сборщики? Насколько удобно их использовать?
3. Один CSS на все страницы. Через что оптимизировать? После оптимизации насколько удобно такой код поддерживать?
4. Один CSS для общих стилей (для хедера и футера, модальных окон и тэдэ), для специфического содержания еще один CSS файл — итого два.
Еще кто-то писал про препроцессоры — чем они могут помочь? Какие еще есть варианты?
Не знаю как лучше сделать.
- Вопрос задан более трёх лет назад
- 3533 просмотра
2 комментария
Простой 2 комментария
Сергей delphinpro @delphinpro Куратор тега CSS
Выгуглить нормально не смог.
Ну хоть врать-то не надо. Просто скажи «мне лень гуглить, раскажите в тысячный раз, как нужно делать».
Решения вопроса 0
Ответы на вопрос 8
i’m sexy and i know it
В исходниках для удобства отдельные файлы для страниц, секций, блоков или даже элементов.
На выходе 1 общий минифицированный и оптимизированный файл на все страницы.
По файлу на каждую страницу — полный бред. Псевдооптимизация, не дающая значимого прироста в скорости загрузки.
Ответ написан более трёх лет назад
Нравится 5 3 комментария
Teo Mart @Teodor_Draizer Автор вопроса
А чем сливать файлы? Препроцессором типа sass?
Teo Mart, да, импорт всех файлов в один главный, и его автокомпиляция при изменении любого.
Алексей Уколов @alexey-m-ukolov Куратор тега CSS
Один общий файл инвалидиируется в кеше при каждом чихе и клиенту нужно заново качать всё. Это значительно влияет на скорость загрузки и не является псевдооптимизацией.
Как по мне, наиболее предпочтительным является использование одного css-файла. Почему? Во-первых, 1 файл = 1 http-запрос к серверу (чем меньше запросов, тем быстрее грузится страница). Во-вторых, при первом посещении сайта css-файл закешируется, и при переходе на другие страницы, раз этот файл общий для всех, не придётся грузить никакие стили. В-третьих, меньше мороки с тем, куда какие файлы подключать.
Ну и напоследок, если вы интересуетесь оптимизацией загрузки веб-страниц, то посмотрите в сторону critical css — когда стили первого экрана (то есть той секции, которая возникает перед глазами пользователя сразу при загрузке) выносятся непосредственно в html-разметку, способствуя более быстрой отрисовке веб-страницы.
P.S. На этапе разработки стили, относящиеся к конкретной секции/странице, для удобства лучше держать в отдельных файлах (тут на помощь приходят препроцессоры либо postcss), а затем для продакшена собирать их с помощью сборщика в единый css.
Ответ написан более трёх лет назад
Нравится 2 1 комментарий
Programmir @Programmir
Тоже использую один файл. Просто комментирую блоки. Зачем использовать несколько файлов мне непонятно.
Алексей Уколов @alexey-m-ukolov Куратор тега CSS
Как делаете вы?
Один файл с общими стилями всего проекта, ещё один с общими стилями раздела (шапка, подвал, специфические стили админки и т.п.) и ещё один файл со стилями специфичными для страницы.
Если настроено HTTP/2, то последний файл можно заменить россыпью файлов каждого блока со страницы. Но нужно замерить производительность такого подхода в каждом конкретном случае.
к каждой странице подключается . сборщик, который их сливает
Какой ещё такой сборщик?
Через что оптимизировать?
Через что хотите.
После оптимизации насколько удобно такой код поддерживать?
Поддерживаете вы неминимизированные исходники, поэтому настолько же, насколько и до.