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 は、アクセシブルで高速、モジュール式の UI スタイリングのためのオープンソース Stylus CSS ライブラリです。

2018年に 少ない CSS を配信する という個人的な実験として誕生しました。本格的なコンポーネントライブラリの利便性を損なうことなく。8年経った今も、目標は変わっていません。

Skeletonic が提供するもの

稲妻

超高速

レスポンシブなインターフェースを数分でデザイン・カスタマイズ。ネイティブ CSS 変数、定義済みクラス、すべてのセマンティック HTML 要素に対応した12カラムグリッド。

羽

軽量

gzip圧縮で約7.7 KB。ページの読み込みが速くなります。必要なビルディングブロックはすべて含まれています。

レスポンシブデバイス

レスポンシブデザイン

デスクトップとモバイルのために設計。レイアウトはあらゆるデバイスに適応します。タッチ最適化、全体を通してセマンティック HTML。

アクセシビリティ

アクセシビリティ

WCAG 2.2 を組み込み済み: focus-visible リング、AA コントラスト、スキップリンクヘルパー、キーボード対応コンポーネント、モーション軽減対応 — 追加のスタイルシートも aria-* ボイラープレートも不要です。

コンポーネントブロック

コンポーネントライブラリ

モジュール式 CSS コンポーネントと Stylus ミックスイン。ボタン、フォーム、カード、アラート、バッジ、パレット、アニメーション — クリーンでモジュール式、すぐに使えます。

GitHub マーク

無料＆オープンソース

Sebastien Rousseau が設計・開発・保守しています。MIT または Apache 2.0 のデュアルライセンス。商用利用を含め、料金もライセンスコストもかかりません。

他のフレームワークとの比較

セルフホスト型のスタイルシート1つで、タイポグラフィ、ボタン、フォーム、カード、テーブル、パレット、アニメーション、ユーティリティクラスをカバーします。JavaScript 不要。ビルドステップ不要。Bootstrap、Tailwind、Bulma へのピア依存関係もありません。

機能 Skeletonic Stylus Bootstrap 5 Tailwind CSS Bulma
gzip圧縮サイズ 約7.7 KB 約30 KB 約10 KB (varies) 約30 KB
WCAG 2.2 準拠 組み込み済み 部分的 手動 部分的
カスケードレイヤー 対応 (@layer) 非対応 非対応 非対応
ダークモード prefers-color-scheme オプトイン クラスベース オプトイン
JavaScript 必須 不要 必要 (Popper) 不要 不要
CycloneDX SBOM 対応 非対応 非対応 非対応
モーション軽減 尊重 部分的 手動 部分的
ライセンス MIT または Apache 2.0 MIT MIT MIT

原則

  1. アクセシビリティは基盤であり、付加機能ではありません。 WCAG 2.2 準拠はすべてのコンポーネントに組み込まれており、「テーマ」として後付けされるものではありません。
  2. 1バイトも無駄にしません。 配信するスタイルシート1つでページ容量の予算を超えるべきではありません。gzip圧縮で8 KB の上限が CI で強制されています。
  3. カスケードレイヤーが詳細度の争いに勝ります。 !important も DOM 順序のトリックも不要で、確実にオーバーライドできます。
  4. Stylus は今でも優れた選択肢です。 簡潔で表現力豊かで、ライブラリを約3,000行の読みやすいコードに収められます。
  5. 退屈であることは美点です。 JS 依存関係なし。ビルド時のマジックなし。互換性を壊すリネームなし。CSS クラスは名前の通りに動作します。
  6. 数秒でテーマ設定可能。 色、スペーシング、タイポグラフィ、角丸のためのネイティブ CSS カスタムプロパティ。
  7. サプライチェーンの強化。 署名された npm プロベナンス。固定された Dependabot 更新。CVE-2023-44270 はオーバーライドでパッチ済み。

バージョニングとセマンティックバージョニング

Skeletonic Stylus は Semantic Versioning 2.0 に従います。

レベル 変更時期 例
メジャー パブリッククラス、ミックスイン、またはトークンの削除・リネーム時 1.x → 2.0
マイナー 新しいコンポーネント、ミックスイン、またはトークンの追加時 1.1 → 1.2
パッチ バグ修正、a11y の改善、パフォーマンス、セキュリティ 1.1.6 → 2.0.0

すべてのパブリッククラス名、すべての CSS カスタムプロパティ、およびすべてのエクスポートされた Stylus ミックスインはパブリック API の一部です。互換性を壊す変更にはメジャーバンプとマイグレーションガイドが付きます。

運営

Skeletonic Stylus は Sebastien Rousseau が設計、開発、保守しています。MIT と Apache 2.0 のデュアルライセンスです。

Issue、アイデア、コントリビューションを歓迎します — コントリビューションガイドをご覧ください。