UI-паттерны из Uiverse (Galaxy)
Каталог Galaxy — архив более 3000 UI-сниппетов с Uiverse.io: HTML и inline CSS, без JavaScript. Лицензия MIT — можно учиться, копировать и менять; желательно указывать автора сниппета и Uiverse.
Здесь — не полная копия репозитория, а подборка техник с упрощённым кодом и разбором. Теория по кнопкам, формам и сетке — Типовые элементы интерфейса; анимации — CSS-анимации. Когда CSS недостаточно — Работа с HTML в JavaScript.
Как пользоваться каталогом
| Шаг | Действие |
|---|---|
| 1 | Скопируйте блок HTML+CSS в playground выше или в test.html |
| 2 | Сравните с разделом в Типовые элементы интерфейса — там базовые варианты |
| 3 | Проверьте Tab, Enter, контраст, prefers-reduced-motion |
| 4 | Для React/Vue вынесите разметку в компонент, стили — в модуль; типы — TypeScript и React |
В Galaxy часто много <div> вместо <button>, нет focus trap у модалок и нет очереди toast. Берите технику (shimmer, :has(), кастомный radio), а разметку приводите к семантике из энциклопедии.
Skeleton (карточка)
Техника: linear-gradient + background-size + @keyframes для shimmer.
Источник (идея): Uiverse, vk-uiux — категория loaders.
Энциклопедическая версия с aria-busy — Скелетон загрузки.
Спиннер с доступностью
Техника: role="progressbar", aria-busy, aria-label.
Источник (идея): Uiverse, fox-tech0.
Больше loaders — CSS-анимации — спиннер.
Переключатель темы (:has())
Техника: родитель .panel:has(input:checked) меняет фон; role="switch".
Источник (идея): Uiverse, csemszepp.
Разбор в энциклопедии — Переключатель темы и :has().
Поиск без JavaScript
Техника: type="search", :focus, :valid, transform на ширине.
Источник (идея): Uiverse, fanishah.
Радиокнопки
Техника: скрытый input + label[for]; стили :checked + label; общий name.
Источник (идея): Uiverse, shadowmurphy (анимация «червяка» упрощена).
Энциклопедия — Радиокнопки (radio).
Подсказки (tooltip)
Техника: attr(data-tooltip) в ::after; на hover/focus — показ. Для панели с иконками нужен JS.
Источник (идея): Uiverse, Mohammad-Rahme-576.
Кнопка с «глубиной» (brutalist)
Техника: многослойный box-shadow, :active сдвигает «плиту».
Источник (идея): Uiverse, 0xnihilism.
Уведомление (toast)
Техника: CSS variables на блоке, @keyframes slide-in. Очередь и автозакрытие — в JS.
Источник (идея): Uiverse, WittyHydra.
CSS-паттерн фона
Техника: conic-gradient + background-size для бесшовного узора без картинок.
Источник (идея): Uiverse, mobinkakei — категория Patterns.
Таблица техник Galaxy → энциклопедии
| Категория в Galaxy | ~Файлов | Где учиться у нас |
|---|---|---|
| Buttons | 1231 | Кнопки, § brutal выше |
| loaders | 717 | CSS-анимации — готовые эффекты, Skeleton в 113 |
| Cards | 724 | Карточки |
| Toggle-switches | 260 | Switch |
| Inputs / Forms | 400+ | Поля, Поиск CSS |
| Checkboxes / Radio | 270 | Checkbox, Radio |
| Tooltips | 62 | Tooltip |
| Notifications | 23 | Уведомления |
| Patterns | 103 | § паттерн фона выше, градиенты |
Нет в Galaxy: модалки, таблицы, navbar — у нас уже в Типовые элементы интерфейса.
Дальше
| Цель | Материал |
|---|---|
| Целая страница | HTML-страницы целиком |
| Макет + сетка | HTML + CSS — макеты |
| Компонент в React | React — компоненты-рецепты — JSX, React — компоненты-рецепты — TypeScript, TS + React |
| Оригинальные сниппеты | github.com/uiverse-io/galaxy |