Для сборки верстки использовался GULP. Были применены препроцессор SASS и сборщик скриптов WebPack. Для реализации адаптивности используется сетка Bootstrap 5.
Сетка Bootstrap 5 (grid)
Система для организации и выравнивания контента на веб-страницах, обеспечивающая адаптивность и удобство использования на различных устройствах. Она позволяет разработчикам создавать гибкие макеты, которые хорошо смотрятся на экранах любого размера. Grid-система в Bootstrap 5 — это мощный инструмент для создания адаптивных макетов веб-страниц . Она основана на flexbox и состоит из контейнеров, рядов и колонок. Вот основные компоненты и принципы работы этой системы:
1.Контейнеры(.container) используются для центрирования и горизонтального выравнивания контента.
2.Ряды(.row) — это обертки для колонок. Они создают горизонтальные группы колонок и компенсируют отступы (padding) колонок с помощью отрицательных отступов (margin), чтобы контент в колонках был выровнен по левому краю.
3.Колонки(.col) — это основные элементы сетки, в которых размещается контент. Bootstrap использует 12-колоночную сетку, что позволяет создавать различные комбинации ширины колонок.
С помощью сетки Bootstrap 5, легко создавать макеты, которые хорошо выглядят на любом устройстве. Многоколоночная сетка позволяет создавать разнообразные макеты, а готовые классы ускоряют процесс разработки.
Splide.js
Лёгкий, гибкий и доступный слайдер JavaScript, используемый для создания каруселей и слайд-шоу на веб-сайтах.
Splide.js выделяется среди других слайдеров благодаря своей модульной структуре, оптимизированной производительности и акценту на доступности. Вот основные особенности и характеристики:
- Лёгкий и быстрый: Splide.js разработан с учётом производительности, обеспечивая плавную анимацию и быструю загрузку. Его небольшой размер делает его отличным выбором для проектов, где важна скорость.
- Модульная структура: Компоненты Splide.js организованы в виде модулей, что позволяет подключать только необходимые функции, уменьшая размер и повышая эффективность.
- Адаптивность: Splide.js поддерживает адаптивный дизайн, что означает, что карусели автоматически адаптируются к разным размерам экранов и устройствам.
- Настраиваемость: Splide.js предоставляет широкий спектр опций для настройки внешнего вида и поведения слайдера. Вы можете изменить анимацию, навигацию, автоматическое воспроизведение и другие параметры.
- Доступность: Splide.js разработан с учётом стандартов доступности (WCAG), что делает его удобным для использования людьми с ограниченными возможностями. Он обеспечивает поддержку клавиатурной навигации, атрибутов ARIA и других функций, облегчающих навигацию и понимание контента.
- Поддержка различных типов контента: Splide.js может отображать различные типы контента, включая изображения, видео, текст и HTML-элементы.
- Навигация: Splide.js предоставляет несколько вариантов навигации, включая стрелки, точки и миниатюры.
- Автоматическое воспроизведение: Splide.js может автоматически прокручивать слайды с настраиваемой скоростью и интервалом.
Air Datepicker
Лёгкий, настраиваемый и кросс-браузерный JavaScript-компонент для выбора даты в веб-приложениях. Данный плагин предоставляет удобный и интуитивно понятный интерфейс для выбора дат, поддерживающий различные форматы, языки и настройки.
Основные характеристики Air Datepicker:
- Легковесность: Небольшой размер файла (около 36kb в минифицированном виде и 9kb в gzip) обеспечивает быструю загрузку и минимальное влияние на производительность страницы.
- Кастомизация: Air Datepicker предоставляет широкие возможности для настройки внешнего вида и поведения, позволяя адаптировать его под любой дизайн веб-приложения.
- Кросс-браузерность: Обеспечивает стабильную и корректную работу во всех современных браузерах.
- Поддержка различных форматов дат: Поддерживает различные форматы дат, такие как dd.mm.yyyy, mm/dd/yyyy, yyyy-mm-dd и другие.
- Многоязычность: Поддерживает множество языков, что позволяет использовать его в международных проектах.
Итог
Splide.js — это отличный выбор для разработчиков, которым нужен лёгкий, гибкий и доступный слайдер. Air DatePicker — отличный выбор если вам нужен простой, настраиваемый и лёгкий компонент для выбора даты. А сетка Bootstrap 5, вообще используется на каждом шагу, так как является лучшим решением для ускорения верстки.