ダークモードもサポート！シンプルで拡張性も備えた超軽量のプログレッシブCSSフレームワーク -Cutestrap
Post on:2019年9月30日
sponsors
シンプルなHTMLにclassを加えるだけで、さまざまなUIコンポーネントやグリッドが実装できる超軽量（2.7Kb）のCSSフレームワークを紹介します。
プログレッシブ・エンハンスメントが採用されており、新旧ブラウザの見え方を最適化して表示されます。
Cutestrapの特徴
Cutestrapは、シンプルなAPIと堅牢なカスタマイズオプションを備え、最新の技術と未来を見据えた視点でコンテンツ重視のプログレッシブ・エンハンスメントを採用したCSSのフレームワークです。
シンプルで拡張性も備えたフレームワーク
ライセンスはGNU GENERAL PUBLIC LICENSEで、個人でも商用のプロジェクトでも無料で利用できます。
ブラウザのサポート
以下のブラウザをサポートしています。
- Chrome
- Firefox
- Edge
- Safari
- Opera
サポートの制約は2つで、カスタムプロパティとCSS Gridです。
Cutestrapのデモ
デモではCutestrapで実装できるUI要素やグリッドを楽しめます。
フォームは、表示とセマンティックマークアップの両方で統一されています。CSSのみを使用して変更されているため、アクセシビリティに影響はありません。
デモページ: フォーム
デフォルトのボタンは.buttonで適用されます。-付きのclassは、さまざまなボタンのバリエーションに使用できます。
デモページ: ボタン
デフォルトのグリッドは、すべての子に対して同じ幅の列を作成します。
デモページ: グリッド
カラムはカスタムプロパティ（--columns）を使用して、微調整できます。
デモページ: カラム
ラッパーは、max-widthとpaddingを定義したclassです。ラッパーのサイズは、max-widthとpaddingを決定します。
デモページ: ラッパー
テキストは、ベースライングリッドを使用して一貫した垂直リズムを提供するように設定されています。カスタムプロパティ（--rhythm）で定義されているので、変更する際も簡単です。
デモページ: タイポグラフィ
その他のUIでよく使用するスタイルは、ユーティリティにまとめてあります。
デモページ: ユーティリティ
sponsors
