Чертоги Фрилансера 4

Привет! Это Фрилансер по жизни, и я рад представить вам свой стартовый шаблон для комфортной разработки сайтов «Чертоги Фрилансера» 4 (далее — ЧФ4).

Автор шаблона — Евгений Андриканич и сообщество «Фрилансер по жизни».

Слово «чертоги» означает дворец, замок, хоромы. Название происходит от устойчивого выражения «чертоги разума» — места для хранения чего-то важного.

Скачать «Чертоги Фрилансера» 4

Что такое стартовый шаблон (сборка) и для чего он нужен?

Давайте представим обычный процесс подготовки к вёрстке и разработке сайта. Мы создаём иерархию папок и файлов, настраиваем тот или иной сборщик проекта, подключаем основные JS-дополнения для работы и так далее.

А во время разработки каждый раз выполняем одни и те же действия: конвертируем шрифты, оптимизируем картинки, пишем один и тот же код для решения стандартных задач. Ведь меню-бургер, слайдеры, попапы, табы, валидация и отправка форм, спойлеры, галереи и многое другое давно стали неотъемлемой частью любого современного сайта.

Кроме стандартного функционала, нам время от времени приходится решать более сложные задачи, связанные с пожеланиями дизайнера или заказчика, а также дорабатывать стандартные модули под конкретные потребности.

Я больше 10 лет разрабатываю сайты на фрилансе и успел поработать с самыми разными дизайн-макетами, а также со многими заказчиками и их пожеланиями.

По мере решения задач я всячески старался оптимизировать и автоматизировать рутинные процессы, а самые нужные и удачные HTML/CSS/JS-решения складывать в свои чертоги.

Наряду со стандартным функционалом стали появляться и собственные разработки и решения. Например, отзывчивое (адаптивное) свойство, динамический адаптив и другие.

В результате за столько лет накопилось достаточно полезных наработок, чтобы разработка с использованием ЧФ превратилась в сплошное удовольствие.

Удобная архитектура папок и файлов, автоматизация всех рутинных процессов, не только стандартный JS-функционал, но и решения для индивидуальных, уникальных запросов. При этом никакого лишнего кода: подключается только нужный функционал для конкретных страниц проекта. Это делает результат разработки с ЧФ4 максимально оптимизированным и быстрым.

Отвечая на вопрос, что такое стартовый шаблон и зачем он нужен, я приведу три основных пункта:

• Стартовый шаблон «Чертоги Фрилансера» 4 — это сочетание оптимизации и автоматизации рутинных процессов при разработке сайтов. Это база большого количества стандартных и уникальных решений, которые помогут за считаные секунды справиться с множеством возникающих задач.
• ЧФ разработан так, чтобы не притуплять ваши навыки разработки. Найден баланс между готовыми решениями и полным пониманием того, как всё устроено «под капотом». Подробные комментарии в коде также делают ЧФ учебным инструментом для вашего профессионального развития.
• Шаблон «Чертоги Фрилансера» работает с разработчиком, а не вместо него!

Общие возможности «Чертогов Фрилансера» 4

Основная концепция ЧФ4 — максимум функционала при минимальном количестве действий со стороны пользователя. В новой версии я старался автоматизировать всё, что только можно, чтобы дать разработчику возможность сосредоточиться на самой разработке. При этом сборку можно настроить под конкретные потребности.

ЧФ4 умеет самостоятельно настраивать редактор кода VS Code, добавляя сниппеты и настройки псевдонимов; конвертировать и подключать шрифты; конвертировать и оптимизировать изображения; создавать иконочный шрифт и SVG-спрайт. Сборка устанавливает и настраивает CMS WordPress и позволяет вести разработку на реальной системе, используя все возможности шаблона.

В ЧФ4 интегрированы «горячее» подключение HTML/SCSS/JS-компонентов, обработка препроцессоров SASS/SCSS и PUG, широкие возможности работы с HTML, оптимизация и разделение итоговых JS/CSS-файлов по страницам, создание их несжатых версий, а также возможность встраивать критические CSS-стили для наилучшей оптимизации.

Есть возможность работать с React, Vue и Tailwind CSS.

После разработки можно создать страницу проекта со ссылками на все его страницы, сделать ZIP-архив результата и отправить его на удалённый сервер по FTP.

ЧФ4 даже может напомнить, что пора сделать перерыв и отдохнуть ❤️

Подробное описание каждого функционала, его настройки и инструкции по использованию вы найдёте в общей документации ЧФ4.

Инструмент для сборки проекта

«Чертоги Фрилансера» 4 построены на основе современной системы сборки проектов Vite («вит»), которая обеспечивает невероятную скорость с учётом количества функционала.

Компонентный подход ко всему

Каждая часть интерфейса, каждый отдельный эффект и каждый отдельный функционал структурно выделены в папку с собственными HTML/SCSS/JS-файлами. При необходимости компонент мгновенно подключается к проекту при его использовании.

Система глобального логирования (Full Logging System, или FLS)

Я подумал: почему бы не научить функционал ЧФ4 «общаться» с пользователем — сообщать о своей работе в консоли? Это очень удобно в процессе разработки и имеет обучающий эффект. Конечно, этого помощника можно отключить как в режиме разработки, так и в режиме продакшена.

Список будет постоянно пополняться новыми возможностями. Следите за обновлениями. Спасибо за поддержку канала «Фрилансер по жизни» и бесплатного обучающего контента!

Скачать «Чертоги Фрилансера» 4

🤟 Учись, развивайся и помни: живи, а работай в свободное время!

Установка шаблона

Прежде всего следует разархивировать zip-архив в вашу папку проекта. Следите за тем, чтобы папка и ее родительские папки не содержали в названии кириллицу, пробелы, символы # и !

Содержимое архива в папке проекта

Если вы до сих пор не использовали NodeJS и пакетный менеджер NPM, необходимо загрузить и установить Node.js . Загружайте версию, рекомендованную для большинства.

Далее открываем терминал в этой папке проекта. Терминал может быть встроен или открыт отдельно от редактора. Рекомендую использовать терминал GIT Bash .

После установки необходимых инструментов введите команду npm i

В процессе установки в терминале могут быть сообщения с пометкой WARN желтым цветом. Эти сообщения можно игнорировать. Но если вы получаете сообщение ERR! красным цветом – это критическая ошибка и ее нужно исправлять.

Предупреждение можно игнорировать

После успешной установки у вас появится папка node_modules и файл package-lock.json

Установка завершена

Подробнее об
архитектуре папок и файлов ЧФ мы поговорим в следующем разделе, а пока продолжаем подготовку к работе

Запуск шаблона и режимы работы

ЧФ4 может выполнять разные сценарии сценариев:

• Режим разработчика. Команда запуска npm run dev
• Режим разработчика с внешним IP. Команда запуска npm run online
• Режим продакшена. Команда запуска npm run build
• Режим просмотра результата выполнения продакшена. Команда запуска npm run preview
• Режим продакшена и отправка результата на сервер по FTP. Команда запуска npm run deploy
• Режим продакшена и отправка результата на GitHub. Команда запуска npm run git
• Режим продакшена и создание ZIP-архива с результатом. Команда запуска npm run zip
• Режим разработчика под CMS WordPress. Команда запуска npm run wp
• Режим продакшен под CMS WordPress. Команда запуска npm run wpbuild
• Остановка сервера Docker. Команда запуска npm run wpstop

Режим разработчика

В режиме разработчика выполняются только необходимые для разработки задачи:

• Конвертация OTF/TTF шрифтов в WOFF2 и подключение к проекту
• Создание иконочного шрифта и подключение к проекту
• Обработка HTML-файлов, переименование псевдонимов
• Проработка препроцессора PUG, переименование псевдонимов
• Обработка JS-файлов
• Обработка SCSS/CSS-файлов
• Запускается локальный сервер, открывается браузер с индексной страницей.
• Запускается наблюдатель за сменой фалов. При каждом изменении файлов браузер обновляет страницу
• Внимание! В режиме разработчика HTML CSS JS файлы результата не записываются на диск ( папка dist не создается ).

Режим продакшена

В режиме продакшена выполняется финализация проекта, а именно:

• Конвертация (при необходимости) OTF/TTF шрифтов в WOFF2 и подключение к проекту
• Конвертация изображений в формат WEBP/AVIF. Создание файлов разных размеров. Сжатие и оптимизация JPG PNG SVG изображений
• Конвертация SCSS файлов в CSS файлы, переименование псевдонимов, группирование медиа-запросов, добавляются вендорные префиксы для обеспечения кроссбраузерности, обрабатывается подключение WEBP/AVIF изображений, производится сжатие. Могут создаваться несжатые копии файлов. Могут создаваться критические стили.
• Обработка и форматирование HTML файлов, переименование псевдонимов, обрабатывается подключение WEBP/AVIF изображений и разных размеров файлов.
• При использовании PUG файлы преобразуются в HTML, переименовываются псевдонимы, обрабатывается подключение WEBP/AVIF изображений и разных размеров файлов.
• Собираются JS файлы, производится сжатие и оптимизация конечного файла. В результате попадает только используемый код. Могут создаваться несжатые копии файлов.
• Копируются файлы из указанной папки
• Внимание! Все файлы с результатом записываются на диск в папку dist , локальный сервер не запускается

Итак, давайте запустим наш шаблон в режиме разработчика, для этого в терминале выполняем команду npm run dev

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

Внимание! При конвертации шрифтов в терминале будет выведено соответствующее сообщение, пользоваться сборником можно после завершения конвертации

Старт выполнения команды

Команда успешно исполнена

Возможные ошибки и их разрешение

Если браузер не запустился, а в терминале видны ошибки (ERR!), убедитесь что:

• У вас установлены Node.js и Python последней версии
• Терминал открыт с правами администратора
• В названиях папок по всему пути к проекту нет символа # или !
• Папки и файлы должны быть названы латиницей без пробелов.

Подготовка редактора к комфортной работе с шаблоном

Для того чтобы наслаждаться возможностями шаблона ЧФ по полной, нам следует сделать некоторые настройки редактора. В качестве примера представлен редактор VS Code

Настройка псевдонимов

В статье Архитектура шаблона. Файлы и папки вы узнаете, что разные части HTML, SCSS, JS файлов находятся на разных уровнях вложенности, что создает определенные неудобства при подключении, например картинок, в процессе разработки.

Неудобства мы не любим, поэтому настроим так называемые псевдонимы (алиасы) путей к папкам. Для этого нам нужно установить плагин Path Autocomplete .

По умолчанию, ЧФ4 сам настроит плагин соответствующими псевдонимами, указанными в файле настроек сборки. Там же можно отключить автоматическую настройку.

После этого вы можете смело использовать псевдонимы при подключении файлов, например:

<img src="@img/cover.jpg" alt="Рисунок">

Редактор распознает псевдоним и выведет список файлов в указанной папке, а во время сборки система сама поменяет псевдоним на нужный путь!

Настройка снипетов

Снипеты – это короткие коды, которые могут вызвать готовые заготовки кода любого объема. Это повышает скорость разработки.

Например, снипет spollers + клавиша Tab выведет код спойлеров:

<div data-fls-spollers class="spollers">
<details class="spollers__item">
<summary class="spollers__title">Заголовок спойлера</summary>
<div class="spollers__body">Контент спойлера</div>
</details>
</div>

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

По умолчанию, ЧФ4 автоматически добавит сборки сборки в ваш проект и вы сможете ими пользоваться во время разработки. Сниппеты ЧФ4 будут работать параллельно с вашими снипетами в редакторе. Автоматическое добавление снипетов можно отключить в настройках сборки.

переведенная версия на русский язык доступна всего за скромные

300 рублей. Получите доступ к уникальным возможностям и функциям шаблона, созданным специально для фрилансеров, и улучшите свой опыт работы.

Перевести можно на ЮMoney (со Сбера без комиссии) по номеру кошелька 4100116437581788

на карту 5599 0020 2363 6303

или воспользоваться формой ниже

После оплаты напишите в телеграмм , я вышлю вам копию шаблона.

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

Обновления Чертоги фрилансера 4

В этом разделе поговорим об архитектуре, иерархии папок и файлов, стартовом шаблоне «Чертоги Фрилансера» 4 (далее ЧФ4)

Разархивировав сборку, в корне вы обнаружите следующие файлы и папки:

• Папка src – содержит производные файлы и папки проекта. Именно здесь работает разработчик
• Файл template.config.js , содержащий пользовательские настройки ЧФ4
• Файл README.txt – важная краткая информация об использовании ЧФ4
• Файл cover.jpg – обложка ЧФ4
• Файл package.json , содержит команды запуска сборщиков, информацию об установленных плагинах и их версиях. А также другую информацию об авторе и версии сборника. Не рекомендуется редактировать без соответствующих знаний
• Файл docker-compose.yml , содержит инструкции по установке и запуску сервера в режиме fullstack для работы с CMS WordPress . Не рекомендуется редактировать без соответствующих знаний
• Папка template_modules содержит функционал сборки. Не рекомендуется редактировать
• Файл vite.config.js содержит инструкции для работы системы VITE Не рекомендуется редактировать.
• При первом запуске любого режима появится папка .vscode , которая будет содержать настройки редактора и сниппеты (если это разрешено в настройках ЧФ4)
• При первом запуске команды npm run zip появится папка zip , которая будет содержать zip-архив конечных файлов проекта
• При первом запуске режима fullstack (npm run wp, npm run wpbuild) появится папка backend , содержащая папки wordpress и database . Не рекомендуется редактировать без соответствующих знаний
• После установки также появятся автоматически папка node_modules и файл package-lock.json . Не редактировать

Содержимое папки src:

• Файл index.html — индексная (главная) страница разрабатываемого проекта
• Папка assets – используется для хранения медиа-файлов проекта – изображений, шрифтов, иконок и т.п.
• Папка styles – содержит общие файлы столов проекта
• Папка js — содержит общие файлы скриптов проекта, а также папки и файлы библиотек и фреймворков
• Папка pug – содержит файлы для работы с препроцессором PUG
• Папка php — содержит PHP-компоненты и является главной папкой PHP-сервера, если такая настройка включена
• Папка files (пустая) – все файлы этой папки будут скопированы в папку с результатом (dist/files)
• Папка components — содержит все HTML/CSS/SCSS/JS компоненты ЧФ4 , а также тему для CMS WordPress, шаблоны HTML-страниц и их главный контент

Содержимое папки src/components:

Содержит все HTML/CSS/SCSS/JS компоненты ЧФ4, а также тему для CMS WordPress, шаблоны HTML-страниц и их главный контент

• Папка custom (пустая) – здесь можно создавать собственные компоненты
• Папка wordpress – содержит тему для CMS WordPress, плагин и вспомогательные файлы. Используется для разработки интерфейса под CMS WordPress в режиме fullstack (npm run wp, npm run wpbuild)
  • fls-theme – тема для CMS WordPress
  • fls-plugin – собственный плагин для CMS WordPress
  • JS-файлы – вспомогательные файлы, не редактировать, не удалять
• Папка templates – содержит шаблоны HTML-страниц, можно добавлять свои
  • Папка main – содержит HTML/SCSS/JS файлы основного HTML-шаблона проекта
  • Папка projectpage – содержит HTML-шаблон страницы проекта
