Про Skeletonic Stylus

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/.

Version: 2.0.0
Gzip: 7.7 KB
Brotli: 6.7 KB
License: MIT or Apache-2.0
Standard: WCAG 2.2 AA

Коротко

Skeletonic Stylus — це відкрита бібліотека CSS на базі Stylus для доступного, швидкого та модульного стилізування інтерфейсів.

Проєкт народився у 2018 році як особистий експеримент із відправки менше CSS без втрати зручності повноцінної компонентної бібліотеки. Через вісім років мета залишається незмінною.

Що ви отримуєте

Блискавична швидкість

Проєктуйте та налаштовуйте адаптивні інтерфейси за лічені хвилини. Нативні CSS-змінні, попередньо визначені класи, 12-колонкова сітка, що покриває кожен семантичний HTML-елемент.

Легкість

8,3 КБ gzip. Сторінки завантажуються швидше. Усі необхідні будівельні блоки на місці.

Адаптивний дизайн

Розроблено для десктопу та мобільних. Макети адаптуються до будь-якого пристрою. Оптимізовано для сенсорного керування, семантичний HTML по всьому проєкту.

Доступність

WCAG 2.2 вбудовано: кільця focus-visible, контраст AA, skip-link хелпери, клавіатурно-дружні компоненти, підтримка зменшення руху — без додаткової таблиці стилів, без шаблонного коду aria-*.

Бібліотека компонентів

Модульні CSS-компоненти та Stylus-міксини. Кнопки, форми, картки, сповіщення, значки, палітри та анімації — чисті, модульні, готові до інтеграції.

Безкоштовно та з відкритим кодом

Спроєктовано, побудовано та підтримується Sebastien Rousseau. Подвійна ліцензія — MIT або Apache 2.0. Без оплати, без ліцензійних витрат, навіть для комерційного використання.

Як це порівнюється

Одна самостійно розміщена таблиця стилів покриває типографіку, кнопки, форми, картки, таблиці, палітри, анімації та утиліти. Без JavaScript. Без обов'язкового кроку збірки. Без залежностей від Bootstrap, Tailwind чи Bulma.

Data table table
Функція	Skeletonic Stylus	Bootstrap 5	Tailwind CSS	Bulma
Розмір gzip	8,3 КБ	~30 КБ	~10 КБ JIT	~30 КБ
Відповідність WCAG 2.2	Вбудовано	Частково	Ручне	Частково
Каскадні шари	Так (`@layer`)	Ні	Ні	Ні
Темний режим	`prefers-color-scheme`	Опціонально	На основі класів	Опціонально
Потрібен JavaScript	Ні	Так (Popper)	Ні	Ні
CycloneDX SBOM	Так	Ні	Ні	Ні
Зменшення руху	Дотримується	Частково	Ручне	Частково
Ліцензія	MIT або Apache 2.0	MIT	MIT	MIT

Принципи

Доступність — це підлога, а не стеля. Відповідність WCAG 2.2 вбудована в кожен компонент, а не прикручена як «тема».
Байти мають значення. Одна відправлена таблиця стилів не повинна перевищувати бюджет ваги сторінки. Обмеження 8 КБ gzip контролюється в CI.
Каскадні шари перемагають війни специфічності. Перевизначайте будь-що впевнено — без !important, без трюків з порядком DOM.
Stylus все ще хороший. Лаконічний, виразний, і дозволяє бібліотеці вміщуватися в ~3000 читабельних рядків.
Нудність — це перевага. Без JS-залежностей. Без магії збірки. Без зламаних перейменувань. CSS-класи роблять саме те, що обіцяють.
Тематизація за секунди. Нативні CSS-змінні для кольорів, відступів, типографіки та радіусів.
Зміцнений ланцюг постачання. Підписана провенанс npm. Закріплені оновлення Dependabot. CVE-2023-44270 виправлено через overrides.

Версіонування та semver

Skeletonic Stylus дотримується Семантичного версіонування 2.0.

Data table table
Зміна	Коли	Приклад
Major	Видалення або перейменування публічного класу, міксину чи токена	1.x → 2.0
Minor	Додавання нового компонента, міксину чи токена	1.1 → 1.2
Patch	Виправлення помилок, покращення a11y, продуктивність, безпека	1.1.6 → 2.0.0

Усі публічні імена класів, усі CSS-змінні та всі експортовані Stylus-міксини є частиною публічного API. Зміна, що ламає сумісність, отримує major-оновлення та посібник з міграції.

Управління проєктом

Skeletonic Stylus спроєктовано, побудовано та підтримується Sebastien Rousseau. Подвійна ліцензія — MIT та Apache 2.0.

Запитання, ідеї та внески вітаються — див. посібник із внеску.