Нужно получить список всех шрифтов в макете, чтоб сразу их скачать. 2 способа:
- скрипт https://github.com/frontendbeast/list-fonts
- загрузить на https://assets.adobe.com
Скачиваем. Далее нужно сгенерировать шрифты для веба: https://transfonter.org/
Обязательно отмечаем Family support. Если шрифт популярный (типа Open Sans), отмечаем Add local() rule
Ни в коем случае не отмечаем: Autohint font и Base64 encode.
В большинстве случаем можно генерировать только WOFF, поскольку у него хорошая поддержка: http://caniuse.com/#search=woff.
Менеджер шрифтов Nexus Font — помогает каталогизировать и просматривать шрифты без установки в систему (в т.ч. в Фотошопе и Иллюстраторе).
Все слои с картинками в макете переименовываем по принципу "название.расширение":
- icon.svg
- header.jpg
- something.png
Параллельно с этим следим, чтобы на картинках не было эффектов. Если имеются, снимаем. На сверстанной странице это даст больший простор для анимации.
Далее сохраняем их в отдельную папку рядом с макетом командой Файл => Генерировать => Набор изображений
Проверяем. Картинки, которые сгенерировались не так, как надо, сохраняем вручную.
Скрин настроек для простых иконок - decimal places = 1 Скрин настроек для сложных изображений (логотипов и т.д.) - decimal places = 3+
- Верстать блоками, а не страницами.
- Использовать БЭМ-подобное именование классов.
- Один блок - один неймспейс и один файл стилей.
- Уровень вложенности элементов только ОДИН:
.block__element(не будут раздуваться верстка и стили). - При появлении дополнительных уровней вложенности
.block__element__element2- их надо выносить в другой блок.block2__element2. - Блок не должен никак позиционироваться по отношению к внешнему миру: никаких внешних отступов, а тем более абсолютного позиционирования у блока быть не должно. Позиционирование в потоке - это задача: а) либо каркаса (лэйаута в терминах SMACSS), который окружает блок, б) либо модификаторов блока (.block--offsets).
Как определить блок:
- устоявшийся компонент: хедер, футер, аккордеон, табы, карусель, галерея и т.п.
- контрол: инпут, селект, чекбокс и т.п.
- смысловой блок: отзывы, преимущества и т.п.
- визуальный блок: в макете обычно как-то выделен заголовком, бордером, другим цветом фона, фоновой картинкой и т.п.
- в остальных случаях: если во время верстки у элемента начинают появляться крупные вложенные элементы
.block__element__element2, то, вероятно, их надо выносить в отдельный блок.
Классы не должны состоять из следующих конструкций или содержать эти конструкции в названии:
- ad(v)
- banner
- promo,
- third-party
- и т.п.
Все это слова из стоп-листа Adblock и блоки с такими классами просто будут резаться с установленным Adblock у пользователя.
Если сложно придумать более подходящий неймспейс, то взять за правило тестировать верстку с включенным адблоком. (Хотя это не панацея.)