Компоненты

Translation note (2026-04-30). v2.0.0 adds RTL support and a refreshed 2026 framework comparison. The English source is the canonical reference while these translations catch up. See https://skeletonic.io/about/ · https://skeletonic.io/components/ · https://skeletonic.io/benchmarks/.

Каждый пример ниже отрисован тем же файлом стилей, который демонстрируется. Без препроцессора. Без JavaScript. Без дополнительных зависимостей. Скопируйте любой фрагмент в чистый HTML-файл — и он работает.

Элементы ввода

Интерактивные элементы, которые посетитель нажимает, касается или фокусирует для управления страницей.

Кнопки

Семантический, настраиваемый элемент действия. Сплошные и контурные варианты поставляются в шести фирменных цветах каждый.

<a href="#" class="button primary">Primary</a>
<a href="#" class="button secondary">Secondary</a>
<a href="#" class="button tertiary">Tertiary</a>

Primary Secondary Tertiary

Контурные варианты:

<a href="#" class="button primary-outline">Outline</a>
<a href="#" class="button secondary-outline">Outline</a>

Outline Outline

Примечание о доступности. Каждый вариант .button имеет кольцо :focus-visible и минимальную область нажатия 24×24 px (WCAG 2.2 SC 2.5.8). Используйте <button type="button"> для действий на странице и <a href> только для навигации.

Бейджи

Компактная метка для статуса, счётчика или категории. Размер текста фиксирован, чтобы бейджи выравнивались с окружающим текстом.

<span class="badge">Default</span>
<span class="badge primary">Primary</span>
<span class="badge success">Success</span>
<span class="badge warning">Warning</span>
<span class="badge danger">Danger</span>

Default Primary Success Warning Danger

Примечание о доступности. Бейджи по умолчанию декоративны. Когда бейдж несёт единственный сигнал (например, счётчик непрочитанных), оберните его в визуально скрытый хелпер: <span class="visually-hidden">3 непрочитанных сообщения</span>.

Обратная связь

Поверхности, сообщающие посетителю, что что-то произошло — или вот-вот произойдёт.

Уведомления

Статусные сообщения с семантическим назначением. В v2.0.0 каждый вариант явно указан в пространстве имён .alert-{primary,secondary,info,success,warning,error}, чтобы класс варианта не конфликтовал с классами состояний в других местах страницы.

<div class="alert alert-primary" role="alert">
  <strong>Внимание.</strong> Это основное уведомление.
</div>
<div class="alert alert-success" role="status">
  <strong>Сохранено.</strong> Ваши изменения сохранены.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Осторожно.</strong> Это действие влияет на общее состояние.
</div>
<div class="alert alert-error" role="alert">
  <strong>Ошибка.</strong> Не удалось сохранить форму.
</div>

Внимание. Это основное уведомление.

Сохранено. Ваши изменения сохранены.

Осторожно. Это действие влияет на общее состояние.

Ошибка. Не удалось сохранить форму.

Примечание о доступности. Используйте role="alert" для сообщений, требующих немедленного внимания (ошибки, предупреждения), и role="status" для неcрочных подтверждений. Оба варианта передают сообщение вспомогательным технологиям в момент появления.

Поверхности

Контейнеры, обрамляющие и группирующие связанный контент.

Карточки

Контейнер с рамкой и отступами для одного связного блока. Сочетайте с сеткой flex-N для адаптивных стен из карточек.

<section class="row">
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Lightweight</h3>
      <p>38.8 KB minified, 7.7 KB gzipped.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Accessible</h3>
      <p>WCAG 2.2 conformant out of the box.</p>
    </div>
  </article>
  <article class="card flex-1">
    <div class="card-content">
      <h3 class="card-title">Modular</h3>
      <p>Cascade-layered for easy overrides.</p>
    </div>
  </article>
</section>

Легковесный

45,7 КБ минифицированный, 8,3 КБ gzip.

Доступный

Соответствует WCAG 2.2 прямо из коробки.

Модульный

Каскадные слои для простого переопределения.

Примечание о доступности. Оберните каждую карточку в семантический ориентир (<article>, <section>) и начните её содержимое с заголовка (<h3>). Пользователи экранных читалок смогут перемещаться по списку карточек как по полноценным навигационным областям.

Формы

Поля ввода, метки и группировки для сбора пользовательских данных.

Поля форм

Метки, текстовые поля, текстовые области, fieldset и legend — всё согласовано по размерам с остальной дизайн-системой.

