UI Kit SCSS

Полнофункциональная SCSS библиотека с компонентами в сине-зеленой цветовой гамме.

Установка

npm install @ui-system/ui-kit-scss

Использование

Импорт всех стилей

@import '@ui-system/ui-kit-scss/src/index.scss';

Импорт отдельных компонентов

@import '@ui-system/ui-kit-scss/src/variables/colors';
@import '@ui-system/ui-kit-scss/src/components/buttons';
@import '@ui-system/ui-kit-scss/src/components/grid';

Компоненты

Сетка (12-колоночная)

• Адаптивная сетка с breakpoints
• Контейнеры и колонки
• Offset и выравнивание

<div class="container">
  <div class="row">
    <div class="col-md-6 col-lg-4">Контент</div>
    <div class="col-md-6 col-lg-8">Контент</div>
  </div>
</div>

Кнопки

• Различные варианты: primary, secondary, outline
• Размеры: sm, md, lg, xl
• Состояния: loading, disabled

<button class="btn btn--primary">Основная кнопка</button>
<button class="btn btn--outline-secondary btn--lg">Большая кнопка</button>
<button class="btn btn--sm btn--loading">Загрузка...</button>

Формы

• Input, textarea, select
• Checkbox, radio, switch
• Валидация и стили ошибок

<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="input" placeholder="Введите email">
  <div class="form-help">Мы не передаем email третьим лицам</div>
</div>

<label class="checkbox">
  <input type="checkbox" class="checkbox__input">
  <span class="checkbox__box"></span>
  <span class="checkbox__label">Согласен с условиями</span>
</label>

Календарь

• Выбор даты и диапазона
• Навигация по месяцам/годам
• Настраиваемые размеры

<div class="calendar">
  <!-- Структура календаря -->
</div>

Модальные окна

• Различные размеры и позиционирование
• Анимации появления/исчезновения
• Backdrop и закрытие по Escape

<div class="modal modal--open">
  <div class="modal__backdrop"></div>
  <div class="modal__dialog">
    <div class="modal__content">
      <!-- Содержимое модального окна -->
    </div>
  </div>
</div>

Уведомления

• Типы: success, error, warning, info
• Позиционирование
• Автоматическое скрытие

<div class="notification notification--success notification--show">
  <div class="notification__icon">✓</div>
  <div class="notification__content">
    <h4 class="notification__title">Успех!</h4>
    <p class="notification__message">Операция выполнена успешно.</p>
  </div>
  <button class="notification__close">×</button>
</div>

Цветовая схема

Основные цвета

• Primary: Синие оттенки (#0ea5e9)
• Secondary: Зелено-бирюзовые оттенки (#14b8a6)
• Status: Success, Warning, Error, Info

Кастомизация

Переопределите переменные для настройки цветовой схемы:

// Переопределение переменных
$color-primary: #your-primary-color;
$color-secondary: #your-secondary-color;

// Импорт библиотеки
@import '@ui-system/ui-kit-scss/src/index.scss';

Утилиты

• Spacing: margin и padding классы (m-4, p-2, mx-auto и т.д.)
• Display: flex, grid, block, inline-block и т.д.
• Typography: размеры текста, веса, цвета
• Responsive: адаптивные классы для всех breakpoints

<div class="flex items-center justify-between p-4 mb-6">
  <h2 class="text-2xl font-semibold text-primary">Заголовок</h2>
  <button class="btn btn--secondary btn--sm">Действие</button>
</div>

Breakpoints

• xs: 480px+
• sm: 640px+
• md: 768px+
• lg: 1024px+
• xl: 1280px+
• 2xl: 1536px+

Лицензия

MIT