• Папка pages — содержит HTML/SCSS/JS файлы основного контента
  • Папка home содержит HTML/SCSS/JS файлы основного контента интексной (главной) страницы проекта
• Папка effects — содержит папки и HTML/SCSS/JS файлы компонентов, которые добавляют в проект различные эффекты. Можно добавлять свои
• Папка forms — содержит папки и HTML/SCSS/JS файлы компонентов, которые добавляют в проект разнообразный функционал для работы с формами и их элементами. Можно добавлять свои
• Папка layout — содержит папки и HTML/SCSS/JS файлы компонентов, которые добавляют в проект различные части интерфейса. Можно добавлять свои

Дополнительно папки компонентов могут содержать папки и файлы плагинов конкретного компонента, например src/components/layout/header/plugins/scroll

Содержимое папки src/assets:

• Папка fonts (пустая) – используется для конвертации и добавления локальных шрифтов в проект.
• Папка img – используется для хранения и использования изображений. Содержит файл favicon.ico, который подключен к HTML-страницам (заменяем на свой).
• Папка svgicons (пустая) — используется для конвертации и добавления в проект иконочного шрифта и/или спрайта

Содержимое папки src/styles:

• Файл style.scss – главный файл стилей, который подключается ко всем HTML-страницам.
• Файл settings.scss – файл настроек общих значений стилей проекта
• Папка fonts — содержит автоматически заполняемые при запуске любого режима CSS-файлы стилей подключения локальных и иконочного шрифтов.
• Папка includes – содержит общие CSS/SCSS-файлы столов
  • Файл index.scss — а автоматически подключается к каждому SCSS-файлу проекта и содержит подключение настроек, SCSS миксинов и шаблонов. Можно подключать свои
  • Файл extends.scss – содержит набор SCSS-шаблонов. Можно добавлять свои
  • Файл mixins.scss – содержит набор SCSS-миксинов. Можно добавлять свои
  • Файл spritemap.scss – содержит SCSS-миксин для работы с SVG-спрайтом. Заполняется автоматически
• Папка libs — содержит а втоматически подключаемые к HTML-страницам CSS-файлы
  • Файл reset.css — а автоматически подключается к каждой HTML-страницы, если не используется другая CSS-библиотека/фреймворк
  • Файл tailwind.css — а автоматически подключается к каждой HTML-страницы, если использование указано в настройках ЧФ4

Содержимое папки src/js:

• Файл app.js (пустой) – основной файл, общих для всего проекта, скриптов. Подключается к каждой HTML-странице
• Папка common – содержит файлы общих скриптов
  • Файл functions.js – содержит полезные функции, используемые в компонентах ЧФ4
• Папка react – содержит стартовые файлы и папки для работы с React
• Папка vue – содержит стартовые файлы и папки для работы с Vue

На этой странице описаны настройки сборника «Чертоги Фрилансера» 4 (Далее ЧФ4).

ЧФ4 построена так, чтобы как можно больше возможностей можно было настроить под пользовательские потребности.

Для того чтобы настроить сборку, открываем файл template.config.js в папке проекта.

Список настроек:

• lang — Настройка языка сообщений ЧФ4 в терминале и консоли: ru/en
• vscode — Настройка редактора VS Code
  • settings — Автоматическая настройка псевдонимов для проекта (плагин Path Autocomplete )
  • snippets — Автоматическое добавление снипетов ЧФ4 в проект
• devcomponents — Настройка страницы разработки компонентов
  • включить — Переключатель: true/false
  • filename — имя файла страницы
• git — Настройка загрузки на GitHub
  • repo — Путь репозитория
  • филиал — Филиал
• newpage — Настройка создания новой страницы проекта
  • copyfromindex – создавать новую страницу на основе src/index.html. Включатель: true/false
  • usetemplate — Указание шаблона, который будет использоваться при создании новой страницы. Работает только когда copyfromindex:false.
• navpanel — Настройка навигационной панели
  • dev – в режиме разработчика. Включатель: true/false
  • build – в режиме продакшена. Включатель: true/false
  • position — Вывод панели: left/right
  • color — Цвет текста и ссылок
  • background — Цвет фона
  • transition — скорость анимации открытия в миллисекундах
• statistics — Управление сбором и выводом статистики проекта
  • enable – разрешить сбор статистики. Включатель: true/false
  • showonbuild – автоматический вывод статистики в режиме продакшн. Включатель: true/false
• server — Настройка локального сервера
  • path — Настройка путей к файлам: ./ — относительный, / — абсолютный
  • isassets — Добавляет возможность собирать проект таким образом, чтобы файлы JS и CSS были размещены в папке dist/assets. Включатель: true/false
  • buildforlocal – добавляет возможность собирать проект таким образом, чтобы его можно было открывать в файловом проводнике (без сервера). Внимание! При использовании все JS и CSS файлы будут принудительно собраны в файл. Включатель: true/false
  • copyfiles – Копирование файлов из папки src/files в dist/files в режиме продакшн. Включатель: true/false
  • version – добавление уникальной версии к конечным CSS/JS файлам. Включатель: true/false
  • hostname — название сервера
  • порт — порт сервера
• html — Настройка обработки HTML-файлов
  • beautify — форматирование в режиме продакшн
    • включить — Переключатель: true/false
    • indent — Настройка типа отступов
• styles — Настройка работы со стилями и отделкой SCSS/CSS-файлов
  • tailwindcss – Подключить Tailwindcss. Включатель: true/false
  • pxtorem – переводить PX в REM в режиме продакшн. Включатель: true/false
  • critical – создать и добавить в HTML-файлы критические CSS-стили. Включатель: true/false
  • codesplit – разделять CSS-фалы на отдельные и подключать соответствующим HTML-страницам в режиме продакшн. Включатель: true/false
  • devfiles – создание несжатых копий файлов в режиме продакшн. Включатель: true/false
• fonts — Настройка обработки шрифтов
  • iconsfont – создание шрифта из SVG иконок (иконочного шрифта) и подключение его в проект. Включатель: true/false
  • download — Загружать и делать локальными шрифты подключенные удаленно (например с Google Fonts). Включатель: true/false
• images — Настройка обработки изображений
  • svgsprite – создание спрайта из SVG-иконок и подключение его в проект. Включатель: true/false
  • optimize — Настройка оптимизации изображений в режиме продакшн
    • enable – Включатель: true/false. Если оптимизация отключена изображения просто копируются без конвертации и оптимизации
    • edithtml – вносить изменения в HTML-файлы. Если включено, то HTML-файлы будут изменены в соответствии с настройками конвертации и создания дополнительных размеров изображений
    • sizes – размеры файлов, которые будут дополнительно созданы
    • dpi — Множители для создания дополнительных файлов
    • attrignore — Атрибут тега IMG при наличии какого-либо изображения не будет обработано
    • modernformat — Настройка конвертации в современные форматы
      • включить — Переключатель: true/false
      • type — Формат изображения в который необходимо конвертировать: webp/avif
      • only – оставлять только файлы в современном формате после конвертации. Включатель: true/false
      • quality — качество изображения
    • jpeg — Настройка оптимизации изображений
      • quality — качество изображения,
    • png — Настройка оптимизации изображений
      • quality — качество изображения
• js — Настройка обработки JavaScript-файлов
  • hotmodules — «Горячее» подключение компонентов. Включатель: true/false
  • devfiles – создание несжатых копий файлов в режиме продакшн. Включатель: true/false
  • bundle — Настройка формирования конечного файла в режиме продакшн
    • enable – Система собирает весь код в один JS и один CSS файлы независимо от настройки styles -> codesplit. Включатель: true/false
• react – включает обработку React. Включатель: true/false
• vue – включает обработку Vue. Включатель: true/false
• php — Настройка PHP-сервера
  • включить — Переключатель: true/false
  • base — Путь к папке где находятся файлы PHP
  • hostname — Имя хоста
  • port — Порт
  • binary — Путь к папке где установлен интерпретатор PHP
  • ini — Путь к файлу настроек php.ini
• pug — Настройка препроцессора PUG
  • включить — Переключатель: true/false
• ftp – настройка отправки конечных файлов (из папки dist) на сервер (хостинг) по FTP в режиме продакшена
  • host — Имя FTP хоста
  • port — FTP Порт
  • remoteDir — Удаленная папка на сервере
  • user — Имя пользователя FTP
  • password — Пароль пользователя FTP
• logger — логи работы модулей и компонентов сборки
  • Terminal – логи работы модулей в терминале. Включатель: true/false
  • console — логи работы компонентов в консоли
    • включить — Переключатель: true/false
    • removeonbuild – убирает логи в режиме продакшн. Включатель: true/false
• projectpage – создание страницы проекта в режиме продакшн. Страница будет содержать ссылку на все HTML-файлы проекта для удобной демонстрации заказчику
  • включить — Переключатель: true/false
  • projectname – название проекта, которое выводится на странице вместо %projectname%. Если пусто, замените название папки проекта
  • template — Путь к шаблону страницы проекта
  • outfilename – имя файла. Если пусто, то создастся HTML-файл с названием папки проекта
• aliases — Настройка псевдонимов
• coffee — Настройка сообщения о перерыве
  • включить — Переключатель: true/false
  • text — текст сообщения
  • interval – Интервал вывода сообщения в минутах
• novaposhta — Настройка компонента Новая Почта
  • включить — Переключатель: true/false
  • key — личный ключ

В сборнике «Чертоги Фрилансера» 4 интегрированы широкие возможности работы с HTML-файлами, которые, по желанию, можно использовать при разработке того или иного проекта.

Подключение отдельных HTML-файлов

В процессе разработки HTML-конструкций часто возникают ситуации, когда есть необходимость переиспользовать тот или иной отрезок кода в разных местах, особенно учитывая компонентный подход ЧФ4.

Для решения этих задач встроен функционал «Вставка» (include).

<include src="путь к HTML-файлу"></include>

Давайте рассмотрим этот функционал на простом примере блоков <head>, <header> и <footer> проекта, которые должны быть подключены на всех страницах HTML:

<!doctype html><html lang="en"> <!-- подключение head --> <include src="@components/layout/head/head.html"></include><body><div class="wrapper"><!-- подключение header --><include src="@components/layout/header/head> <!-- контент страницы --> </main><!-- подключение footer --><include src="@components/layout/footer/footer.html"></include></div><script type="module" src="@js/app.js"></script></body></html>

Таким образом, изменяя файл компонента, например header.html, изменения произойдут по всему сайту, где этот компонент подключен.

Использование HTML-шаблонов

Для более сложных и больших проектов будет удобно использовать HTML-шаблоны (templates). Сохраняются шаблоны в папке src/components/templates. Конечно, можно добавлять свои.

Давайте рассмотрим пример когда на сайте есть разные структуры – на главной странице и еще нескольких нет боковой панели, а еще на нескольких есть. Соответственно, мы можем подготовить и затем использовать различные структурные шаблоны.

Вот пример шаблона main.html:

<!doctype html><html lang="en"><include src="@components/layout/head/head.html"></include><link rel="stylesheet" href="@components/templates/main/main.scss"><body><div class="wrapper"><block name="header"></block><block name="main"></block><block name="footer"></block> </div> <block name="popup"></block><script type="module" src="@js/app.js"></script></body></html>

Вот пример шаблона inner.html:

<!doctype html><html lang="en"><include src="@components/layout/head/head.html"></include><link rel="stylesheet" href="@components/templates/inner/inner.scss"><body><div class="wrapper"><block name="header"></block><div class="inner"><block name="main"></block><block name="aside"></block></div><block name="footer"></block></div><block name="popup"></block><script type="module" src="@js/app.js"></script></body></html>

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

<block name=»имя блока»> — это ячейка, в которую мы можем «вкладывать» нужный контент.

Вот пример главной страницы (index.html), которая использует шаблон «main.html»:

<template src="@components/templates/main/main.html"><block name="header"><include src="@components/layout/header/header.html"></include></block><block name="main"><include src="@components/pages/home/home.html"></include></block><block name="footer"><include src="@components/layout/footer/footer.html"></include></block><block name="popup"></block></template>

А вот пример внутренней страницы (contacts.html) строящейся по шаблону «inner.html»:

<template src="@components/templates/inner/inner.html"><block name="header"><include src="@components/layout/header/header.html"></include></block><div class="inner"><block name="main"><include src="@components/pages/contacts/contacts.html"></include></block><block name="aside"><include src="@components/layout/aside/aside.html"></include></block></div><block name="footer"><include src="@components/layout/footer/footer.html"></include></block><block name="popup"></block></template>

Как мы видим, в «ячейки» шаблона вставлены различные компоненты, в том числе главный контент конкретной страницы — @components/pages/home/home.html и @components/pages/contacts/contacts.html

Использование элементов программирования в HTML-файлах

Использование include и template очень помогают в работе с HTML-файлами, а чтобы возможности были еще шире, я добавил элементы программирования.

Использование переменных

В ЧФ4 есть возможность передавать данные в отдельные HTML-файлы, подключенные через include и template с помощью locals (переменных).

Например, мы подключаем head сайта с помощью include и на той или иной странице (например «Контакты»), хотим вывести соответствующий текст в тег <title>. Для этого передаем данные в формате JSON :

<!DOCTYPE html><html lang="uk"><include src="@components/layout/head/head.html" locals='{"title":"Контакты"}'></include><body><div class="wrapper"><include src="@components/layout/header/header.html"></include><include src="@components/pages/home/home.html"></include><include src="@components/layout/footer/footer.html"></include></div></body></html>

А в файле head.html в тэге <title> выводим переменную в двойных квадратных скобках [[…]]:

<head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="@styles/style.scss"><title>[[title]]</title></head>

Результат:

Таким образом можно передавать и выводить множество информации:

<!DOCTYPE html>
<html lang="ru">
<include src="@components/layout/head/head.html" locals='{
"title":"Контакты",
"keywords":"ключевое слово...",
"description":"Описание страницы..."
}'></include>

<body>
    <div class="wrapper">
        <include src="@components/layout/header/header.html"></include>
        <include src="@components/pages/home/home.html"></include>
        <include src="@components/layout/footer/footer.html"></include>
    </div>
</body>

</html>

Использование условий

Передача информации с помощью переменных (locals) открывает еще более широкие возможности вместе с условным отражением <if> <elseif> <else>

Например, нам необходимо добавить класс пункта меню, соответствующий странице сайта. Для этого передаем информацию в файл header.html с помощью locals:

<!DOCTYPE html>
<html lang="en">
<include src="@components/layout/head/head.html" locals='{"title":"Главная страница"}'></include>

<body>
    <div class="wrapper">
        <include src="@components/layout/header/header.html" locals='{"active":"Главная"}'></include>
        <include src="@components/pages/home/home.html"></include>
        <include src="@components/layout/footer/footer.html"></include>
    </div>
</body>

</html>

В файле header.html, при построении меню, используем условие:

<div class="header__menu menu"><button type="button" data-fls-menu class="menu__icon icon-menu"><span></span></button>
	<nav class="menu__body">
		<ul class="menu__list">
			<if condition="'[[active]]' === 'Главная'">
				<li class="menu__item"><a href="#" class="menu__link menu__link--active">Главная</a></li>
			</if>
			<else>
				<li class="menu__item"><a href="[[item.href]]" class="menu__link">Главная</a></li>
			</else>...
		</ul>
	</nav>
