Photon

Адаптивная тёмная тема. Более 40 компонентов. Чистый CSS + JS.

Скачать Photon Компоненты GitHub

Photon v2.2 — MIT License

Возможности

Стеклянный дизайн

Эффект стекла с размытием (backdrop-filter). Элегантный матовый фон для карточек и панелей.

Тёмная тема

Переключение между светлой и тёмной темой через класс theme-dark.

Полностью адаптивный

12-колоночная сетка, резиновая типографика, адаптивные компоненты для всех экранов.

40+ компонентов

Кнопки, формы, карточки, модальные окна, карусели, аккордеоны, уведомления и многое другое.

CSS-переменные

Простая кастомизация через CSS custom properties. Измените палитру в одном месте.

Чистый CSS + JS

Никаких зависимостей. Один CSS и один JS файл. Всего ~12 KB в сжатом виде.

Быстрый старт

Подключите Photon к вашему проекту:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Мой проект</title>
  <link rel="stylesheet" href="photon-kit.css" />
  <script src="photon-kit.js" defer></script>
</head>
<body>
  <h1>Привет, Photon!</h1>
  <button class="btn btn--primary">Нажми меня</button>
</body>
</html>

Типографика

Photon использует системные шрифты Apple. Заголовки от h1 до h6, параграфы, списки и инлайн-элементы.

<h1>Заголовок 1</h1>
<h2>Заголовок 2</h2>
<h3>Заголовок 3</h3>
<p>Обычный текст с <strong>жирным</strong> и <em>курсивом</em>.</p>
<p class="text-secondary">Второстепенный текст.</p>
<p class="text-muted">Приглушённый текст.</p>
<code>Инлайн-код</code>

Сетка

12-колоночная адаптивная сетка с классами row и col.

<div class="row">
  <div class="col-4">25% ширины</div>
  <div class="col-4">25% ширины</div>
  <div class="col-4">25% ширины</div>
</div>
<div class="row">
  <div class="col-6">50% ширины</div>
  <div class="col-6">50% ширины</div>
</div>
<div class="row">
  <div class="col-12 col-md-6 col-lg-4">Адаптивная колонка</div>
  <div class="col-12 col-md-6 col-lg-4">Адаптивная колонка</div>
  <div class="col-12 col-md-6 col-lg-4">Адаптивная колонка</div>
</div>

Glass-утилиты

Эффект матового стекла — ключевая особенность Photon. Используйте классы glass, glass--light и glass--heavy.

<div class="glass" style="padding: 1.5rem; border-radius: 12px;">
  <p style="margin: 0;">Обычное стекло — полупрозрачный фон с размытием.</p>
</div>
<div class="glass--heavy" style="padding: 1.5rem; border-radius: 12px; margin-top: 0.75rem;">
  <p style="margin: 0;">Плотное стекло — более непрозрачный фон.</p>
</div>

CSS-переменные

Все ключевые стили доступны через CSS custom properties для лёгкой кастомизации:

:root {
  --pk-primary: #5755d9;
  --pk-success: #32b643;
  --pk-warning: #ffb700;
  --pk-error: #e85600;
  --pk-info: #4b9eff;
  --pk-bg: #ffffff;
  --pk-text: #1d1d1f;
  --pk-radius: 12px;
  --pk-blur: blur(20px);
  --pk-shadow: 0 4px 24px rgba(0,0,0,0.06);
}