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, легкие Cormorant400/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.cssoverride. - Дооформить 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
Description
Languages
HTML
61.6%
CSS
38.4%