Бойлерплейт на основе связки Gulp + Webpack с поддержкой SVG спрайтов и SCSS

• jQuery
• GSAP
• Swiper
• lazysizes
• parsley.js
• day.js
• choices.js
• inputmask
• plyr
• bootstrap-datepicker
• body-scroll-lock
• detect-it

Установить Node JS, затем выполнить команду:

npm install

npm run dev

npm run build

npm run squoosh

(Нужно добавить ссылку на репозиторий в package.json)

npm run ghp

(Нужно переименовать файл _ftp-settings.json в ftp-settings.json)

npm run ftp

В проекте используются build-in-helpers

Основные используемые фичи шаблонизатора:

• Partials
• #if
• #each

Как пользоваться:

• Страницы генерируются на основе шаблонов. Шаблон хранится в папке src\partials\layouts
• Страницы, которые наследуются от шаблона, хранятся в папке pages
• В папке pages есть папка data с json-файлами. В них хранятся данные для страниц. Эти файлы принадлежат одноименным страницам, а данные в них сразу доступны для использования (попадают в контекст). Эти файлы создаются вручную
• Какие-то повторяющиеся куски разметки можно выносить в отдельные файлы - partials. Они хранятся в одноименной папке и вызываются в нужном месте

• Есть какие-то плагины из коробки, смотри внимательно
• Есть jQuery, GSAP, Swiper и пр.
• Основной файл - main.js, находится в папке js
• Есть файл src\assets\backend\backend.js, в нем прописываются, например, обработчики сабмита формы (для бекендера на PHP)
• Для пользовательских функций создал отдельную папку src\js\custom
• Объекты можно засунуть в объект window, чтобы получить к ним доступ из файла backend.js

• SCSS
• Легко самому разобраться в структуре
• Все файлы стилей импортятся в styles.scss вручную

• Изображения перед заливкой на гитхаб лучше сразу оптимизировать и переводить в формат webp (Squoosh)
• Иконки лучше оптимизировать через сервис SVG.OMG
• Все svg, помещенные в папку src\img\icons сборщик автоматически собирает в инлайновый спрайт, который доступен на любой странице.

Задать стили контейнеру для его дочерних элементов:

• Заголовки h1, h2, h3, h4, h5, h6
• Абзацы p
• Списки ul, ol, li , и лучше для тега ol сохранить вид нумерованного списка. Можно задать свои стили для нумерации через CSS-counter.
• Изображения, иконки max-width: 100%; height: auto;
• Ссылки a
• Жирное выделение b
• Таблицы по желанию

Вообще есть идея: любым текстовым тегам (<p>, <h3>, <a>, <ul>, <ol>, <li> - если внутри текст, <span> и т.д.) и иконкам <svg> и изображениям <img> не задавать классы. Всегда наследоваться от родительского контейнера.

Любой текстовый контент лучше оборачивать в div. Так как может получиться ситуация, когда клиент засунет параграф внутрь существующего параграфа - текстового контейнера.

Ключевое слово span

Можно еще reCAPTCHA прифигачить на сабмит

До сих пор не придумал нормального решения для открытия модалки на успешную / неуспешную отправку формы. Один из вариантов: дать бекендеру возможность самому открывать модалку. Это можно сделать, поместив объект модалки внутрь window.

Ещё вариант: пусть бекендер пишет обработчик (имя функции заранее известно, например, feedbackFormHandler) на success формы прямо внутри тега <script>. Эту функцию подхватывает фронт и выполняет. Если функция не задана, то ничего не происходит. Можно еще в эту функцию передать значения всех инпутов, бекендеру иногда они пригождаются.