Device

Учебный проект Device от HTML Academy.

Используемые инструменты

Компонентный подход. Для организации разметки и стилей использована методология БЭМ. Компоненты переиспользуются с разным набором данных, которые можно отдавать как в явном виде (объект, JSON) - так и внедрив API для динамического получения данных. Каждый экземпляр БЭМ-блока при необходимости оживления связан с экземплятом соотв. JS-класса.
Адаптивная вёрстка "mobile first" - дефолтной является мобильная версия, на которую нет макета, но она представляет собой в основном просто одноколоночный поток данных с чуть меньшими расстояниями и размерами текстов. Медиазапросы строятся от меньшего к большему - таким образом сделана планшетная версия (только часть стилей добавляется для максимального десктопного разрешения).
Поддержка webp- и retina-изображений через подключение одного универсального компонента.

public - рабочий каталог для веб-сервера. Здесь лежат неизменяемые файлы, сюда пересобирается код из исходников. Пересобираемые файлы не коммитятся.
source - каталог исходников.
place - сюда кидаются одиночные изображения или иконки (векторные - для спрайта, растровые - для css). Содержимое не коммитится. Сборка при старте и в режиме разработки следит за наполнением этого каталога, оптимизирует появившиеся файлы и перемещает иконки в исходники, а изображения - в public.