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

シンプルなHTMLにclassを加えるだけで、さまざまなUIコンポーネントやグリッドが実装できる超軽量(2.7Kb)のCSSフレームワークを紹介します。

プログレッシブ・エンハンスメントが採用されており、新旧ブラウザの見え方を最適化して表示されます。

サイトのキャプチャ

Cutestrap
Cutestrap -GitHub

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

top of page

©2019 coliss