Sleyt CSS Framework

モダンなCSSリセットでブラウザのデフォルトを正規化。ブラウザ間での一貫した表示のための基本要素スタイリングを含みます。

• • ボックスサイズ: border-box
• • マージンとパディングのリセット
• • 最適化されたフォントレンダリング
• • モーション軽減のサポート

システム設定に基づく自動ダークモードサポート。CSS変数でシームレスなテーマ切り替えを実現。

• • 自動ダークモード検出
• • スムーズなトランジション
• • 一貫したカラー
• • 透明度の向上

カラー、スペーシング、タイポグラフィなどのCSSカスタムプロパティ。デザイントークンによる簡単なカスタマイズ。

• • カラーパレット
• • スペーシングスケール
• • タイポグラフィシステム
• • シャドウとエフェクト

自動センタリングとmax-widthブレイクポイントを持つレスポンシブコンテナ。

<div class="container">
  コンテンツ
</div>

ブレイクポイント: 640px, 768px, 1024px, 1280px, 1536px

柔軟なレイアウトのための包括的なFlexboxユーティリティ。

例: 横並びレイアウト

<div class="flex justify-between items-center">
  <div>ロゴ</div>
  <div>メニュー</div>
  <div>ボタン</div>
</div>

例: 縦並び中央揃えレイアウト

<div class="flex flex-col items-center justify-center">
  <div>タイトル</div>
  <div>コンテンツ</div>
</div>

例: 間隔のあるカードグリッド

<div class="flex gap-4 flex-wrap">
  <div class="flex-1">カード 1</div>
  <div class="flex-1">カード 2</div>
  <div class="flex-1">カード 3</div>
</div>

レスポンシブカラムとギャップユーティリティを備えたCSS Gridシステム。

例: 3カラムグリッド

<div class="grid grid-cols-3 gap-4">
  <div>アイテム 1</div>
  <div>アイテム 2</div>
  <div>アイテム 3</div>
</div>

例: レスポンシブグリッド

<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
  <div>カード 1</div>
  <div>カード 2</div>
  <div>カード 3</div>
  <div>カード 4</div>
</div>

モバイル: 1カラム、タブレット: 2カラム、デスクトップ: 4カラム