145 lines
6.3 KiB
Markdown
145 lines
6.3 KiB
Markdown
# CLAUDE.md
|
||
|
||
This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
|
||
|
||
Перед началом работы над любой задачей сложнее одного шага
|
||
составь todo-список и показывай его прогресс по ходу выполнения.
|
||
Для задач с неочевидным подходом сначала предложи план и дождись подтверждения.
|
||
|
||
## Project
|
||
|
||
Static HTML/CSS UI-kit and page prototypes for **DP Trade** — a B2B wine wholesale catalog (wine-dp-trade.ru). The output of this project is handed off to **WordPress/Elementor** for production deployment. See `docs/elementor-token-handoff.md` for the full Elementor migration guide.
|
||
|
||
Design audit and V2 requirements are documented in `docs/design-audit-followup.md`.
|
||
|
||
## Commands
|
||
|
||
```bash
|
||
# Dev server (11ty with live reload) — port 8088 per .claude/launch.json
|
||
npm run dev
|
||
|
||
# Production build → _site/
|
||
npm run build
|
||
```
|
||
|
||
Dev server config is saved in `.claude/launch.json` for use with `preview_start`. The named config is `"11ty dev server (live reload)"` on port 8088.
|
||
|
||
No test or lint tooling exists — the only npm scripts are `dev` and `build`, and the sole dependency is `@11ty/eleventy`. `npm run dev` runs `eleventy --serve`; the port is not hardcoded in the script and comes from `.claude/launch.json` (8088). Eleventy config lives in `.eleventy.js` (ESM `export default`).
|
||
|
||
## Architecture
|
||
|
||
### CSS layer (single dependency direction)
|
||
|
||
```
|
||
src/css/tokens.css ← design tokens only (colors, fonts, spacing, radius, shadows)
|
||
↓
|
||
src/css/site.css ← all page styles (references ../assets/images/ for backgrounds)
|
||
src/css/ui-kit.css ← design system showcase, standalone
|
||
src/css/v2.css ← V2 design overrides, loaded on every page after site.css
|
||
```
|
||
|
||
Never put visual styles in `tokens.css`. Never import `site.css` into `ui-kit.css`.
|
||
|
||
### 11ty template structure (`src/`)
|
||
|
||
```
|
||
src/
|
||
_includes/
|
||
layouts/
|
||
base.njk ← HTML shell: <head>, CSS links, analytics, design-switcher.js
|
||
default.njk ← base + header + footer (used by all site pages)
|
||
ui-kit.njk ← base only, no header/footer
|
||
partials/
|
||
header.njk ← mega-menu nav — edit here, propagates to all pages
|
||
footer.njk ← footer — edit here, propagates to all pages
|
||
css/ ← passthrough → _site/css/
|
||
js/ ← passthrough → _site/js/
|
||
assets/ ← passthrough → _site/assets/
|
||
fonts/ ← passthrough → _site/fonts/ (all WOFF2, local, no CDN)
|
||
*.njk ← one file per page
|
||
```
|
||
|
||
### Pages
|
||
|
||
| Permalink | Source |
|
||
|---|---|
|
||
| `/` | `index.njk` |
|
||
| `/catalog.html` | `catalog.njk` |
|
||
| `/product.html` | `product.njk` |
|
||
| `/about.html` | `about.njk` |
|
||
| `/contacts.html` | `contacts.njk` |
|
||
| `/contacts-auth.html` | `contacts-auth.njk` |
|
||
| `/news-villa-raiano.html` | `news-villa-raiano.njk` |
|
||
| `/news-villa-raiano-v2.html` | `news-villa-raiano-v2.njk` |
|
||
| `/article-guidelines.html` | `article-guidelines.njk` |
|
||
| `/bottle-cards.html` | `bottle-cards.njk` |
|
||
| `/product-card-white.html` | `product-card-white.njk` |
|
||
| `/ui-kit.html` | `ui-kit.njk` (layout: ui-kit, css: ui-kit) |
|
||
|
||
Pages with `bodyClass: compact-type`: catalog, about, contacts, article-guidelines.
|
||
|
||
### Page front matter
|
||
|
||
```yaml
|
||
---
|
||
title: "DP Trade — Catalog"
|
||
layout: layouts/default # or "layouts/ui-kit" for the design system page
|
||
bodyClass: compact-type # omit if not needed
|
||
permalink: /catalog.html # keeps flat output, preserves relative CSS paths
|
||
---
|
||
```
|
||
|
||
### CSS paths
|
||
|
||
All CSS, JS, and image paths in `base.njk` are **relative**. CSS background-images in `site.css` reference `../assets/images/` (relative to `_site/css/`). HTML templates reference `assets/images/` (relative to `_site/` root). This works with the 11ty dev server and when opening `_site/` via `file://`.
|
||
|
||
All images and fonts are local — no external CDN dependencies.
|
||
|
||
### Design tokens (V1 baseline)
|
||
|
||
Key CSS custom properties in `src/css/tokens.css`:
|
||
|
||
- Colors: `--color-primary-wine-100` (#4b0f24), `--color-accent-gold` (#b9965b), `--color-accent-blue` (#1f3476)
|
||
- Fonts: `--font-heading` (Montserrat 800), `--font-body` (Inter), `--font-heading-classic` (Playfair Display)
|
||
- Container: `--container: 1240px`
|
||
|
||
When adding tokens, add to `tokens.css` and mirror to `docs/elementor-token-handoff.md` (Section 6).
|
||
|
||
### V2 design system
|
||
|
||
V2 is a progressive enhancement overlay triggered by `data-design-version="v2"` on `<html>`. Preference is stored in `localStorage` (`dp-design-version`). The toggle button (`design-toggle__btn`) appears in the main nav and UI-kit sidebar.
|
||
|
||
**How V2 works:**
|
||
- `src/css/tokens.css` — overrides under `:root[data-design-version="v2"]`: burgundy `#7D021D`, warm bg `#FFFDFA`, card bg `#F5F0E8`, Cormorant Garamond + Manrope fonts
|
||
- `src/css/v2.css` — scoped rules under `[data-design-version="v2"]` removing uppercase, reducing weights, styling breadcrumbs, outlined CTAs, editorial typography
|
||
- `src/js/design-switcher.js` — applies the attribute on load and on toggle; also injects split phone/email fields and form success state on contacts page
|
||
|
||
Breadcrumbs on `product.html` are static markup tagged `data-v2-only="breadcrumbs"` — hidden in V1 via CSS, no JS needed.
|
||
|
||
### Responsive breakpoints
|
||
|
||
Defined at the bottom of `src/css/site.css`:
|
||
|
||
- `@media (max-width: 1080px)` — tablet
|
||
- `@media (max-width: 720px)` — mobile
|
||
|
||
### JS utilities
|
||
|
||
| File | Purpose |
|
||
|---|---|
|
||
| `src/js/design-switcher.js` | V1/V2 toggle, localStorage persistence, V2 DOM enhancements |
|
||
| `src/js/inspector.js` | Click-to-inspect overlay: shows computed styles and resolved design tokens (`--color-*`, `--font-*`, etc.) for any element. Toggle with Alt+I. |
|
||
| `src/js/analytics.js` | Privacy-friendly Plausible analytics (local copy) |
|
||
|
||
## Key files
|
||
|
||
| File | Purpose |
|
||
|---|---|
|
||
| `src/css/tokens.css` | Single source of truth for all design values |
|
||
| `src/css/v2.css` | V2 editorial design overrides |
|
||
| `docs/design-audit-followup.md` | Designer audit breakdown and V2 implementation plan |
|
||
| `docs/elementor-token-handoff.md` | Migration guide to WordPress/Elementor |
|
||
| `.claude/launch.json` | Dev server config for preview_start |
|
||
| `src/_includes/partials/header.njk` | Mega-menu navigation |
|
||
| `src/_includes/partials/footer.njk` | Site footer |
|