<form>
  <label for="name">Имя</label>
  <input id="name" type="text" required>

  <label for="email">Email</label>
  <input id="email" type="email" required class="input-primary">

  <label for="msg">Сообщение</label>
  <textarea id="msg" rows="4"></textarea>

  <button type="submit" class="button primary">Отправить</button>
</form>

Имя

Сообщение

Примечание о доступности. Каждое поле ввода должно иметь программно связанный <label for="…">. Группируйте связанные элементы внутри <fieldset> с <legend>. Отмечайте обязательные поля атрибутом required (и видимой звёздочкой в тексте метки).

Макет

Структурные примитивы — сетка, контейнер, заголовок — формирующие всю страницу.

Сетка

Адаптивная сетка flex-N (от 1 до 12 колонок) на основе flexbox. Родительский элемент .row автоматически задаёт промежутки и перенос.

<div class="row">
  <div class="flex-6">Половина</div>
  <div class="flex-6">Половина</div>
</div>
<div class="row">
  <div class="flex-4">Треть</div>
  <div class="flex-4">Треть</div>
  <div class="flex-4">Треть</div>
</div>

Половина

Треть

Примечание о доступности. Визуальный порядок должен соответствовать порядку в DOM. Избегайте изменения порядка строк с помощью flex-direction: row-reverse или order: — экранные читалки и пользователи клавиатуры следуют исходному коду, а не отрисовке.

Полноценный заголовок на чистом CSS с адаптивным переключателем-гамбургером. Без JavaScript. Скопируйте фрагмент ниже в чистый HTML-файл, уже подключающий skeletonic.min.css, — и меню сворачивается, раскрывается и корректно удерживает фокус самостоятельно.

<style>
  .sk-header{position:relative;display:flex;align-items:center;gap:1rem;padding:.75rem 1rem;border:1px solid #e4e4e7;border-radius:.5rem;background:#fff;}
  .sk-header .sk-brand{font-weight:600;color:#0a0a0a;text-decoration:none;}
  .sk-header .sk-toggle{position:absolute;left:-9999px;}
  .sk-header .sk-burger{display:none;margin-left:auto;cursor:pointer;padding:.625rem .75rem;border:1px solid #e4e4e7;border-radius:.375rem;font-size:1.125rem;line-height:1;min-width:2.75rem;min-height:2.75rem;}
  .sk-header .sk-burger:focus-within,.sk-header .sk-toggle:focus-visible+.sk-burger{outline:2px solid hsl(210,100%,42%);outline-offset:2px;}
  .sk-header .sk-menu{list-style:none;display:flex;gap:.25rem;margin:0 0 0 auto;padding:0;}
  .sk-header .sk-menu a{display:inline-flex;align-items:center;min-height:2.75rem;padding:.5rem .875rem;border-radius:.375rem;color:#1a1a1a;text-decoration:none;}
  .sk-header .sk-menu a:hover{background:#f4f4f5;}
  @media (max-width:640px){
    .sk-header .sk-burger{display:inline-flex;align-items:center;justify-content:center;}
    .sk-header .sk-menu{display:none;flex-direction:column;gap:0;position:absolute;top:calc(100% + .25rem);left:0;right:0;background:#fff;border:1px solid #e4e4e7;border-radius:.5rem;padding:.375rem;box-shadow:0 4px 24px rgba(0,0,0,.08);z-index:10;}
    .sk-header .sk-menu a{padding:.75rem 1rem;border-bottom:1px solid #f4f4f5;}
    .sk-header .sk-menu li:last-child a{border-bottom:0;}
    .sk-header .sk-toggle:checked ~ .sk-menu{display:flex;}
  }
</style>
<header class="sk-header">
  <a class="sk-brand" href="#">Бренд</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Переключить навигацию">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Главная</a></li>
    <li><a href="#">Документация</a></li>
    <li><a href="#">Компоненты</a></li>
    <li><a href="#">О проекте</a></li>
  </ul>
</header>

Бренд

Примечание о доступности. Скрытый чекбокс остаётся в порядке табуляции, поэтому пользователи клавиатуры могут открыть меню клавишами Space или Enter. <label> имеет aria-hidden, потому что сам чекбокс является источником доступного имени. Уменьшите окно ниже 640 px, чтобы увидеть, как переключатель-гамбургер берёт управление.

Полные заметки о доступности → · Просмотреть палитры →

Skeletonic Stylus