</div>

Использование циклов

Для дополнительной оптимизации построений конструкций добавлена ​​возможность использования циклов <each>.

Ост пример построения меню с помощью цикла на основе определенного массива данных:

<div class="header__menu menu"><button type="button" data-fls-menu class="menu__icon icon-menu"><span></span></button>
    <nav class="menu__body">
        <ul class="menu__list">
            <each
                loop='item in [{"href": "#","ancor": "Главная"},{"href": "#","ancor": "О нас"},{"href": "#","ancor": "Блог"},{"href": "#","ancor": "Контакты"}]'>
                <if condition="'[[active]]' === '[[item.ancor]]'">
                    <li class="menu__item"><a href="[[item.href]]"
                            class="menu__link menu__link--active">[[item.ancor]]</a></li>
                </if>
                <else>
                    <li class="menu__item"><a href="[[item.href]]" class="menu__link">[[item.ancor]]</a></li>
                </else>
            </each>
        </ul>
    </nav>
</div>

Настройка ЧФ4 для работы с HTML

В файле настроек ЧФ4 в разделе html вы найдете:

• beautify – настройка форматирования в режиме продакшн
  • включить — переключатель
  • indent – ​​тип отступов

В «Чертогах Фрилансера» 4 (далее ЧФ4) используется
препроцессор SASS в синтаксисе SCSS , что позволяет использовать широкий и мощный функционал для создания стилей проекта и их управления.

Благодаря компонентному подходу ЧФ4, можно описывать стили для каждой страницы и каждого блока отдельно, в файлах соответствующего компонента. Это позволит системе разделять стили по страницам, что положительно влияет на оптимизацию проекта. Отдельные файлы стилей компонентов вы найдете в папке
src/components

Для удобства работы со стилями следует использовать значение в PX (пикселях), и, где это нужно, в % (процентах) и EM. Система автоматически переведет все значения из PX в относительные единицы REM в режиме продакшн (если это включено в настройках ЧФ4)

Файл settings.scss

Файл
src/styles/settings.scss является главным файлом настроек значений стилей по умолчанию, работы адаптивной сетки и миксинов, в частности таких, как «Чувственное свойство»

Файл автоматически подключается к каждому SCSS-проекту, и именно с этого файла следует начинать работу над интерфейсом

Настройка семейства, размера и цвета шрифта по умолчанию

Для того чтобы работать со шрифтами, сначала нужно их подключить. Все действия подробно описаны в данной статье.

После выполнения действий по подключению шрифтов необходимо указать значение для следующих переменных

$fontFamily – имя семейства шрифт по умолчанию. Указываем имя основного шрифта в проекте и его тип, например:

$fontFamily: «Монтсеррат, без засечек»;

$fontSize – размер шрифта по умолчанию. Следует указать значение размера шрифта по умолчанию в пикселях (только число без px):

$fontSize: 16;

$mainColor – цвет шрифта по умолчанию. Указываем код цвета:

$mainColor: #000;

Также, здесь можно добавлять и другие переменные, в том числе с цветовыми кодами создавая цветовую палитру проекта

Настройка адаптивной сетки

У ЧФ4 есть возможность настроить ограничивающий контейнер на работу как с адаптивной (чуткой) версткой, так и с версткой по брейкпоинтам.

Перед началом работ настраиваем следующие переменные:

$minWidth – минимальная ширина вьюпорта (экрана), поддерживаемая проектом. Обычно это 320px, но с отмиранием старых устройств это значение можно изменять на любое нужное, указываем только число без px:

$minWidth: 320;

$maxWidth — ширина всего макета (холста), не путать с шириной ограничивающего контейнера. Как правило, дизайнеры предоставляют макеты шириной 1920 или 1440 точек, но это значение может быть любым. Измеряем макет и указываем только число без px:

$maxWidth: 1920;

$maxWidthContainer – ширина ограничивающего контейнера. По сути, это ширина контента в макете дизайна. Измеряем макет и указываем только число без px:

$maxWidthContainer: 1170;

Если в макете нет ограничения контента, то есть контент расположен на всю ширину полотна (с отступами), то следует указать значение 0 (ноль):

$maxWidthContainer: 0;

$containerPadding — общее отступление (сумма отступов слева и справа) у ограничивающего контейнера. Указываем только число без px:

$containerPadding: 30;

Если отступов нет, или вы хотите использовать адаптивное свойство, следует указать 0 (ноль):

$containerPadding: 0;

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

$containerWidth: $maxWidthContainer + $containerPadding;

Вышеупомянутые переменные влияют и на функционал чуткого свойства, описанный в отдельной статье

Настройка брейкпоинтов

Настраиваем «стандартные» предельные ширины определенных групп устройств:

$ pc – ПК, ноутбуки, некоторые планшеты в горизонтальном положении. Как правило, здесь указывается переменная $containerWidth :

$pc: $containerWidth;

$tablet – планшеты, некоторые телефоны в горизонтальном положении. Обычно значение равно 991.98px:

$планшет: 991.98;

$mobile – большие телефоны. Обычно значение равно 767.98px:

$мобильный: 767.98;

$mobileSmall – маленькие телефоны.

$mobileSmall: 479,98;

Для быстрого вызова медиа-запроса с требуемым брейкпоинтом можно использовать
сниппеты md1, md2, md3, md4. Или для Mobile First, mmd1, mmd2, mmd3, mmd4

Настройка типа адаптива (поведение ограничивающего контейнера)

$responsiveType — настройка типа адаптива (поведение ограничивающего контейнера):

• 1 – отзывчивая. У контейнера нет брейкпоинтов, он сужается вместе с браузером.
• 2 – по брейкпоитам. Контейнер изменяет свою ширину по настроенным брейкпоинтам.

$responsiveType: 1;

Файл style.scss

Файл src/styles/style.scss является основным и общим файлом стилей проекта в стартовом шаблоне «Чертоги Фрилансера».

Подключение удаленных шрифтов

В начале файла есть секция, где, при необходимости, следует подключать удаленные шрифты, например с Google Fonts . Для этого удобно использовать плагин для VS Code — Better Google Fonts for VS Code

Селекторы и стили

body{} – стили основного тега <body>.

Также добавлена ​​подготовка для появления у тега <html> двух классов:

• [data-fls-scrolllock] – блокировка скрола. Для этого уже написаны соответствующие стили
• [data-fls- loaded] — сайт загружен. По этому классу мы можем влиять на <body> для отображения контента после полной загрузки данных

. wrapper {} – обертка всего контента на странице. Для нее написаны стили прижатия подвала к низу страницы, важен параметр overflow: clip; который не даст появиться горизонтальному скролу страницы, а также решению других проблем

Ниже указан селектор ограничивающего контейнера и его стили, значения которых во многом состоят из настроек в файле settings.scss

Стили ограничительного контейнера будут применяться к любому элементу, в классе которого имеется строка «__container» . Для удобства можно использовать снипет cnt

<div class=»block__container»> … </div>

Общие стили проекта

Ниже всех предустановленных стилей можно добавлять собственные общие стили, которые применяются ко всем страницам проекта .

Возможны настройки ЧФ4 для работы со стилями

В файле настроек ЧФ4 в разделе styles вы найдете:

• tailwindcss – включает использование tailwindcss, при этом файл src/styles/libs/reset.css будет выключен
• pxtorem – включает автоматическую конвертацию PX в REM
• critical – включает создание и интеграцию в HTML критических стилей
• codesplit – разделяет стили по страницам проекта
• devfiles — создает не сжатый файл стилей

Подключение шрифтов с Google Fonts:

Самый простой способ – это воспользоваться плагином для VS Code Google Fonts

• Нажимаем F1 и ищем плагин Google Fonts
• Если мы хотим подключить шрифт отдельным тегом link в HTML файл, выбираем Google Fonts: insert <link>
• Если хотим подключить шрифт к файлу стилей (обычно это src/styles/style.scss ), выбираем Google Fonts: insert CSS @import
• Из списка выбираем нужный шрифт, можно воспользоваться поиском
• Из списка выбираем нужные вариации шрифта
• Жмем «Ok»

Пример подключения шрифта Montserrat + варианты:

@import url(» https://fonts.googleapis.com/css?family=Montserrat:regular,600,700&display=swap «);

Шрифты, подключенные к Google Fonts, не должны попадать в папку с результатом (dist), они подгружаются с сервера Google. Но, если вы хотите, чтобы подключенные удаленные шрифты подключились локально, воспользуйтесь настройкой ЧФ4: fonts -> download: true

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

Подключение локальных файлов шрифтов

В стартовом шаблоне «Чертоги Фрилансера» 4 (далее – ЧФ4) весь процесс подключения локальных и иконочных шрифтов максимально автоматизирован. Исходные файлы шрифтов конвертируются из современного веб-формата WOFF2 , а также выполняется запись подключения шрифтов в файл стилей, включая значения font-weight и font-style на основе имени файла.

Правила названий файлов шрифтов

Поскольку ЧФ4 автоматизирует процесс подключения семейств шрифтов и их вариаций, важно правильно называть файлы по схеме:

название семьи-вариация

Например, если файл с названием KoPubBatang-Bold.ttf, система подключит семью (font-family) KoPubBatang и вариацию (font-weight) 700.

Пошаговая инструкция по подключению локальных шрифтов:

• Загрузить или получить от дизайнера/заказчика файлы шрифтов в формате .TTF, .OTF или .WOFF2 и положить их в папку src/assets/fonts
• Проверить названия файлов, учитывая информацию выше
• Запустить режим разработки
• Указать семейство шрифта по умолчанию в переменной $fontFamily в файле src/style/settings.scss и, при наличии других семейств и/или вариаций шрифта, другим селекторам в стилях проекта

Как ЧФ4 обрабатывает шрифты?

При запуске сборки в любом режиме ЧФ4 проверит, есть ли файлы шрифтов в форматах .TTF, .OTF или .WOFF2 в папке src/assets/fonts

Далее проходят следующие этапы:

• Файлы .OTF (если они есть) конвертируются в .TTF и хранятся в папке src/assets/fonts
• Файлы .TTF (если они есть) конвертируются в .WOFF2 и записываются в папку src/assets/fonts
• Файлы .WOFF2 (если они есть) просто сканируются для следующего этапа подключения
• Файлы-производители .OTF и .TTF (если они есть) удаляются
• После конвертации ЧФ4 запишет в файл src/styles/fonts/fonts.css конструкции @font-face для всех файлов, включая значения font-weight и font-style, основанные на имени файла шрифта. Заполненный файл стилей автоматически подключится ко всем HTML-страницам проекта

Создание иконочного шрифта и подключение его к проекту:

• Поместите иконки в формате SVG в папку src/assets/svgicons
• Включить в настройках ЧФ4 создание иконочного шрифта (fonts->iconsfont: true)
• Запустить режим разработки
• Используйте специальные классы в HTML разметке для вывода иконки из набора. Посмотреть весь набор иконок в шрифте и их классы можно по ссылке в панели разработчика (если она включена в настройках ЧФ4).

Классы иконочного шрифта можно использовать как отдельно:

<button class=»button —icon-some»>Какой-нибудь текст</button>

Так и как модификатор:

<button class=»button button—icon-some»>Какой-нибудь текст</button>

После добавления класса, в объекте создастся псевдоэлемент ::before, который и будет выводить иконку

Настройка ЧФ4 для работы со шрифтами

В файле настроек ЧФ4 в разделе fonts вы найдете:

• iconsfont – включает создание и подключение иконочного шрифта
• download — включает загрузку и подключение локально удаленных шрифтов

В сборнике «Чертоги Фрилансера» 4 (ЧФ4) реализована автоматизация широких возможностей оптимизации изображений:

• Оптимизация (уменьшение веса) JPEG/JPG, PNG, GIF изображений
• Конвертация в современные форматы WEBP/AVIF, что существенно уменьшает вес изображений
• Создание меньших по размеру копий под разные ширины экранов
• Создание больших копий для вывода на экранах с высокой плотностью пикселей на дюйм (DPI)

Всеми опциями можно управлять в настройках ЧФ4 , в разделе images -> optimize :

Внимание! ЧФ4 не применяет оптимизацию изображений при разработке под CMS WordPress

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

edithtml — при необходимости позволяет выключать автоматическое редактирование HTML-кода (вставка копий изображений под разные экраны, замена названия файла на современный формат при конвертации и т.п.)

sizes — позволяет через запятую указать ширины изображений, которые нужно создать для вывода на соответствующих экранах, например если указано [600, 1200] то:

В режиме разработки:

<img src="@img/cover.jpg" alt="Изображение">

После сборки проекта:

<picture><source media="(max-width: 600px)" srcset="./assets/img/cover-600.webp" type="image/webp"><source media="(max-width: 1200px)" srcset="./assets/img/cover-1200.webp" type="image/webp"><img alt="Image" src="./assets/img/cover.webp"></picture>

Если мы не хотим, чтобы ЧФ4 проводил такую ​​оптимизацию, оставляем квадратные скобки пустыми: []

Также есть возможность задавать свои размеры конкретному изображению, для этого добавьте атрибут data-fls-image-sizes с указанными размерами через запятую в тег <img>:

<img data-fls-image-sizes=»1000, 600″ src=»…» alt=»…»>

dpi — позволяет через запятую указать типы плотности пикселей экранов (2x, 3x и т.п.) для которых нужно создать изображение, например при [2,3] предыдущий пример будет выглядеть уже вот так:

<picture><source media="(max-width: 600px)" srcset="./assets/img/cover-600.webp 1x,./assets/img/cover-600-2x.webp 2x,./assets/img/cover-600-3x.webp 3x" type="image/webp"><source media="(max-width: 1200px)" srcset="./assets/img/cover-1200.webp 1x,./assets/img/cover-1200-2x.webp 2x,./assets/img/cover-1200-3x.webp 3x" type="image/web<img alt="Image" src="./assets/img/cover.webp" srcset="./assets/img/cover.webp 1x,./assets/img/cover-2x.webp 2x,./assets/img/cover-3x.webp 3x"></picture>

Если мы не хотим, чтобы ЧФ4 проводил такую ​​оптимизацию, оставляем квадратные скобки пустыми: []

attrignore – название атрибуты, при добавлении которого к тегу IMG оптимизация изображения, указанного в этом тезисе, будет игнорироваться.

modernformat – раздел конвертации в современные форматы WEBP/AVIF

modernformat -> enable – управляет потребностью конвертировать изображение в современный формат

modernformat -> type — указываем в какой формат конвертировать WEBP или AVIF

modernformat -> only — если true, то оригинальное изображение будет удалено, если false то будет интегрировано в конструкцию <picture>

modernformat -> quality — настройка качества изображения от 0 до 100, чем выше число тем лучше качество, но больше вес

jpeg – управление настройками формата JPEG

jpeg -> quality — настройка качества изображения от 0 до 100, чем выше число тем лучше качество, но больше вес

png – управление настройками формата PNG

png -> quality — настройка качества изображения от 0 до 100, чем выше число тем лучше качество, но больше вес

В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) есть возможность работать с SVG-спрайтом.

Чтобы создать SVG-спрайт, выполните следующие действия:

