Frontend болванка для modx revo

npm i

Список команд:

• gulp watch - основная команда для работы.
• gulp watch --p - подключаем pug
• gulp build - сбока продакшена в dist
• gulp build --el - все *.html будут скопированы в elements/templates. Т.е. если вы используете fenom и файлы, то останется только порезать шаблоны на чанки и все. А если вы используете pug, тогда данная команда возмет все нарезки из assets/pug/chunks/**/*.pug скомпилирует в *.tpl и отправит в elements/chunks/. Таким образом все ваши чанки уже будут нарезаны.

Если у вас возникнут проблемы с понимаением синтаксиса и приципов работы pug, то можно воспользоваться онлайн конвектором pug/jade который работает в обе стороны, очень удобная штука для людей которые только начали познавать дзен. Ну и конечно читайте оригинальные доки, там есть и extends и includeи много чего еще.

---

Как

Большинство внутренних и внешних отступов подключаются отдельными классами типо mt-10 pb-30 и т.д.. Например:

<div class="container-fluid pt-20 pb-40">
  <div class="container">
    <div class="col-12">...</div>
  </div>
</div>

Фон должен иметь отдельный класс, например bg-000 (последний три символа хеша), если фон черный. Можно давать различные именования, главное чтоб было читабельно, например bg-purple. Если фон блока темный а цвет букв в этом блоке светлый то можно установить пару фон + цвет текста:

.bg-black
  background: #000
  color: #fff

Не надо устанавливать очевидный серый цвет фона в формате rgba, если на то нет веских оснований. Думаю верхний пример ты узнаешь =)

// плохо
.service
  background-color: rgba(236, 236, 236, 0.6)
// хорошо
.service
  background-color: #f4f4f4
  // or
  background-color: rgb(244, 244, 244)

Как вариант можно еще и выделить цвет в отдельный класс. Типо .color-последнии_три_символа_хеша иногда это бывает очень полезно. Вот как это выглядит в деле:

<div class="container-fluid bg-000 mt-20 mb-40">
  <!-- или твой врапер -->
  <div class="container">
    <div class="col-12">
    <p class="color-red">...</p>
    <p class="color-yellow">...</p>
    </div>
  </div>
</div>

Не надо переопределять классы которые выполняют ровно одну очевидную функцию. Например container-fluid означает, что блок будет по всей ширине экрана. Это означает, что когда я вижу .container-fluid+.container__wrapper, то я ожидаю увидеть блок по всей ширине + что-то дополняющее, а не меняющее основное свойство класса container-fluid. Как вариант container__wrapper можно использовать вместе с container или автономно.

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

Комментарии! Я понимаю, что в процессе верстки глаз не замылен и все очевидно, но стоит оставлять комментарии в начале и в конце корневого логического блока. Фронтэндеру не сложно а бекэндеру приятно. Например:

<!-- about -->
<section class="about">
  ...
</section>
<!-- end about -->

Если на макете есть одинаковый элемент в двух разных блоках, то надо делать этот элемент автономным (отделенным от родительского блока) и дальше просто переиспользовать. Например у нас есть форма на главной странице, которая встречается в слайдере и в блоке со скидкой. Тоже самое касается и внутренних страниц. У нас есть часть страниц где заголовок и описание выглядят полностью одинаково. Но ты используешь постоянно разные классы .contact__title, .defect__title и т.д.. Просто выдели их в один .pagetitile и все.

Вообще, суть в том, чтобы после сдачи верстки, можно было максимально просто и быстро менять элементы местами, изменять высоту и количество элементов в блоке, но при этом как можно меньше лезть в исходники и как-то их изменять или дополнять. Ну и конечно же, чтобы все это дело хорошо налазило на шаблонизатор.

Чтобы было проще с ориентироваться при верстке, просто предстать, что тебе завтра скажут переметить (рандомный) блок на другую страницу, или оставить все на месте но поменять фон. Ну или поменять фон, изменить внутренние отступы и дополнить этот блок элементом из другой страницы Может показаться немного сложным и замороченным, но буквально на 3-5 макете начинаешь это делать на автомате.