Компоненти

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>

Основна Вторинна Третинна

Контурні варіанти:

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

Контур Контур

Примітка щодо доступності. Кожен варіант .button постачається з кільцем :focus-visible та мінімальною зоною дотику 24×24 пкс (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>

За замовчуванням Основний Успіх Попередження Небезпека

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

Зворотний зв'язок

Поверхні, що повідомляють відвідувачу про те, що щось сталося — або збирається статися.

Сповіщення

Повідомлення про статус із семантичним призначенням. У v2.0.0 кожен варіант явно виділено в простір імен під .alert-{primary,secondary,info,success,warning,error}, тож клас варіанту не може конфліктувати з класами стану в інших місцях сторінки.

<div class="alert alert-primary" role="alert">
  <strong>Heads up.</strong> This is a primary alert.
</div>
<div class="alert alert-success" role="status">
  <strong>Saved.</strong> Your changes are persisted.
</div>
<div class="alert alert-warning" role="alert">
  <strong>Careful.</strong> This action affects shared state.
</div>
<div class="alert alert-error" role="alert">
  <strong>Error.</strong> Could not save the form.
</div>

Зверніть увагу. Це основне сповіщення.

Збережено. Ваші зміни застосовано.

Обережно. Ця дія впливає на спільний стан.

Помилка. Не вдалося зберегти форму.

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

Поверхні

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

Картки

Контейнер з рамкою та відступами для єдиного логічного блоку. Поєднуйте із сіткою 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>). Користувачі скрінрідерів зможуть переміщуватися по списку карток як по повноцінних навігаційних регіонах.

Форми

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

Поля форми

Мітки, текстові поля, textarea, fieldset і legend — все масштабовано однаково з рештою дизайн-системи.

<form>
  <label for="name">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">Message</label>
  <textarea id="msg" rows="4"></textarea>

  <button type="submit" class="button primary">Send</button>
</form>

Ім'я

Електронна пошта

Повідомлення

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

Макет

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

Сітка

Адаптивна сітка flex-N (від 1 до 12 колонок) на основі flexbox. Батьківський елемент .row автоматично додає відступи та перенос.

<div class="row">
  <div class="flex-6">Half</div>
  <div class="flex-6">Half</div>
</div>
<div class="row">
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</div>
  <div class="flex-4">Third</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="#">Brand</a>
  <input class="sk-toggle" id="sk-nav-toggle" type="checkbox" aria-label="Toggle navigation">
  <label class="sk-burger" for="sk-nav-toggle" aria-hidden="true">☰</label>
  <ul class="sk-menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Docs</a></li>
    <li><a href="#">Components</a></li>
    <li><a href="#">About</a></li>
  </ul>
</header>

Бренд

Примітка щодо доступності. Прихований чекбокс залишається в порядку табуляції, тож користувачі клавіатури можуть відкрити меню клавішами Space або Enter. Елемент <label> має aria-hidden, оскільки сам чекбокс є джерелом доступного імені. Зменште ширину вікна нижче 640 пкс, щоб побачити гамбургер-перемикач у дії.

Дивіться повні примітки з a11y → · Переглянути палітри →

Skeletonic Stylus