• В настройках ЧФ4 включите создание SVG-спрайта (images->svgsprite: true)
• Разместите SVG-иконки в папке src/assets/svgicons
• Запустите режим разработчика npm run dev

Использование SVG-спрайта

Для вывода иконки из спрайта в HTML в режиме разработчика вы можете воспользоваться одним из двух способов

Вывод с помощью тега <use> (можно использовать usvg снипет ):

<svg><использовать xlink:href="__spritemap#sprite-fb_icon"></использовать> </svg>

Или тег <img> (можно использовать usvgi снипет ):

<img src="__spritemap#sprite-fb_icon-view" alt="Изображение">

Где fb_icon это название файла иконки. Обратите внимание, что в варианте вывода с помощью тега <img> к имени иконки добавляется суффикс -view

Для вывода инокны из спрайта в SCSS в режиме разработчика вы можете воспользоваться специальным миксином:

@include sprite("fb_icon");

Где fb_icon это название файла иконки. В результате будет выведено свойство background из url иконки без повторения по центру.

В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) есть возможность работать с шаблонизатором PUG

Для того чтобы работать с PUG выполните следующие действия:

В настройках ЧФ4 включите обработку PUG (pug->enable: true)

В HTML-файле страницы добавьте подключение PUG-файла, например:

<pug src="@pug/index.pug"></pug>

Запустите режим разработчика npm run dev

Работайте в PUG-файлах в папке src/pug

Что такое компонент?

Компонент — это отдельный самодостаточный объект со своим собственным HTML/SCSS/JS кодом, который может использоваться и использовать в проекте. Размер компонента может быть как очень мал, например одна кнопка, так и очень велик – табы, спойлеры, модальные окна и т.д.

В стартовом шаблоне «Чертоги Фрилансера» 4 (далее ЧФ4) реализован полный компонентный подход к разработке, а также «горячее» подключение компонентов в проект.

Дополнительно, для тех или иных компонентов, реализована система плагинов, тоже оснащенных «горячим» подключением.

Компоненты находятся в папке src/components. И разбиты на несколько групп согласно своему типу:

• custom – папка для размещения собственных компонентов
• effects – компоненты для добавления определенных эффектов (анимаций) в проект
• forms – компоненты для работы с HTML-формами и их элементами
• layout – компоненты разных частей сайта, содержит также шаблоны страниц
• wordpress – содержит файлы и папки для разработки под CMS WordPress

Использование компонентов

В ЧФ4 было достигнуто минимальное вмешательство в JavaScript при работе с шаблоном, поэтому для того чтобы подключить тот или иной компонент в проект достаточно добавить определенный HTML-код, чаще всего это дата-атрибут, состоящий из data-fls-имя папки компонента.

ЧФ4 распознает этот код и автоматически подключит JS-файл и стили из соответствующей папки компонента.

Например, для добавления компонента табов в проект, мы используем HTML-структуру, содержащую дата-атрибут data-fls-tabs:

<div data-fls-tabs class="tabs">...</div>

А если там нужно использовать функционал «Динамического адаптива», то пользуемся соответствующим дата-атрибутом data-fls-dynamic=»…» и т.д.

Как правильно использовать тот или иной компонент ЧФ4 подробно описано всоответствующей документации компонента

Использование плагинов

Случается, что у определенного компонента есть или могут появиться дополнительные небольшие возможности JS/SCSS, поэтому в ЧФ4 разработана система плагинов для компонентов.

К примеру, компонент «Header» сам по себе не содержит никакого JS-функционала, и используется для вывода HTML-структуры и стилизации шапки сайта.

Но, согласно задаче, бывает, что необходимо добавить определенные эффекты к шапке в зависимости от скрола сайта. Для этого существует плагин scroll, который находится в папке plugins папки компонента.

Соответственно, для подключения данного плагина мы должны использовать дата-атрибут data-fls-header-scroll:

<header data-fls-header data-fls-header-scroll class="header">...</header>

При использовании плагинов учитывается, что они используются в качестве дополнения к компоненту и не используются отдельно.

Создание и использование собственных компонентов и плагинов

У ЧФ4 есть возможность создания собственных компонентов и плагинов с последующим использованием их в проекте.

Для создания собственных плагинов и компонентов выполните следующие действия:

Для собственного компонента

• Создайте папку компонента в src/component/custom/, назвав ее именем вашего компонента
• Создайте HTML/SCSS/JS файлы компонента с тем же именем, что и папка вашего компонента. Если ваш компонент не использует HTML или SCSS или JS код, то соответствующие файлы создавать не обязательно.
• Если вы создали и планируете использовать SCSS-файл стилей, то его необходимо подключить в JS-файл (если он есть) с помощью import ‘./имя компонента.scss’ или в HTML-файл: <link rel=»stylesheet» href=»@components/custom/имя компонента/имя>

Внимание!Для быстрого создания базовых файлов собственного компонента в папке src/component/custom вы можете воспользоваться командой npm run add имя компонента.

Имя должно быть латиницей без пробелов цифр и символов.

После выполнения в папке src/component/custom/имя компонента будут созданы HTML, SCSS и JS файлы компонента. В JS-файле уже будет подключен SCSS-файл

Для собственного плагина

• Создайте папку плагина в src/component/custom/имя компонента/plugins, назвав ее именем вашего плагина
• Создайте HTML/SCSS/JS файлы плагина с тем же именем, что и папка вашего плагина. Если ваш плагин не использует HTML или SCSS или JS код, то соответствующие файлы создавать не обязательно.
• Если вы создали и планируете использовать SCSS-файл стилей, то его необходимо подключить в JS-файл (если он есть) с помощью import ‘./имя плагина.scss’ или в HTML-файл: <link rel=»stylesheet» href=»@components/custom/имя компонента/’plug плагина.scss»>

Для использования собственных компонентов и плагинов выполните следующие действия:

Для использования собственного компонента

• Если ваш компонент содержит JS-файл, то для его автоматического («горячего») подключения в проект добавьте в ваш HTML код дата-атрибут состоящий из data-fls-имя папки вашего компонента. Например, вы создали компонент «aside», поэтому для его подключения дата-атрибут будет выглядеть как data-fls-aside
• Если ваш компонент содержит HTML-файл, который необходимо подключать к проекту, делайте это с помощью <include>
• Если ваш компонент содержит SCSS-файл, он подключится вместе с файлом компонента способом, соответствующим тому как именно вы создали компонент

Для использования собственного плагина

• Если ваш плагин содержит JS-файл, то для его автоматического («горячего») подключения в проект добавьте в ваш HTML код дата-атрибут состоящий из data-fls-имя папки вашего компонента-имя папки вашего плагина. Например, вы создали плагин «move» компонента «aside», поэтому для его подключения дата-атрибут будет выглядеть как data-fls-aside-move
• Если ваш плагин содержит HTML-файл, который необходимо подключать к проекту, делайте это с помощью <include>
• Если ваш плагин содержит SCSS-файл, он подключится вместе с файлом плагина таким образом, как вы создали плагин.

Страница удобной разработки компонентов

Если вы разрабатываете компоненты перед их использованием, в ЧФ4 присутствует отдельная страница для удобного вывода компонентов и их разработки.

Эта страница не попадает в собранный проект (режим продакшн) и служит только для удобства работы с компонентами

Для отображения страницы в панели разработки укажите параметр devcomponents -> enable: true в настройках ЧФ4

С помощью SCSS-миксина “Чувное (адаптивное) свойство” можно настроить (в зависимости от ширины экрана) автоматическое изменение значения того или иного CSS-свойства от начального значения, на определенной ширине экрана, до конечного значения на другой ширине экрана. Можно указывать произвольные промежутки ширины. Также существует несколько режимов поведения миксина вне указанных промежутков.

Использование миксина

Чтобы работать с миксином, нужно в SCSS селекторе вызвать снипет av :

Базовый режим работы миксина:

@include adaptiveValue("свойство", начальное значение, конечное значение);

Сказать:

• Свойство – CSS-свойство, значение которого необходимо адаптировать.
• Начальное значение – стартовое значение свойства в пикселях, пишем число без px. Обычно указывается по макету.
• Конечное значение – финальное значение свойства в пикселях, пишем число без px. Значение, к которому мы хотим прийти на меньших ширинах экрана.

Примеры:

@include adaptiveValue("размер-шрифта", 50, 20);@include adaptiveValue("отступ-сверху", 80, 10);...

Алгоритм работы миксина

Миксин работает на основе переменных значений $minWidth , $maxWidth , $maxWidthContainer , $containerPadding и $containerWidth расположенных в файле src/styles/settings.scss

В итоге, по умолчанию, миксин будет работать следующим образом:

Если $maxWidthContainer больше нуля, то значения свойства будут изменяться в промежутке ширины от $containerWidth до $minWidth . То есть, по всей ширине ограничивающего контейнера.

При этом, если ширина экрана больше $containerWidth , то значение свойства будет равно начальному значению. Если ширина экрана меньше $minWidth , то значение свойства будет равно конечному значению .

Если $maxWidthContainer равно нулю, значения свойства будут изменяться в промежутке ширин от $maxWidth до $minWidth .

Дополнительные настройки и режимы работы

Режимы работы

Поведение миксина мы можем настроить, указав режим работы.

@include adaptiveValue("свойство", начальное значение, конечное значение, режим работы);

Режим работы – может принимать числовые значения 0 / не указано , 1 , 2 или 3 :

• 0 / не указано – Если ширина экрана больше ширины от , то значение свойства равно начальному значению . Если ширина экрана меньше ширины до , то значение свойства будет равно конечному значению .
• 1 – Миксин будет работать только между минимальной и максимальной шириной экрана, или только в указанных промежутках, если они заданы (о промежутках смотри далее). При этих ширинах значения свойства будут по умолчанию или наследоваться от предков.
• 2 – Если ширина экрана больше ширины от , то значение свойства равно начальному значению . Если ширина экрана меньше ширины до , значение свойства будет по умолчанию или наследоваться от предков.
• 3 – Если ширина экрана больше ширины от , то значение свойства будет по умолчанию или наследоваться от предков. Если ширина экрана меньше ширины до , то значение свойства будет равно конечному значению .

Пример:

@include adaptiveValue("размер шрифта", 50, 20, 1);

Собственные промежутки

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

@include adaptiveValue(«свойство», начальное значение, конечное значение, режим работы, ширина от, ширина до);

• ширина от – стартовая ширина меньше которой начнется адаптация, пишем число без px.
• ширина до – конечная ширина к которой будет адаптироваться значение свойства, пишем число без px.

Внимание!При указании промежутков необходимо обязательно указать режим работы

Пример:

@include adaptiveValue("размер шрифта", 50, 20, 0, 800, 480);

Также мы можем использовать несколько миксиновых вызовов с разными промежутками:

@include adaptiveValue("размер шрифта", 50, 20, 2, 800, 480);@include adaptiveValue("размер шрифта", 20, 10, 3, 480);

В примере произойдет следующее: в промежутке ширин экрана от 800px до 480px значение свойства font-size будет чутко адаптироваться от 50px до 20px, а в промежутке от 480px до 320px чутко адаптироваться от 20px до 10px. Шире 800px значение свойства будет 50px, уже 320px значение свойства будет 20px.

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

Расположение

Миксин adaptiveValue находится в файле src/styles/includes/mixins.scss

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

Функционал динамического адаптива перемещает требуемый блок (на определенном расширении экрана) в другой блок. Перемещение отображается в разметке HTML. Когда ширина экрана меняется в большую сторону, объект возвращается на место.

Использование функционала

К блоку, который нужно переместить, добавляем атрибут data-fls-dynamic. Можно использовать снипет da. Подключение JS функционала произойдет автоматически

Вот возможные значения атрибута:

data-fls-dynamic="селектор блока, ширина экрана, позиция, селектор родительского блока"

Где:

• селектор блока – (обязательно) селектор объекта куда надо переместить
• ширина экрана – (обязательно, по умолчанию 767,98) ширина экрана при которой сработает магия перемещения
• позиция – (по умолчанию 0, то есть первая) позиция, которую займет перемещенный объект среди уже присутствующих
• селектор родительского блока – селектор объекта в котором находится селектор блока . Используется для уточнения места, куда надо переместить. Если указано, то компонент будет искать селектор блока , который вложен в селектор родительского блока

Функционал реагирует на клик на кнопку меню “бургера” (элемент с классом icon-menu) .

Также компонент содержит базовые стили иконки меню и анимации открытия.

Использование

Для построения меню и подключения функционала компонента можно использовать снипет menu или построить структуру вручную или подключить готовый пример из папки компонента .

Код меню:

<div class="menu">
<button type="button" data-fls-menu class="menu__icon icon-menu"><span></span></button>
<nav class="menu__body">
<ul class="menu__list">
<li class="menu__item">
<a href="#" class="menu__link">Главная</a>
</li>
...
</ul>
</nav>
</div>

Или подключение HTML-кода меню из компонента:

<include src="@components/layout/menu/menu.html"></include>

Важно, чтобы у кнопки открытия меню был атрибут data-fls-menu

HTML и базовые стили находятся в папке компонента src/components/layout/menu/

В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) реализован отдельный компонент шапки сайта и его плагины

Расположение компонента

Файлы компонента находятся в папке src/components/layout/header, здесь вы найдете JS-файл для написания логики компонента, HTML-файл с базовым кодом, SCSS-файл для стилизации компонента.

Также в папке src/components/layout/header/plugins присутствуют плагины компонента

Использование компонента

Подключите HTML-файл компонента на свою страницу с помощью <include> (подключено по умолчанию).

Использование плагинов

Плагин «Scroll»

Позволяет управлять классами, которые добавляются <header> во время скрола. Для подключения добавьте дата-атрибут data-fls-header-scroll к тегу <header>:

<header data-fls-header data-fls-header-scroll class="header">...</header>

Теперь, при скроле более одного пикселя к шапке будет добавляться класс —header-scroll

Для управления количеством прокрученных пикселей перед добавлением класса, добавьте дата-атрибута data-fls-header-scroll значение:

<header data-fls-header data-fls-header-scroll="500" class="header">...</header>

Также можно подключить функционал «исчезающей» шапки для улучшения юзабилити сайта, для этого добавьте дата-атрибут data-fls-header-scroll-show к тегу <header>:

<header data-fls-header data-fls-header-scroll data-fls-header-scroll-show class="header">...</header>

Теперь шапка будет исчезать при скроле вниз и появляться через 500ms паузы. Для управления паузой добавьте значение дата-атрибута data-fls-header-scroll-show:

<header data-fls-header data-fls-header-scroll data-fls-header-scroll-show="1000" class="header">...</header>

При необходимости изменить стилизацию плагина «Scroll» используйте файл src/components/layout/header/plugins/scroll/scroll.scss

В этом компоненте реализован плавный скролл после нажатия на ссылку (кнопке) к нужному блоку на странице. Если в адресе страницы будет передан хэш и блок с таким селектором будет найден на странице, прокрутка в блок будет автоматически. Также модуль позволяет построить навигацию по странице с добавлением класса текущему пункту навигации (пункта меню) при скроллах к определенному блоку.

Использование компонента

