ダークモードもサポート！シンプルで拡張性も備えた超軽量のプログレッシブCSSフレームワーク -Cutestrap

Post on:2019年9月30日

Cutestrapの特徴

Cutestrapは、シンプルなAPIと堅牢なカスタマイズオプションを備え、最新の技術と未来を見据えた視点でコンテンツ重視のプログレッシブ・エンハンスメントを採用したCSSのフレームワークです。

シンプルで拡張性も備えたフレームワーク

ライセンスはGNU GENERAL PUBLIC LICENSEで、個人でも商用のプロジェクトでも無料で利用できます。

以下のブラウザをサポートしています。

サポートの制約は2つで、カスタムプロパティとCSS Gridです。

デモではCutestrapで実装できるUI要素やグリッドを楽しめます。

フォームは、表示とセマンティックマークアップの両方で統一されています。CSSのみを使用して変更されているため、アクセシビリティに影響はありません。

デフォルトのボタンは.buttonで適用されます。-付きのclassは、さまざまなボタンのバリエーションに使用できます。

デフォルトのグリッドは、すべての子に対して同じ幅の列を作成します。

カラムはカスタムプロパティ（--columns）を使用して、微調整できます。

ラッパーは、max-widthとpaddingを定義したclassです。ラッパーのサイズは、max-widthとpaddingを決定します。

テキストは、ベースライングリッドを使用して一貫した垂直リズムを提供するように設定されています。カスタムプロパティ（--rhythm）で定義されているので、変更する際も簡単です。

デモページ: タイポグラフィ

その他のUIでよく使用するスタイルは、ユーティリティにまとめてあります。

デモページ: ユーティリティ