DP Trade — Site UI Kit

Единый 11ty-проект для сайта, UI-kit и дизайн-системы DP Trade.

Текущее состояние

Источник правды: src/.
Сборка: Eleventy пишет результат в _site/.
Активная дизайнерская доработка: переключаемая версия V2, подключенная поверх базового site.css через src/css/v2.css.
V1 сохранен как исходная версия для сравнения.
V2 включает обновленную премиальную палитру, Cormorant Garamond + Manrope, легкие Cormorant 400/500, переработанные карточки, mega-menu, footer, контакты и часть product/about-паттернов.
Подробный аудит и статусы: docs/design-audit-followup.md.

Структура

src/*.njk — исходные страницы.
src/_includes/layouts/ — базовые layout-шаблоны.
src/_includes/partials/ — header/footer.
src/css/tokens.css — шрифты, цвета, базовые дизайн-токены.
src/css/site.css — базовая V1-верстка сайта.
src/css/v2.css — V2-оверрайды по дизайнерскому аудиту.
src/css/ui-kit.css — стили витрины UI-kit.
src/js/design-switcher.js — переключение V1/V2 через localStorage.
src/js/inspector.js — вспомогательный инспектор.
src/fonts/ — шрифты, которые попадают в сборку.
src/assets/ — изображения и локальные медиа.
_site/ — результат сборки, не коммитится.
docs/ — проектные документы, аудит, handoff.

Как смотреть

npm run build
npm run dev

После npm run dev Eleventy поднимет локальный сервер. Для статической проверки можно открыть файлы из _site/.

Переключатель V1/V2 есть в header и на странице ui-kit.html. Выбранная версия сохраняется в localStorage под ключом dp-design-version.

Основные страницы

index.html — главная: hero, producers, news, recommendations.
catalog.html — пример каталога.
product.html — пример страницы продукта, включая V2-only breadcrumbs.
product-card-white.html — варианты карточек на белом фоне.
bottle-cards.html — лаборатория карточек бутылок.
about.html — страница о компании.
contacts.html — контакты и форма.
contacts-auth.html — вариант контактов с auth-gate.
news-villa-raiano.html и news-villa-raiano-v2.html — редакционные страницы.
article-guidelines.html — гайд по статьям.
ui-kit.html — витрина дизайн-системы.

Что уже решено

Внедрен 11ty pipeline с passthrough для src/css, src/js, src/fonts, src/assets.
Добавлена V2-версия дизайна без удаления V1.
Подключены настоящие Cormorant Garamond 400/500 (CormorantGaramond-Regular.woff2, CormorantGaramond-Medium.woff2).
В V2 обновлены основные токены: бордовый #7D021D, теплый фон #FFFDFA, карточный фон #F5F0E8, Cormorant Garamond + Manrope.
В V2 облегчены Cormorant-заголовки, карточки товара, section headings, footer и mega-menu.
В V2 добавлены breadcrumbs для product, split contact fields и success-state формы.
Последняя проверенная сборка: npm run build.

Что осталось

Визуально проверить V2 на desktop/tablet/mobile: index, catalog, product, about, contacts, ui-kit.
Довести product content model: расширенное описание, реальные характеристики, финальная композиция price/CTA.
Решить, нужно ли переносить V2-токены непосредственно в src/css/ui-kit.css, или достаточно текущего v2.css override.
Дооформить production-сценарии: catalog pagination, 404, cookie/privacy, реальные form validation states, auth routes.

Правило организации

В проекте должен быть один Git-репозиторий на уровне этой папки. Исходники живут в src/; корневые HTML-файлы и _site/ считаются артефактами сборки/миграции, а не источником правды.

Naming

Для дизайн-системы используется формат:

[Category] / [Type] / [Variant] / [State]

Примеры:

Button / Primary / Default
Card / Product / Hover
Nav / Header / Desktop

5.2 KiB Raw Blame History Unescape Escape