Не знаю в чём заключалась проблема, однако, на заре своей работы в MSC я сверстал и натянул на Wordpress новый дизайн сайта для рекламного агентства Мозаика. Из–за того, что в контексте MSC у меня и других сотрудников совершенно не было времени на этот сайт, была достигнута договорённость, по которой я разрабатывал сайт в свободное от основной работы время, как ИП.

Вообще, это был чертовски геморройный проект. Чертовски.

Основная проблема этого сайта заключалась в том, что мне дали несколько psd'шек и jpg и сказали приступай.  Никаких брифов, объяснений и прочего, просто набор макетов.

Таким образом, я был совершенно не в курсе, как задумывались те или иные компоненты, дизайна мобильной версии не было совсем, поэтому, работая над этим сайтом, приходилось часто импровизировать.

В плане организации рабочего процесса, я решил провести небольшой эксперимент, и попытался максимально изолировать компоненты друг от друга, даже на уровне ФС:

component/
  component.njk # основной шаблон компонента
  scss/
    component_styles.scss # scss который будет добавлен в общий style.css
  view/
    component_view.njk # доп. шаблоны используемые в компоненте

К сожалению, на примере этого проекта, мне пришлось отказаться от такой структуры — слишком быстро это начинало тормозить с увеличением количества компонентов.

За исключением этой особенности, это вполне обычные таски — пережать картинки, скомпилировать scss, пройтись postcss, собрать njk шаблоны, ну и webpack+babel прогнать на js файлах.

Из библиотек, я заюзал, привычный уже, susy и некоторые компоненты бутстрапа. Свёрстан сайт целиком по БЭМу.

Геморрой №1

Полноэкранное видео на фоне.

Изначально, вёрстка подразумевала использование <video>. И проблем с полноэкранностью у него нет — задали контейнеру 100vh, а дальше дело техники. Уже в процессе сдачи, выяснилось, что хотят они видео с Youtube туда вставлять, и вот тут меня ждало разочарование.

Уж не знаю почему, но видео с Youtube отчаянно не желало вставать в полный экран — появлялись чёрные полоски по бокам. Ни один метод, найденный в сети, не помог мне побороть эту проблему, поэтому всё же оставили <video>.

Геморрой №2

Скачущие контейнеры.

Оооо, это была довольно неприятная проблема. Дизайн подразумевал, что сайт не целиком находится в контейнере, а «местечково». Т.е. какие–то компоненты должны жить в контейнере, а какие–то должны растягиваться на всю ширину.

Как–бы, это не проблема, если это не элементы типографики, добавляемые через wysiwyg редактор.

Пример wysiwyg элементов без контейнера

Эту проблему я решил путём добавления миксина @container в селекторы элементов типографики. Решение конечно так себе, но работает без нареканий.

Геморрой №3

Странная шапка

По задумке дизайна, сам логотип должен отображаться так, будто он лежит в контейнере (чтобы идти в одну линию с текстом), но у логотипа ещё должна быть подложка, которая тянется с левого края до этого контейнера:

Я довольно долго бился с этим, но в итоге пришёл к выводу, что тут либо JS, либо нужно забить и сделать, чтобы он просто не выбивался из дизайна. И т.к. я не считаю целесообразным использование православного javascript для таких целей, реализовал вторую схему.

Что внутри?

Сайт сделан на Wordpress, поэтому ничего сверхъестественного в нём нет. Для кастомных материалов и таксономии я всегда использую Pods Framework, для форм – Contact Form 7. В Customizer добавлено несколько настроек для загрузки видеофайлов фона.

В целом, это самый обычный Wordpress сайт, без каких–то собственных наработок.