К элементам навигации (пунктам меню) или к произвольному объекту добавляем HTML-атрибут data-fls-scrollto , а в качестве значения указываем CSS селектор блока к которому нужно прокрутить:

<a href="#" data-fls-scrollto=".имя класса блока" class="link">Пункт навигации</a><a href="#" data-fls-scrollto="#id блока" class="link">Пункт навигации</a>

Если нужно, чтобы скролл учитывал шапку (не докручивал на высоту шапки, используется при фиксированных шапках), нужно добавить к объекту навигации атрибут data-fls-scrollto-header :

<a href="#" data-fls-scrollto-header data-fls-scrollto=".имя класса блока" class="link">Пункт навигации</a>

Если нужно, чтобы скролл не докручивался к блоку на указанную высоту, необходимо добавить к объекту навигации атрибут data-fls-scrollto-top , а в качестве значения указать число – необходимую высоту:

<a href="#" data-fls-scrollto-top="30" data-fls-scrollto="#id блок" class="link">Пункт навигации</a>

Добавление класса в текущий пункт навигации

Для включения функционала добавления класса необходимо задействовать компонент «наблюдатель» .

Для секций, при появлении которых будет добавляться класс в соответствующий пункт навигации, добавляем атрибут data-fls-watcher со значением navigator:

<a href="#" data-fls-scrollto=".some-section" class="link">Пункт навигации</a>
...
<section data-fls-watcher ="navigator" class="some-section"></section>

После этого, при прокрутке к объекту навигации, в соответствующий пункт навигации будет добавлен класс —navigator-active. А когда объект исчезает с вьюпорта, класс убирается.

Прокрутка к нужному блоку по хэшу (при открытии страницы)

Чтобы прокрутить страницу к нужному блоку при открытии страницы необходимо добавить в адрес хэш, содержащий имя класса нужного блока .

Пример адресной строки и нужного блока:

https://start-template.ru/index.html#некоторый-раздел

<section class="some-section"> ... </section>

