# PLANT UI Kit Переносимый набор компонентов, собранный по референсам магазина растений. Внутри нет фреймворков и сборщика: только HTML, CSS, SVG, JavaScript и JSON. ## Быстрый старт 1. Скопируйте папку `assets/ui-kit` в корень своего проекта. 2. Подключите стили в ``: ```html ``` 3. Если нужны интерактивные состояния, подключите скрипт перед ``: ```html ``` 4. Скопируйте нужную разметку из `snippets/`. Открыть все компоненты локально: `assets/ui-kit/index.html`. ## Структура ```text ui-kit/ ├── css/ │ ├── tokens.css # цвета, размеры, радиусы, тени │ └── components.css # готовые компоненты ├── js/ │ └── components.js # избранное, фильтры, размеры, пароль, stepper ├── icons/ │ └── icons.svg # локальный SVG-спрайт ├── images/ │ └── plant-hero.png # изображение карточек и hero ├── content/ │ └── texts.json # весь основной текст интерфейса └── snippets/ ├── 01-buttons.html ├── 02-chips-badges.html ├── 03-form-controls.html ├── 04-navigation.html ├── 05-product-card.html ├── 06-order-trust.html └── 07-hero.html ``` ## Правила копирования - Все классы имеют префикс `plant-`, поэтому не конфликтуют с Bootstrap, Tailwind или стилями проекта. - Корневой контейнер компонента должен иметь класс `plant-ui`. - Пути в сниппетах рассчитаны на размещение папки по адресу `assets/ui-kit`. - Чтобы изменить тему, переопределите переменные из `tokens.css`, а не внутренние селекторы компонента. - Для тёмной темы добавьте `data-plant-theme="dark"` на `` или общий контейнер. ## JavaScript-события Скрипт отправляет события, которые можно слушать в приложении: ```js document.addEventListener("plant:quantity", (event) => { console.log(event.detail.value); }); document.addEventListener("plant:add", () => { console.log("Добавлено в корзину"); }); ``` Если интерактивность реализована фреймворком, `components.js` можно не подключать.