sleyt — グラスモーフィズムを活用したミニマルCSSフレームワークの紹介
なぜ作ったか
自分のプロジェクトで使うための軽量でシンプルなCSSフレームワークが欲しかったので自作した。
軽量で、JavaScriptなし、モダンなデザインを意識して実装している。
UIコンポーネントや柔軟性が足りていない部分があるが、最低限利用できる状態になっている。
詳細はドキュメントサイトを参照。
コンポーネントライブラリ
sleytは4つのディレクトリに20以上のコンポーネントを整備する。
Components (src/components/): accordion、alerts、badges、buttons、cards、charts、code、forms、modals、navbar、navigation、progress、prose、sidebar、spinners、showcase、swatch、tables、tabs、tooltip
Layout (src/layout/): container、dashboard、flexbox、grid
Base (src/base/): reset、themes、variables
Utilities (src/utilities/): spacing、colors、typography、borders、effects、glass、display、position、transforms、transitions
データ可視化
charts.cssはCSSだけの棒グラフ、折れ線グラフ、ドーナツチャートを提供する。JavaScriptのグラフライブラリ不要。棒グラフはCSSの高さでデータを表現する純CSS実装となっている。
グラスモーフィズム
.glass、.glass-light、.glass-heavy、.frostedのユーティリティクラスで透明感とバックドロップブラーを付与できる。backdrop-blurユーティリティも複数段階用意されており、細かいブラー強度の調整も可能となっている。
ダークモード
@media (prefers-color-scheme: dark)によりダークモードが自動的に切り替わる。全コンポーネントの色はCSSカスタムプロパティで定義されており、1ファイル変更でパレットをカスタマイズできる。
アクセシビリティ
コンポーネントのマークアップはセマンティックHTML5パターンに準拠する。色彩コントラストはWCAG AAを目標としている。
インストール
npm install sleyt
CSSでインポートするだけで使い始められる。
@import "sleyt/dist/css/index.css";
CDN経由で使う場合は、HTMLの<head>に直接追加できる。
<link rel="stylesheet" href="https://unpkg.com/sleyt@latest/dist/css/index.css">
デモ
デモページで全コンポーネントをダークモードバリアントやグラフ種別も含めて確認できる。ブログレイアウト・記事詳細・管理ダッシュボードの3つの実用的なデモページも用意しており、実際のUIパターンを確認できる。
まとめ
sleytは読みやすさとモダンなビジュアルスタイルに特化した軽量CSS専用フレームワークである。JavaScriptランタイムに依存せず、CSSだけで動作する。
- npm: sleyt
- GitHub: bmf-san/sleyt
- デモ: bmf-san.github.io/sleyt/demo.html