Этот функционал позволяет использовать модульные (вытекающие) окна. Работа модуля состоит в следующем: пользователь нажимает на указанный элемент (по умолчанию это атрибут с указанным именем попапа data-fls-popup-link=’popup`s name’ ). При этом в тег body добавляется атрибут data-fls-popup-open . Также блокируется прокрутка страницы (можно отключить), фокусировка элементов «перелетает» на popup, с запоминанием предыдущего сфокусированного элемента на странице. Закрытие popup происходит при нажатии кнопки закрытия (по умолчанию элемент с атрибутом data-fls-popup-close ), по щелчку на пустом месте (не на popup), по нажатию кнопки ESC .

HTML/SCSS/JS файлы компонента находятся в папке src/components/layout/popup/

Использование компонента

С помощью include подключаем HTML-файл компонента к нашей HTML-странице (можно воспользоваться снопом pop):

<include src="@components/layout/popup/popup.html"></include>

В файле src/components/layout/popup/popup.html уже есть базовый HTML-код одного попапа, важно, что объект имеет атрибут data-fls-popup со значением popup. Это значение и есть именем попапа.

Вы можете создавать еще модальные окна, придающие им уникальные имена.

Для того чтобы выложить открытие того или иного окна добавьте объекту (ссылка, кнопка и т.д.) атрибут data-fls-popup-link и в зачении укажите имя попа, который нужно открыть (можно воспользоваться снипетом pl ).

Например по клику на эту ссылку откроется окно с именем popup :

<a href="#" data-fls-popup-link="popup">Всплывающее окно</a>

Дополнительные возможности

Компонент «Модальное окно» умеет открывать popup по хэшу. Например, по этому адресу откроется окно с именем popup :

http://localhost:1111/#всплывающее окно

Также есть возможность открывать YouTube-видео в модальном окне с автоматическим запуском воспроизведения. Для этого добавьте атрибут data-fls-popup-youtube, к объекту открывающему попап, со значением ID YouTube-видео.

Например, если YouTube-видео имеет такую ​​ссылку https://www.youtube.com/watch?v=fWeFxo1eWi8 то его ID это fWeFxo1eWi8. Именно этот код и указывается в атрибуте:

<a href="#" data-fls-popup-link="popup" data-fls-popup-youtube="TzqNA7FoEjY">Всплывающее окно</a>

Если ваше модальное окно открывается, например, по хешу или после отправки формы, то атрибут data-fls-popup-youtube с ID видео добавьте к главному тегу попапа в файле src/components/layout/popup/popup.html:

<div data-fls-popup="popup" data-fls-popup-youtube="TzqNA7FoEjY" aria-hidden="true" class="popup">.....</div>

В обоих случаях видео будет интегрировано в объект с атрибутом data-fls-popup-content с заменой всего содержимого, если возникает необходимость вывести видео в каком-нибудь другом месте модального окна, создайте объект и добавьте ему атрибут data-fls-popup-youtube-place

Методы и события

Методы

Для того чтобы вызвать тот или иной метод компонента, обращайтесь к нему через глобальную переменную window.flsPopup.

Например, следующее обращение откроет попап с именем popup:

window.flsPopup.open('всплывающее окно')

События

В классе попапов существует ряд событий:

• beforePopupOpen – сработает перед открытием попапа
• afterPopupOpen – сработает после открытия попапа
• beforePopupClose – сработает перед открытием попапа
• afterPopupClose – сработает после открытия попапа

Чтобы работать с событием вешаем прослушивание на document

document.addEventListener("afterPopupOpen", function (e) {// Popupconst currentPopup = e.detail.popup;})

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

Основные возможности

• Использование множества блоков с табами
• Открытие нужного таба по хэшу
• Превращение табов в спойлеры на указанной ширине экрана (удобно для адаптива)
• Возможность анимированного открытия табов
• Семантика

Расположение компонента

Файлы компонента находятся в папке src/components/layout/tabs, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.

Использование компонента

В нужном месте вызвать снипет tabs (классы можно заменить нужными). Или вручную создать структуру с соответствующими дата-атрибутами. Обратите внимание, что добавление класса —tab-active для заголовка таба сделает таб активным (открытым)

Пример блока с тремя табами:

<div data-fls-tabs class="tabs"><nav data-fls-tabs-titles class="tabs__navigation"><button type="button" class="tabs__title --tab-active">Таб №1</button><button type="button" class="tabs__ton" class="tabs__title">Таб №3</button></nav><div data-fls-tabs-body class="tabs__content"><div class="tabs__body">Содержимое первого таба</div><div class="tabs__body">Содержимое второго таба</div><div class="tabs__

Превращение табов в спойлеры

Для того, чтобы преобразовываться в спойлеры, необходимо для элемента с атрибутом data-fls-tabs указать значение ширины экрана ниже которой произойдет преобразование:

<div data-fls-tabs="768" class="tabs"> ... </div>

В момент преобразования к объекту с атрибутом data-tabs добавится класс —tab-spolle r, которым можно изменить стили для нового представления табов-спойлеров.

Открытие нужного таба по хэшу

Если необходимо открывать конкретный таб в конкретном блоке табов при открытии страницы по хэшу, необходимо для элемента с атрибутом data-fls-tabs добавить атрибут data-fls-tabs-hash :

<div data-fls-tabs data-fls-tabs-hash class="tabs"> ... </div>

Теперь, при нажатии на заголовки табов, в адрес страницы будет добавляться хеш вида: #tab-0-1, где 0 – это идентификатор блока с табами, а 1 – идентификатор таба в этом блоке.

Соответственно, перейдя на страницу с хешем #tab-0-1, откроется второй таб в первом блоке с табами. При #tab-2-0 откроется первый таб в третьем блоке с табами и так далее.

Анимация при открытии таба

Для того чтобы табы открывались плавно, необходимо объекту с атрибутом data-fls-tabs , добавить атрибут data-fls-tabs-animate , а в качестве значения указать количество миллисекунд, за которые откроется таб (по умолчанию 500).

<div data-fls-tabs data-fls-tabs-animate="1000" class="tabs"> ... </div>

Спойлер – это заглавие, при нажатии на которое под ним развертывается определенный контент.

Основные возможности

• Использование множества блоков со спойлерами
• Выключение/включение функционала на определенной ширине экрана
• Функция «аккордеон», когда в блоке может быть открыт только один спойлер
• Возможность закрытия по клику за пределами спойлера
• Возможность анимированного открытия
• Семантика и доступность

Расположение компонента

Файлы компонента находятся в папке src/components/layout/spollers, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.

Использование компонента

В нужном месте вызвать Снипет spollers (классы можно заменить на нужные). Или вручную создать структуру с соответствующими дата-атрибутами. Обратите внимание, что добавление атрибута data-fls-spollers-open для элемента details сделает спойлер активным (открытым).

Пример блока с двумя спойлерами:

<div data-fls-spollers class="spollers">
<details class="spollers__item">
<summary class="spollers__title">Заголовок спойлера</summary>
<div class="spollers__body">Контент спойлера #1</div>
</details>
<details class="spollers__item">
<summary class="spollers__title">Заголовок спойлера #2</summary>
<div class="spollers__body">Контент спойлера</div>
</details>
</div>

В момент инициализации (включения) функционала спойлера контент будет скрыт, а к элементу с атрибутом data-fls-spollers будет добавлен класс —spoller-init

Выключение/включение функционала на определенной ширине экрана

Для того чтобы отключить/включить функционал спойлера на определенной ширине экрана, необходимо для атрибута data-fls-spollers через запятую указать нужную ширину экрана и тип:

• max (по умолчанию) — функционал включится на ширину меньше указанной
• min — функционал включится на ширине больше указанной

<div data-fls-spollers="768,min" class="spollers"> ... </div>

Включение режима “аккордеон”

Для включения режима аккордеона необходимо для элемента с атрибутом data-fls-spollers добавить атрибут data-fls-spollers-one

<div data-fls-spollers data-fls-spollers-one class="spollers"> ... </div>

Теперь при открытии спойлера другой открытый спойлер в блоке будет закрываться.

Управление скоростью анимации

Для того чтобы управлять временем анимации открытия/закрытия спойлера, необходимо для элемента с атрибутом data-fls-spollers добавить атрибут data-fls-spollers-speed , а в качестве значения указать время анимации в миллисекундах (по умолчанию 500).

<div data-fls-spollers data-fls-spollers-speed="1000" class="spollers"> ... </div>

Закрытие при клике вне спойлера

Если необходимо закрывать спойлер(ы) при клике вне блока (“на пустом месте”), следует добавить нужному заголовку(ам) атрибут data-fls-spollers-close

<div data-fls-spollers class="spollers">
<details class="spollers__item">
<summary data-fls-spollers-close class="spollers__title">Заголовок спойлера</summary>
<div class="spollers__body">Контент спойлера</div>
</details>
</div>

Прокрутка к заголовку

Если необходимо прокрутить скролл до заголовка открытого спойлера, следует добавить нужному элементу (тег details) атрибут data-fls-spollers-scroll

<div data-fls-spollers class="spollers">
<details data-fls-spollers-scroll class="spollers__item">
<summary class="spollers__title">Заголовок спойлера</summary>
<div class="spollers__body">Контент спойлера</div>
</details>
</div>

Есть возможность более тонких настроек. Например, если нужно, чтобы скролл учел шапку сайта (когда она фиксирована), то стоит добавить атрибут data-fls-spollers-scroll-noheader .

Также, в самом атрибуте data-fls-spoller-scroll можно дописать числовое значение, которое будет учтено при скроле:

<div data-fls-spollers class="spollers">
<details data-fls-spollers-scroll="20" data-fls-spollers-scroll-noheader class="spollers__item">
<summary class="spollers__title">Заголовок спойлера</summary>
<div class="spollers__body">Контент спойлера</div>
</details>
</div>

Компонент «Показать еще» позволяет сначала скрыть часть текста или элементов списка, показывая только указанную высоту или количество элементов. Есть возможность включать функционал на определенной ширине экрана (брейкпоинте).

Расположение компонента

Файлы компонента находятся в папке src/components/layout/showmore, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.

Использование компонента

В нужном месте вызвать снипет showmore (классы заменить нужными). Или вручную создать структуру, где для оболочки добавлен атрибут data-fls-showmore , для дочернего элемента data-fls-showmore-content и кнопки data-fls-showmore-button . Кнопку сначала нужно скрыть, добавив атрибут hidden и добавить два тега <span> с текстом показа и сокрытия контента:

<div data-fls-showmore class="block"><div data-fls-showmore-content class="block__content"></div><button hidden data-fls-showmore-button type="button" class="block__more"> <span>Показать еще</span> <span>Принять</span> </button></div>

К элементу с атрибутом data-fls-showmore-content добавляем текст и другой контент или если это список (UL/OL) элементы списка (LI).

В зависимости от используемого контента (текст или элементы списка) указываем значение для атрибута data -fls -showmore :

• size – ограничение по высоте блока (по умолчанию)
• items – ограничение количества выводимых элементов списка

<div data-fls-showmore="items" class="block"><uldata-fls-showmore-content class="block__content"><li>Пункт №1</li> <li>Пункт №2</li> <li>Пункт №3</li><li>Пункт №4</li><li>Пункт №5</li></ul><button hidden data-fls-showmore-button type="button" class="block__more"> <span>Показать еще</span> <span>Принять</span> </button></div>

В зависимости от того, какой тип выбран, указываем значение для атрибута data-fls-showmore-content :

• Высота блока в пикселях (число без px, по умолчанию 150)
• Количество выведенных элементов списка (число по умолчанию 3 )

<div data-fls-showmore class="block"><div data-fls-showmore-content="200" class="block__content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis explicabo voluptates grand culpa, perferendis vel quam consequuntur possimus, vero Placeat quo enim obcaecati quas, veritatis magnam not. Architecto, porro voluptatum?</div><buttonhidden data-fls-showmore-button type="button" class="block__more"> <span>Показать больше</span> <span>Скрыть</span> </button></div>

Если контент будет меньше, чем указанное ограничение, кнопка “Показать еще” не будет показана . В противном случае, контент ограничится по высоте или по количеству элементов и при нажатии на кнопку будет показан полностью, также к элементу с атрибутом data-fls-showmore добавится класс —showmore-active (первый спан в кнопке будет скрыт, а второй показан). Повторный клик вернет ограничение.

Есть возможность управлять скоростью развертывания контента, для этого следует указать значение атрибута data-fls-showmore-button в миллисекундах (по умолчанию 500):

<div data-fls-showmore class="block"><div data-fls-showmore-content="200" class="block__content"> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Blanditiis explicabo voluptates grand culpa, perferendis vel quam consequuntur possimus, vero Placeat quo enim obcaecati quas, veritatis magnam not. Architecto, porro voluptatum?</div><button Hidden data-fls-showmore-button="1000" type="button" class="block__more"> <span>Показать больше</span> <span>Скрыть</span> </button></div>

Включение функционала на определенной ширине экрана

Для того чтобы использовать функционал на определенной ширине экрана, к объекту с атрибутом data-fls-showmore добавляем атрибут data-fls-showmore-media где, через запятую, указываем нужную ширину, а также тип:

• max (по умолчанию) – функционал включается на ширине меньше указанной
• min – функционал включится на ширине больше указанной

<div data-fls-showmore data-fls-showmore-media="768,min" class="block"><div data-fls-showmore-content="200" class="block__content"> Lorem ipsum dolor sit amet consectetur, adipicing elit. Blanditiis explica voluptates grand culpa, perferendis vel quam consequuntur possimus, vero Placeat quo enim obcaecati quas, veritatis magnam not. Architecto, porro voluptatum?</div><button Hidden data-fls-showmore-button="1000" type="button" class="block__more"> <span>Показать больше</span> <span>Скрыть</span> </button></div>

В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) реализован функционал изменения стиля сайта темный/светлый, опираясь на настройки пользовательской системы либо по времени суток либо с помощью кнопки.

Расположение компонента

Файлы компонента находятся в папке src/components/effects/darklite, здесь вы найдете JS-файл компонента и SCSS-файл для стилизации

Использование компонента

Добавьте на свою HTML-страницу дата-атрибут data-fls-darklite, например к тегу <html>:

<html data-fls-darklite>

Этого достаточно, чтобы компонент распознал настройки системы пользователя и добавил соответствующий дата-атрибут к тегу <html>: data-fls-darklite-light или data-fls-darklite-dark

Если вы хотите, чтобы атрибуты стиля добавлялись по времени суток, добавьте атрибут data-fls-darklite-time:

<html данные-fls-darklite данные-fls-darklite-time>

Теперь атрибут data-fls-darklite-dark будет добавляться с 18 часов вечера до 5 часов утра, все остальное время будет добавляться атрибут data-fls-darklite-light

Для настройки собственного промежутка в котором будет добавляться атрибут data-fls-darklite-dark, укажите для атрибута data-fls-darklite-time значение через запятую:<html data-fls-darklite data-fls-darklite-time=»13,23″>

Теперь атрибут data-fls-darklite-dark будет добавляться в промежутке с 13 часов до 23 часов

Если вы хотите предоставить пользователю возможность включать ту или иную тему сайта, добавьте в ваш интерфейс кнопку с дата-атрибутом data-fls-darklite-set:

<button data-fls-darklite-set>...</button>

При нажатии кнопки текущая тема сменится на противоположную, и в браузере пользователя будет сохранен его выбор.

Чтобы предоставить пользователю возможность удалять сохраненный выбор темы, добавьте в ваш интерфейс кнопку с дата-атрибутом data-fls-darklite-reset:

<button data-fls-darklite-reset>...</button>

В шаблоне «Чертоги Фрилансера» 4, далее ЧФ 4, есть подготовка к работе со слайдером Swiper .

Расположение компонента

Файлы компонента находятся в папке src/components/layout/slider, здесь вы найдете JS-файл компонента с инициализацией и базовыми настройками, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.

Использование компонента

Существует два сниппета для построения HTML-структуры слайдера:

• swiper – строит минимальную структуру с уже добавленными классами слайдера (для более опытных)
• swiperfull – строит полную структуру слайдера с добавлением всех возможных элементов управления (кнопки слева/справа, скролл, пагинация (булеты)) с уже добавленными классами слайдера. Весь код сопровождается комментариями (для новичков).

В файле src/components/layout/slider/ slider.js выполняется подключение самого слайдера Swiper из пакета NPM (подключено по умолчанию)

импортировать Swiper, {Навигация} из ‘swiper’;

При необходимости можно подключить больше нужных модулей:

импортировать Swiper, {Навигация, Нумерация страниц, Ленивый, Автозапуск} из ‘swiper’;

Полный список модулей – здесь

Также, ниже кода, есть пример-подготовка для создания конкретного слайдера (функция initSliders(); ) Здесь мы создаем и настраиваем нужные нам слайдеры, не забываем указывать модули для конкретного слайдера

новый Swiper('.swiper', { модули: [Навигация, Автозапуск], ... }

Информацию по настройке см. в документации на сайте слайдера.

Инициализация слайдера(ов) initSliders(); происходит после полной загрузки страницы ниже кода:

window.addEventListener("load", initSliders)

По умолчанию в файле src/components/layout/slider/ slider.js подключены базовые, минимально необходимые для работы стили слайдера import «./slider.scss»; (для более опытных). Также есть возможность подключить (разкомментировав строку) полные стили слайдера из npm пакета import ‘swiper/css/bundle’; (для начинающих)

Для более широкого использования возможностей компонента слайдера см. документацию Swiper

Функционал подключает галерею ( LightGallery ). При нажатии изображения картинки полное изображение открывается с возможностью слайд-шоу. Можно создавать как встроенные, так и лайтбокс-галереи (в правом углу размещается ряд кнопок (настраивается) для расширенных функций. Например: “Закрыть слайд-шоу”, “Загрузка изображения” и др. Галерея, поддерживает как простые изображения, так и видео или фреймы.

Для работы галереи необходимы изображения (видеофайлы) в двух форматах: миниатюры – изображения небольшого размера, которые используются для просмотра и изображения полного размера – необходимы для детального просмотра.

Расположение компонента

Файлы компонента находятся в папке src/components/layout/gallery, здесь вы найдете JS-файл компонента с базовыми настройками, HTML-файл с примером кода, а также папку assets с CSS-файлами компонента.

Использование компонента

В HTML , к тегу отца объектов галереи, добавляем дата-атрибут data-fls-gallery .

<div data-fls-gallery class="gallery"> .... </div>

Сам объект галереи состоит из такой конструкции (тег для полного размера изображения и внутри тег для превью). Например, можно использовать следующую разметку:

<div data-fls-gallery class="gallery"><a href="img/img-full-1.jpg" class="gallery__image"><img alt="Превью" src="img/img-thumb-1.jpg" class="gallery__preview"></a><a href="img/img-full-2.jpg" class="gallery__image"><img alt="Превью" src="img/img-thumb-2.jpg" class="gallery__preview"></a>...</div>

Для более широкого использования возможностей компонента галереи см. документацию LiteGallery

Компонент “До/После” – это вывод 2х изображений, с возможностью, перетаскивая разделяющую, линию отобразить одно или другое изображение.

Расположение компонента

Файлы компонента находятся в папке src/components/layout/beforeafter, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.

Использование компонента

В HTML, в нужном месте, вызвать снипет ba (классы можно заменить нужными). Или вручную создать структуру с соответствующими дата-атрибутами.

<div data-fls-beforeafter class="before-after"><div data-fls-beforeafter-before class="before-after__item">...</div><div data-fls-beforeafter-after class="before-after__item">...</div><div data-fls-beforeafter-arrow class="before-after__arrow"></div></div>

С помощью тега IMG добавьте загрязнения в соответствующие HTML-элементы, добавьте необходимую стилизацию для разделяющей линии data-fls-beforeafter-arrow

<div data-fls-beforeafter class="before-after"><div data-fls-beforeafter-before class="before-after__item"><img src="@img/image-1.jpg" alt="Изображение"></div><div data-fls-beforeafter-after class="before-after__item"><img src="@img/image-2.jpg" alt="Изображение"></div><div data-fls-beforeafter-arrow class="before-after__arrow"></div></div>

Масонри сетка – это специфический вывод элементов таким образом, что они заполняют все место в структурных колонках. Пример: вывод изображений на Pinterest

В стартовом шаблоне «Чертоги Фрилансера» 4 реализована возможность построения масонри сетки на основе Isotope . Что позволяет не только выводить элементы в виде масонры сетки, но и добавлять функционал фильтрации, сортировки и т.п.

Расположение компонента

Файлы компонента находятся в папке src/components/layout/masonry, здесь вы найдете JS-файл компонента с базовыми настройками и функционалом фильтрации, HTML-файл с примером кода, а также SCSS-файл для стилизации компонента

Использование компонента

В нужном месте HTML-файта, вы можете воспользоваться снипетом masonry или вручную создать структуру с соответствующими дата-атрибутами:

<div data-fls-masonry class="masonry"><div data-fls-masonry-item class="masonry__item">A</div><div data-fls-masonry-item class="masonry__item">B</div><div data-fls-masonry-item class="masonry__item">C</div></div>

Вот пример масонры сетки с возможностью фильтрации:

<div class="masonry"><ul class="masonry__filter filter-masonry"><li class="filter-masonry__item"><a href="#" data-fls-masonry-filter-link="*" class="filter-masonry__link">Использование</a></li> <li class="filter-masonry__item"><a href="#" data-fls-masonry-filter-link="a" class="filter-masonry__link">Фильтр А</a></li><li class="filter-masonry__item"><a href="#" data-fls-masonry-filter-link="b" class="filter-masonry__link">Фильтр B</a></li><li class="filter-masonry__item"><a href="#" data-fls-masonry-filter-link="c" class="filter-masonry__link">Фильтр C</a></li></ul><div data-fls-masonry class="masonry__items"><div data-fls-masonry-item data-fls-masonry-filter="a" class="masonry__item">A</div><div data-fls-masonry-item data-fls-masonry-filter="b" class="masonry__item">B</div><div data-fls-masonry-item data-fls-masonry-filter="c" class="masonry__item">C</div></div></div>

Для более широкого использования возможностей компонента см. документацию Isotop

В шаблоне встроен функционал поэкранной прокрутки (скрола) страницы. По умолчанию любая секция страницы занимает минимум всю высоту экрана.

Расположение компонента

Файлы компонента находятся в папке src/components/layout/fullpage, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.

Использование компонента

В HTML, вы можете использовать снипет fullpage или построить HTML-структуру самостоятельно:

<div data-fls-fullpage class="some-class"><div data-fls-fullpage-section class="some-class__section"> ... </div>...</div>

Буллеты

Есть возможность добавить кнопки переключения секций (буллеты). Для этого в объект с дата атрибутом data-fls-fullpage добавить дата атрибут data-fls-fullpage-bullets

<div data-fls-fullpage data-fls-fullpage-bullets class="some-class"><div data-fls-fullpage-section class="some-class__section"> ... </div>...</div>

Эффекты переключения

Для изменения эффекта переключения, объекту с дата атрибутом data-fls-fullpage добавить дата атрибут data-fls-fullpage-effect и в качестве значения добавить один из следующих параметров fade, cards, slider (по умолчанию)

<div data-fls-fullpagedata-fls-fullpage-effect="fade" class="some-class">
<div data-fp-section class="some-class__section"> ... </div>...</div>

Компонент Наблюдатель можно использовать для решения различных задач: анимация элементов при скроле, подсветка активного пункта меню (используется в компоненте СкролДо) и многих других.

Суть работы наблюдателя заключается в добавлении класса —watcher-view элемента в момент его появления в вьпорте (экране) при скроле и при открытии страницы. И, соответственно, убран при уходе объекта из вьюпорта.

Использование компонента

Для того, чтобы «Наблюдатель» начал следить за объектом, добавьте ему атрибут data-fls-watcher

<div data-fls-watcher class="block"> ... </div>

Дополнительные настройки:

• data-fls-watcher-root=’селектор’ – селектор отца внутри которого будет наблюдать за объектом. По умолчанию <body>
• data-fls-watcher-margin=’значение’ – отступление от отца. Указываем значение в PX или в %
• data-fls-watcher-threshold=’значение’ – процент отображения объекта для срабатывания. Где 1=100% показ объекта. Указываем только целые или десятичные числа, по умолчанию 0. Может содержать массив значений через запятую.
• data-fls-watcher-once – наблюдать только один раз. То есть класс к объекту добавится только один раз и не будет убран при выходе из вьюпорта.

Пример – класс прибавится только один раз, с появлением объекта на 50% его высоты:

<div data-fls-watcher-threshold="0.5" data-fls-watcher-once data-fls-watcher class="block"> ... </div>

События

После каждого срабатывания наблюдателя возникает событие watcherCallback , его можно отловить в любой части кода:

document.addEventListener("watcherCallback", function(e) {// Полная информация от наблюдателяconst entry = e.detail.entry// Наблюдаемый объектconst targetElement = entry.target})

Компонент выводит и анимирует цифровую статистику, которая является очень распространенным элементом в дизайне.

Расположение компонента

Файлы компонента находятся в папке src/components/layout/digcounter, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.

Использование компонента

В HTML, вы можете использовать снипет digcounter или построить HTML-структуру самостоятельно:

<div data-fls-watcher class="block"><div data-fls-digcounter class="block__item">1500</div><div data-fls-digcounter class="block__item">500</div><div data-fls-digcounter class="block__item">800</div>...</div>

Обратите внимание, для запуска анимации используется компонент «Наблюдатель» , поэтому к родительскому элементу счетчика добавлен дата-атрибут data-fls-watcher

Дополнительные возможности

Изменение скорости

Для изменения скорости анимации необходимо добавить атрибут data-fls-digcounter-speed к элементу счетчика и указать скорость в миллисекундах (1000 по умолчанию)

<div data-fls-watcher class="block"><div data-fls-digcounter data-fls-digcounter-speed="500" class="block__item">1500</div><div data-fls-digcounter data-fls-digcounter-speed="200" class="block__item">500</div><div data-fls-digcounter data-fls-digcounter-speed="1700" class="block__item">800</div>...</div>

Форматирование

Существует возможность форматирования вывода цифр, отделяя тысячи сотри тысяч и т.д. Для этого нужно добавить атрибут data-fls-digcounter-format к элементу счетчика. Для настройки разграничителя можно добавить символ в качестве значения атрибута (по умолчанию пробел)

<div data-fls-watcher class="block"><div data-fls-digcounter data-fls-digcounter-format="." class="block__item">1500</div><div data-fls-digcounter data-fls-digcounter-format class="block__item">500</div><div data-fls-digcounter data-fls-digcounter-format="," class="block__item">800</div>...</div>

Компонент «Прелоадер» способен отображать определенную анимацию при загрузке страницы. Подходит для страниц с большим количеством изображений.

Расположение компонента

Файлы компонента находятся в папке src/components/effects/preloader, здесь вы найдете JS-файл компонента, HTML-файл, который автоматически подключается в <head>, а также SCSS-файл для стилизации компонента.

Использование компонента

В HTML-файлах страниц, где требуется прелоадер, настройте переменные передаваемые через locals в шаблон страницы:

..."preloader": {"enable":"true","once":"false"},...

Где preloader->enable это выключатель компонента, а preloader->once это включатель всего одного показа анимации подгрузки.

В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) можно использовать собственную стилизацию и анимацию курсора мыши.

Расположение компонента

Файлы компонента находятся в папке src/components/effects/cursor, здесь вы найдете JS-файл компонента, а также SCSS-файл для стилизации компонента.

Использование компонента

В HTML к объекту, внутри которого нужно выводить стилизованный курсор, добавьте дата-атрибут data-fls-cursor

<html data-fls-cursor>

Для добавления анимационного элемента курсора так называемой тени добавьте еще один атрибут data-fls-cursor-shadow

<html data-fls-cursor data-fls-cursor-shadow>

Стилизуйте компонент по желанию.

Очень полезный компонент с анимацией строки с элементами

Расположение компонента

Файлы компонента находятся в папке src/components/effects/marquee, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.

Использование компонента

В HTML воспользуйтесь снипетом mar, или постройте структуру с использованием дата-атрибута data- fls-marquee

<div data-fls-marquee>
<div>елемент один</div>
<div>елемент два</div>
...
</div>

Дополнительные возможности

Для корректировки отступов между элементами используйте дата-атрибут data-fls-marquee-space со значением (по умолчанию 30px):

<div data-fls-marquee data-fls-marquee-space="50">
<div>елемент один</div>
<div>елемент два</div>
...
</div>

Для корректировки скорости анимации используйте дата-атрибут data-fls-marquee-speed со значением в миллисекундах (по умолчанию 1000ms):

<div data-fls-marquee data-fls-marquee-speed="2000"><div>элемент один</div><div>элемент два</div>...</div>

Для остановки анимации при наведении мыши используйте дата-атрибут data-fls-marquee-pause:

<div data-fls-marquee data-fls-marquee-pause>
<div>елемент один</div>
<div>елемент два</div>
...
</div>

Для изменения направления движения используйте дата-атрибут data-fls-marquee-direction и значение замка - left, right, top, bottom (значение по умолчанию left)<div data-fls-marquee data-fls-marquee-direction="right"><div>элемент один</div><div>элемент два</div>...</div>

При использовании data-fls-marquee-direction ‘top’ или ‘bottom’ у объекта должна быть фиксированная высота и overflow: hidden;

В шаблоне «Чертоги Фрилансера» 4 (ЧФ4) реализован функционал, помогающий решать разные рутинные задачи при работе с формами.

В этом документе описан общий функционал работы с полями, плейсхолдерами, валидацией, вариантами отправки форм и т.п. В отдельных разделах будет описан функционал конкретных элементов форм, таких как:

• Отправка писем на почту (Работа с PHPMailer)
• Компонент «Выбрать»
• Компонент «Чекбокс и радио»
• Компонент «Инпут»
• Компонент «Звездный рейтинг»
• Компонент «Количество»
• Компонент «Ползунок»
• Список дополняется…

Расположение компонента

Файлы компонента находятся в папке src/components/layout/map, здесь вы найдете JS-файлы компонента и настроек, файл HTML с примером кода, а также SCSS-файл для стилизации компонента.

Использование компонента

В HTML или постройте структуру формы с использованием дата-атрибута data- fls-form:

<form data-fls-form method="POST" action="..." ><input required type="email" name="form[email]" data-fls-form-errtext="Error" placeholder="E-mail" class="input"><button type="submit" class="button">Отправить</button></form>

Общая работа с полями форм

Работа с полями форм подразумевает следующий функционал:

• Добавление классов полю и его родителю при фокусе
• Возможность моментальной валидации поля при потере фокуса

Добавление классов

По умолчанию, при возникновении фокуса, к полю и его непосредственному родительскому элементу, прибавится класс —form-focus . Если нам нужно отключить добавление классов для конкретного поля, ему следует добавить атрибут data-fls-form-nofocus

Валидация поля при потере фокуса

Чтобы скрипт начал вызывать функционал валидации поля в момент потери им фокуса, следует добавить полю атрибут data-fls-form-validatenow.

Следует добавить, что функционал работы с полями форм также удалит ошибку добавленного к полю валидатора при получении фокуса. Подробнее о функционале валидации полей смотрите в этом документе.

Валидация элементов форм

Чтобы элемент формы стал проходить валидацию, ему следует добавить атрибут required . Теперь при отправке формы, а также если элементу добавлен атрибут data-fls-form-validatenow, он будет проверяться на предмет правильного заполнения.

При добавленном атрибуте data-fls-form-validatenow валидация будет происходить мгновеннопри потере полем фокуса

Чтобы включить особые правила валидации поля можно изменить значение его отрибута type:

• email – включит валидацию на ввод коретного E-mail
• идет работа над новыми пресетами

Пример:

<input required type="email" name="form[]">

Если элемент заполнен неправильно, к нему, а также к его родителю будет добавлен класс —form-error . Если мы хотим дополнительно вывести произвольный текст ошибки, следует указать его в атрибуте data-fls-form-errtext и добавить в поле:

<input data-fls-form-errtext="Ошибка E-mail" required type="email" name="form[]">

Теперь, при возникновении ошибки валидации, под элементом будет добавлен объект с классом —form-error , содержащий ваш текст ошибки.

Напомню, что функционал с полями удалит классы ошибок и объект с классом —form-error при получении полем фокуса.

Для отключения валидации элементов конкретной формы ей следует добавить атрибут data-fls-form-novalidate

Отправка форм

Валидация элементов формы

По умолчанию при отправке формы поля отмеченные required будут проходить валидацию. Для отключения валидации элементов конкретной формы ей следует добавить атрибут data-fls-form-novalidate

Режимы отправки формы

В ЧФ4 существует несколько режимов контроля передачи форм:

• Стандартная HTML отправка формы (по умолчанию) – если валидация пройдена (была включена), форма отправится на указанный в атрибуте action адрес (с переходом страницы), методом указанным в атрибуте метод.
• AJAX отправка формы – если валидация пройдена (была включена), форма отправится AJAX запросом на указанный в атрибуте action адрес, методом указанным в атрибуте method. Страница не перезагрузится, все элементы формы вернутся в исходные значения (очистка формы).
• Режим имитации отправки формы – если валидация пройдена (была включена), форма никуда не отправится, страница не перезагрузится, все элементы формы вернутся к исходным значениям (очистка формы). Используется для демонстрации дополнительных возможностей, таких как показ попапа об успешной отправке.

Для включения режима AJAX передачи достаточно добавить значение ajax атрибута data-fls-form, а если требуемый режим имитации передачи добавляем значение dev .

<form data-fls-form="ajax" class="form" method="POST" action="...">...</form>

Прокрутка к элементу с ошибкой

Бывает, что форма очень велика и при возникновении ошибки валидации хорошо показать элемент с ошибкой пользователю. Для этого есть функционал «прокрутка к элементу с ошибкой». Для включения достаточно добавить форме атрибут data-fls-form-gotoerr

<form data-fls-form-gotoerr class="form" action="...">...</form>

Показ попапа после отправки формы

Если необходимо, после отправки формы, показать попап добавляем в форму атрибут data-fls-form-popup и как значение указываем имя попапа

Только для режимов ajax или dev. Компонент попапов также должен быть подключен

<form data-fls-form="ajax" data-fls-form-popup="form-message" class="form" action="...">...</form>

События

После каждой отправки формы срабатывает событие в formSent , его можно отловить в любой части кода:

document.addEventListener("formSent", function (e) {
// Форма
const currentForm= e.detail.form
})

Компонент позволяет настраивать внешний вид стандартного элемента формы <select> и его пунктов <option>, а также реализует дополнительные возможности.

Расположение компонента

Файлы компонента находятся в папке src/components/forms/select. Здесь вы найдёте JS-файл компонента, HTML-файл с примером кода, а также SCSS-файл для стилизации.

Использование компонента

В HTML непосредственно к тегу <select> добавьте атрибут data-fls-select:

<select data-fls-select name="form[]">
  <option value="" selected>Плейсхолдер</option>
  <option value="2">Пункт</option>
  <option value="3">Пункт</option>
  <option value="4">Пункт</option>
</select>

Настройки и функционал модуля

Для подключения того или иного функционала модуля используются различные HTML-атрибуты.

Атрибуты для тега <select>

• multiple — включает множественный выбор.
• disabled — делает селект недоступным.
• data-fls-select-class-modif="имя-класса" — добавляет модификатор конкретному селекту. В результате получится select select_имя-класса.
• data-fls-select-tags — режим тегов, доступный только для multiple. Позволяет выводить выбранные значения в виде тегов с крестиком для удаления. Теги можно разместить в другом блоке, указав его CSS-селектор в качестве значения атрибута.
• data-fls-select-scroll — включает прокрутку списка. Дополнительно можно подключить кастомный скролл SimpleBar в js/app.js. Числовое значение атрибута ограничивает высоту контейнера выпадающего списка.
• data-fls-select-checkbox (в работе) — стилизация элементов под чекбоксы, только для multiple.
• data-fls-select-show-selected — отключает скрытие выбранного элемента.
• data-fls-select-search — позволяет искать по списку.
• data-fls-select-speed — задаёт скорость открытия и закрытия списка в миллисекундах. По умолчанию — 150.
• data-fls-select-open — селект сразу открыт.
• data-fls-select-submit — отправляет форму при изменении выбранного значения.
• data-fls-select-pseudo-label="заголовок" — добавляет к заголовку селекта псевдоэлемент с указанным текстом, а также класс _select-pseudo-label.

Атрибуты для тега <option>

• data-fls-select-class="имя-класса" — добавляет класс.
• data-fls-select-asset="путь к картинке или текст" — добавляет в элемент списка структуру из двух колонок с указанными данными.
• data-fls-select-href="адрес ссылки" — добавляет ссылку к элементу списка.
• data-fls-select-href-blank — открывает ссылку в новом окне.

Атрибуты для плейсхолдера

Плейсхолдер — это элемент <option> с пустым значением value.

• data-fls-select-label — добавляет label к селекту.
• data-fls-select-show — показывает плейсхолдер в списке, только для одиночного выбора.

Атрибуты для других элементов

data-fls-select-one — селекты внутри элемента с этим атрибутом будут открываться только по одному. При открытии одного селекта другой открытый селект закрывается.

<select data-fls-select data-fls-select-submit data-fls-select-scroll data-fls-select-class-modif="form" name="form[]">
  <option value="" selected>Плейсхолдер</option>
  <option value="2">Пункт</option>
  <option data-fls-select-href="about.html" value="3">Пункт-ссылка</option>
  <option value="4">Пункт</option>
</select>

События

После каждого выбора элемента селекта срабатывает событие selectCallback. Его можно отследить в любой части кода:

document.addEventListener("selectCallback", function (e) {
  // Текущий селект
  const currentSelect = e.detail.select;
});

Компонент представляет собой готовый блок для выбора количества, например товара в интернет-магазине.

Расположение компонента

Файлы компонента находятся в папке src/components/forms/quantity. Здесь вы найдёте JS-файл компонента, HTML-файл с примером кода, а также SCSS-файл для стилизации.

Использование компонента

В HTML воспользуйтесь сниппетом quantity или напишите код с использованием data-атрибутов:

<div data-fls-quantity class="quantity">
  <button data-fls-quantity-minus type="button" class="quantity__button quantity__button--minus"></button>
  <div class="quantity__input">
    <input data-fls-quantity-value autocomplete="off" type="text" name="form[]" value="1">
  </div>
  <button data-fls-quantity-plus type="button" class="quantity__button quantity__button--plus"></button>
</div>

Дополнительные параметры

К элементу <input> можно добавить дополнительные настройки:

• data-fls-quantity-max="число" — устанавливает максимальное значение поля.
• data-fls-quantity-min="число" — устанавливает минимальное значение поля.

Компонент «Звёздный рейтинг» позволяет выводить и получать оценку в виде ряда звёзд.

Расположение компонента

Файлы компонента находятся в папке src/components/forms/rating. Здесь вы найдёте JS-файл компонента, HTML-файл с примером кода, а также SCSS-файл для стилизации.

Использование компонента

В HTML воспользуйтесь сниппетом rating или напишите код с использованием data-атрибутов:

<div data-fls-rating="set" class="rating"></div>

Использование функционала

• По умолчанию в примере атрибуту data-fls-rating задано значение set, которое включает возможность получать оценку от пользователя. Если оставить атрибут пустым, компонент будет только отображать оценку.
• Оценку, которую будет отображать компонент, можно указать в атрибуте data-fls-rating-value.
• Размер рейтинга — количество звёзд — можно изменить с помощью атрибута data-fls-rating-size.
• Если добавить атрибут data-fls-rating-title, числовая оценка будет выводиться в атрибуте title рейтинга.

В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) реализован функционал добавления товаров в корзину с возможностью анимации изображения товара.

Расположение компонента

Файлы компонента находятся в папке src/components/forms/addtocart, здесь вы найдете JS-файл компонента, HTML-файл с примером кода, а также файл SCSS для стилизации компонента.

Использование компонента

В HTML непосредственно к объекту выводящему количество товаров в корзине добавьте дата-атрибут data-fls-addtocart:

<div class="cart"><span class="cart__quantity" data-fls-addtocart>0</span></div>

Для кнопки «Купить», «Добавить в корзину» и т.д. добавьте дата-атрибут data-fls-addtocart-button:

<button data-fls-addtocart-button>Добавить в корзину</button>

Для использования дополнительного функционала, добавляем обертку прилагаемого в корзину товара с дата-атрибутом data-fls-addtocart-product:

<div data-fls-addtocart-product class="product">
...
<button data-fls-addtocart-button>Додати в кошик</button>
</div>

Теперь мы имеем возможность добавить управление количеством товаров, которые будут добавлены в корзину. Для этого необходимо добавить дата-атрибут data-fls-addtocart-quantity для управляющего количеством тега <input> или использовать компонент «Количество» ЧФ4 тоже с добавлением data-fls-addtocart-quantity:

<div data-fls-addtocart-product class="product">...<input data-fls-addtocart-quantity autocomplete="off" type="text" name="form[]" value="1"><button data-fls-addtocart-button>Додати у кошик</button></div>

Или

<div data-fls-addtocart-product class="product">...<div data-fls-quantity class="quantity"><button data-fls-quantity-minus type="button" class="quantity__button quantity__button--minus"></button><div class="quantity__input"><input data-fls-addtocart-quantity data-fls-quantity-value autocomplete="off" type="text" name="form[]" value="1"></div><button data-fls-quantity-plus type="button" class="quantity__button quantity__button--plus"></button></div><button data-fls-addtocart-button>Добавить у кошик</button></div>

Также есть возможность анимировать изображение товара создавая «полет в корзину». Для этого тега <img> товара добавьте дата-трибут data-fls-addtocart-image:

<div data-fls-addtocart-product class="product">...<img src="..." data-fls-addtocart-image alt="Image"><button data-fls-addtocart-button>Додати у кошик</button></div>

Для управления скоростью анимации добавьте значение атрибута data-fls-addtocart-image в миллисекундах (по умолчанию 500ms):

<div data-fls-addtocart-product class="product">...<img src="..." data-fls-addtocart-image="1000" alt="Image"><button data-fls-addtocart-button>Додати у кошик</button></div>

В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) реализована возможность добавления функционала Google Maps

Расположение компонента

Файлы компонента находятся в папке src/components/layout/map, здесь вы найдете JS-файлы компонента и настроек, файл HTML с примером кода, а также SCSS-файл для стилизации компонента.

Использование компонента

Для начала вы можете получить свой KEY для полноценного использования функционала Google Maps и добавить его в константу MAP_KEY в файле _settings.js в папке компонента. Или отложить этот шаг и работать с карты в режиме разработчика.

Для добавления карты в нужном месте HTML воспользуйтесь снипетом map или постройте структуру используя определенные дата-атрибуты.

Этот пример выведет карту с одним маркером:

<div data-fls-map class="map"><div data-fls-map-marker class="map__marker" data-fls-map-lat="50.449688" data-fls-map-lng="30.52348" data-fls-map-title="Заголовок 1"></div><div data-fls-map-body class="map__body" data-fls-map-lat="50.449688" data-fls-map-lng="30.52348"></div></div>

Настройка компонента

• data-fls-map — прилагается к оболочке конструкции карты
• data-fls-map-marker — добавляется к элементу, являющемуся маркером на карте
• data-fls-map-body — добавляется к выводящему карту элементу
• data-fls-map-lat и data-fls-map-lng — устанавливают координаты центра карты и вывода маркера
• data-fls-map-title – выводит подсказку для маркера
• data-fls-map-icon – выводит собственное изображение маркера
• data-fls-map-marker-zoom – при наличии атрибута для маркера, делает зум на маркер при клике по нему
• data-fls-map-marker-popup – при наличии атрибута для маркера, открывает модальное окно (popup), указанное в значении атрибута, при клике по маркеру. Смотри компонент «Модальное окно»

Дополнительно можно указать свой стиль Google Maps в файле _settings.js в папке компонента.

В сборнике «Чертоги Фрилансера» 4 (далее ЧФ4) реализована возможность использования навигационной панели разработчика , сокращен НПР .

Что такое НПС?

Навигационная панель разработчика (НПР) – это «плавающее» меню которое в автоматическом режиме выводит следующую информацию:

• Ссылка на все страницы проекта. А именно все HTML-файлы размещены в корне папки src для удобства навигации по проекту.
• При использовании иконочного шрифта ссылка на страницу с выводом всех SVG-иконок и их классов для удобства их копирования. Ссылка откроется в новой вкладке
• При использовании страницы проекта ссылка на шаблон страницы проекта для удобства ее разработки. Ссылка откроется в новой вкладке

Настройка НПР

Включить или отключить НПР, в том числе в режиме продакшн, можно в настройках ЧФ4 . Кроме того, есть возможность настройки положения и внешнего вида панели:

• navpanel — Настройка навигационной панели
  • dev – в режиме разработчика. Включатель: true/false
  • build – в режиме продакшена. Включатель: true/false
  • position — Вывод панели: left/right
  • color — Цвет текста и ссылок
  • background — Цвет фона
  • transition — скорость анимации открытия в миллисекундах

В стартовом шаблоне «Чертоги Фрилансера» 4 (далее ЧФ4) реализована возможность собирать и просматривать статистику затраченного времени на проект и другие данные

Статистика собирается при работе режима разработчика

Для того чтобы начать собирать статистику, необходимо включить этот функционал в настройках ЧФ4:

статистика: {включить: правда,…}

Для просмотра статистики вы можете использовать команду терминала npm run stat или включить автоматический вывод при запуске режима продакшн:

статистика: {enable: true,showonbuild: true}

Теперь можно получить следующие данные:

• Дата начала работы над проектом (первый запуск режима разработчика)
• Дата конца работы над проектом (последняя остановка режима разработчика или последний запуск режима продакшн)
• Общее время работы над проектом (время работы режима разработчика)
• Общее количество редактируемых файлов
• Количество сессий (количество запусков/остановок режима разработчика)

Для очищения статистики проекта вы можете воспользоваться командой терминала

npm run stat-clear

Стартовый шаблон «Чертоги Фрилансера» 4 (ЧФ4) оснащен возможностями, позволяющими с легкостью разрабатывать интерфейс сразу с интеграцией на CMS WordPress.

Для того чтобы иметь возможность работать с полноценным сервером на своем ПК, необходимо установить систему Docker (она бесплатна для собственного использования)

После установки Docker должен быть просто включен , без необходимости делать с ним что-то еще.

Для начала работы, после установки ЧФ4 и Docker, выполните команду npm run wp

При первом запуске система создаст папку backend куда запишет папку database с базой данных и папку wordpress с CMS WordPress. Не редактируйте папку backend и ее содержимое без четкого понимания своих действий.

Далее система откроет браузер с адресомhttp://localhost:8080/и предложит установку CMS WordPress на ваш новый сервер. После установки CMS все готово для разработки.

Если вы запускаете систему уже не в первый раз, то после команды npm run wp откроется браузер с адресом сервера CMS WordPress http://localhost:8080/ — главной страницей сайта.

Внимание!Docker должен быть запущен перед выполнением команды npm run wp

Чтобы начать разработку, перейдите в src/components/wordpress. Здесь вы найдете папку fls-theme. Это папка уже установленной темы по вашей CMS WordPress и вам достаточно просто редактировать файлы согласно задаче.

Редактирование стилей происходит в src/styles и соответствующих компонентах src/components

Редактирование скриптов в режиме разработчика происходит в соответствующих компонентах src/components и в файле src/components/wordpress/fls-theme/assets/app.js, в случае когда нужно написать собственную общую логику. Не удаляйте подключение функционала import ‘../fls-wp-includes.js’, это необходимо для корректной работы.

После сборки проекта файл src/components/wordpress/fls-theme/assets/app.js уже не подключается. JS/CSS код собирается в соответствующие файлы в папке src/components/wordpress/fls-theme/assets/build

Также, после сборки, существует возможность внести правки в файлы/wp-content/themes/fls-theme/assets/build/css/custom.css и/wp-content/themes/fls-theme/assets/build/js/custom.js

Внимание!Не редактируйте другие JS-файлы, которые находятся в src/components/wordpress

Также в src/components/wordpress доступна папка fls-plugin для создания собственного плагина

После завершения работы на сайте выполните команду npm run wpbuild, после этого, с помощью плагина WordPress для переноса сайта, который нужно установить самостоятельно, создайте дамп сайта и базы данных для дальнейшего переноса на удаленный сервер.

Поскольку после выполнения команд npm run wp и npm run wpbuild запускается Docker сервер, его следует останавливать в момент перерыва в разработке или ее завершении. Для этого выполняйте команду

npm run wpstop

В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) есть возможность автоматической загрузки собранного проекта (папка dist) на сервис GitHub .

Для этого укажите путь к вашему репозиторию в настройках ЧФ4 git->repo, также есть возможность указать branch:

git: {репозиторий: "https://github.com/someuser/somerepo.git",ветвь:"main"},

После настройки вы можете использовать команду терминала npm run git , которая объединяет в себе команду сборки проекта (режим продакшн) а также загрузку результата на GitHub.

В стартовом шаблоне «Чертоги Фрилансера» 4 (ЧФ4) есть возможность автоматической загрузки собранного проекта (папка dist) на сервер с помощью FTP

Для этого укажите необходимые данные в настройках ЧФ4 в разделе ftp:

• ftp – настройка отправки конечных файлов (из папки dist) на сервер (хостинг) по FTP в режиме продакшена
  • host — Имя FTP хоста
  • port — FTP Порт
  • remoteDir – Удаленная папка на сервере. Можно использовать переменную projectName содержащую имя папки проекта
  • user — Имя пользователя FTP
  • password — Пароль пользователя FTP

После настройки вы можете использовать команду терминала npm run deploy , которая объединяет в себе команду сборки проекта (режим продакшн) а также загрузку результата на сервер с помощью FTP

[12/09/2026] Обновление

• Исправление ошибок
• Пересмотр компонента Google Maps

[08/09/2026] Обновление

• Добавлена возможность настройки размеров файлов для загрузки в WP. Шаблоны file_modles/wordpress/uploads.ini
• Сбор журналов ошибок WP в файле шаблон_modules/wordpress/debug.log

[19/08/2026] Обновление

• Исправлена ошибка в WP-блоках
• Добавлена возможность создания компонента без WP-блока с npm run of the name компонента — —nowp

[05/08/2026] Обновление

• Улучшенное взаимодействие блоков WP с редактором

[11/06/2026] Обновление

• Изменение архитектуры — создание папки wordpress в src
• Пересмотр WP-блоков и их создание

[27/05/2026] Обновление

• Устранение ошибок

[26/05/2026] Обновление

• Добавлена ​​возможность создавать и подключать не сжатые JS и CSS файлы при сборке проекта. Для включения используйте настройки server -> globaldecompress:true

[29/04/2026] Обновление

Устранение ошибок при создании шрифта иконок после обновления плагина

[22/04/2026] Обновление

• Устранение ошибок зависимостей
• Добавлен файл .gitignore

[21/04/2026] Обновление

• Добавлена ​​возможность скачивать всю тему WP через FTP командой npm run wpdeploy

[19/04/2026] Обновление

• Переход на постоянное использование CSS-переменных для значений по умолчанию
• Вынос файла variables.css в папку src/styles
• Изменение логики медиа-запросов на width < и width >= (соответствующее изменение снипетов)
• Добавлен функционал для работы с блоками WordPress

[16/04/2026] Обновление

• Устранение ошибок после обновления Vite.
• Добавлена ​​подготовка для работы с WordPress блоками

[15/04/2026] Обновление

• Устранение ошибки в компоненте «Показать еще»
• Исправление ошибки при сборке проекта

[02/04/2026] Обновление

• Возврат функционала SVG-спрайтов

[01/04/2026] Обновление

• Переход на Vite 8 со всеми дополнениями
• Добавлен php.ini (template_modules/assets/php.ini) при работе с WordPress

[30/03/2026] Обновление

• Переход на Vite 8
• Устранение ошибок после обновления Vite.
• Временно удален функционал SVG-спрайтов, ждем обновления модуля.

[24/03/2026] Обновление

• Устранение ошибок после обновления Vite

[20/03/2026] Обновление

• Устранение ошибок после обновления Vite
• Добавлена ​​возможность включить Windows сообщения для функционала coffeetime
• Обновленная документация файла конфигурации

[10/12/2025] Обновление

• Устранение ошибки создания шрифтов на Mac

[04/12/2025] Обновление

• Улучшенная работа с SVG-иконками
• При работе с WP, добавлена ​​возможность работы с phpMyAdmin по адресу http://localhost:8081

[18/11/2025] Обновление

• Устранение ошибки работы JS после сборки.
• Доработка работы с WP

[09/11/2025] Обновление

• Доработана работа с изображениями и псевдонимами при работе с WP
• Обновленная документация

[31/10/2025] Обновление

• Исправлена ​​ошибка запуска

[27/10/2025] Обновление

• Улучшенный алгоритм создания иконочного шрифта

[15/10/2025] Обновление

• Улучшенный алгоритм создания иконочного шрифта
• Добавлена ​​возможность копировать src/index.html при создании новой страницы
• Дополненна документация

[05/10/2025] Обновление

• Доработка обработки изображений при использовании собственного <picture>
• Дополненная документация

[29/09/2025] Обновление

• Исправление путей к изображениям при использовании isassets: true

[24/09/2025] Обновление

• Исправлена ​​ошибка двойного выполнения скриптов после сборки проекта
• Доработана асинхронность выполнения плагинов

[17/09/2025] Обновление

• Доработанный функционал создания новой страницы проекта
• Доработанный функционал загрузки на Git

[15/09/2025] Обновление

• Для загрузки собранного проекта на Git необходимо сначала собирать проект командой npm run build и после этого вызвать загрузку npm run git
• Добавлена ​​возможность собирать проект таким образом, чтобы его можно было открывать в файловом проводнике (без сервера). См. пункт server -> buildforlocal в настройках ЧФ4
• Добавлена ​​возможность собирать проект таким образом, чтобы файлы JS и CSS были размещены в папке dist/assets. Смотри пункт server -> isassets в настройках ЧФ4
• Добавлена ​​возможность создавать новую страницу проекта и компонент этой страницы с помощью команды npm run new имя страницы (без html)

[09/09/2025] Обновление

• Обновление настроек Vite для корректной работы

[27/07/2025] Обновление

• Устранение ошибок компонентов:
  • мышь
  • курсор
  • шатер
  • формы

[19/07/2025] Обновление

• Устранение ошибок и доработка компонента «Корзина»

[16/07/2025] Обновление

• Исправлена ​​ошибка конвертации OTF-шрифтов

[07/07/2025] Обновление

• Исправлена ​​ошибка компонента «Меню»

[30/06/2025] Обновление

• Добавлена ​​возможность использовать HTML-шаблонизатор Nunjucks

[02/06/2025] Обновление

• Устранение ошибок панели разработчика, добавление версии файлов, подключение reset.css, плагина header
• Доработанный компонент обработки изображений

[29/05/2025] Обновление

• Исправление компонента «Модальное окно»

[27/05/2025] Обновление

• Устранение ошибки в компоненте «До и после»
• Добавлена ​​возможность работать с собственными отдельными JS-файлами.
• Добавлены сниппеты для работы с SVG-спрайтом.

[22/05/2025] Обновление

• Добавлена ​​отдельная страница для удобной разработки компонентов
• Исправлена ​​ошибка компонента «Статистика»
• Обновленная документация

[19/05/2025] Обновление

• Исправление работы компонента цифрового счетчика
• Добавлена ​​возможность очистки статистики проекта
• Добавлено подключение частых функций в файл app.js
• Добавлена ​​возможность подключения отдельного файла CSS-переменных в style.scss
• Измененная документация

[17/05/2025] Обновление

• Исправлены компоненты «Селект» и «Календарь»
• Доработанный функционал создания размеров изображений

[14/05/2025] Обновление

• Исправлена ​​работа по WP и другим мелким ошибкам

[11/05/2025] Обновление

• Исправление мелких ошибок

[09/05/2025] Обновление

• Улучшенный вывод статистики
• Доработанный компонент «Количество»
• Исправление мелких ошибок

[05/05/2025] Обновление

• Улучшенная статистика – добавленное количество редактируемых файлов
• Отключена принудительная конвертация SVG в data
• Исправление мелких ошибок

[03/05/2025] Обновление

• Добавлена ​​возможность сбора статистики затраченного времени на проект
• Добавлена ​​документация

[01/05/2025] Обновление

• Добавлена ​​возможность загрузки собранного проекта в GitHub репозиторий
• Доработка работы компонентов во вложенных PHP-файлах темы WordPress

[29/04/2025] Обновление

• Исправление мелких ошибок
• Доработано взаимодействие SCSS с модулями
• Доработанный логинг в терминале

[25/04/2025] Обновление

• Исправление мелких ошибок
• Архив ЧФ4 перенесен в отдельную статью документации

[23/04/2025] Обновление

• Имя архива ЧФ4 теперь имеет дату и время создания
• Доработана оптимизация SVG-иконок
• Добавлен компонент «Корзина»
• Добавлена ​​документация

[21/04/2025] Обновление

• Устранение ошибки «Динамического адаптива» при сборке проекта
• Мелкие улучшения различных элементов и настроек
• Добавлена ​​документация

[20/04/2025] Обновление

• Мелкие улучшения различных элементов и настроек
• Добавлена ​​документация

[15/04/2025] Обновление

• Устранение ошибки формирования конечных файлов при сборке для CMS WodPress
• Добавлена ​​возможность быстрого создания собственных компонентов командой в терминале
• Добавлена ​​документация

[14/04/2025] Обновление

• Устранение ошибки обработки вложенных изображений
• Устранение ошибки пути загруженных удаленных шрифтов
• Добавлена ​​документация

[13/04/2025] Обновление

• Улучшенная обработка имен шрифтов
• Добавлена ​​оптимизация и чистка SVG-иконок для спрайта.
• Добавлена ​​документация

[12/04/2025] Обновление

• Устранение ошибки при сборке сата на WordPress
• Добавлена ​​документация

[11/04/2025] Обновление

• Добавлена ​​возможность создания копий изображений и интеграция в HTML под разные DPI экраны
• Добавлена ​​документация по работе с изображениями, обновлена ​​статья о настройке ЧФ4

[10/04/2025] Релиз

• Релиз «Чертоги Фрилансера» 4