91 lines
5.2 KiB
Markdown
91 lines
5.2 KiB
Markdown
# 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.
|
||
|
||
## Как смотреть
|
||
|
||
```bash
|
||
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
|
||
|
||
Для дизайн-системы используется формат:
|
||
|
||
```txt
|
||
[Category] / [Type] / [Variant] / [State]
|
||
```
|
||
|
||
Примеры:
|
||
|
||
```txt
|
||
Button / Primary / Default
|
||
Card / Product / Hover
|
||
Nav / Header / Desktop
|
||
```
|