Awesome CSS Frameworks

CSS Frameworksを扱う資料や関連プロジェクトをまとめたAwesomeリストです。

目次

• ベース／リセット／正規化
• クラスレス
• 超軽量
• 汎用
• Material Design
• ユーティリティベース
• 特化型
• 開発停止

ベース／リセット／正規化

• modern-normalize - ブラウザーのデフォルトスタイルを正規化します。 リポジトリ | #CSS

• ress - モダンなCSSリセットです。 リポジトリ | #CSS

• Natural Selection - ベストプラクティスに基づくCSSセレクター集です。 | #CSS

クラスレス

セマンティックHTMLを使い、クラスに依存しないフレームワークです。

• Pico.css - すべてのネイティブHTML要素へ洗練されたスタイルを適用し、ダークモードも自動的に有効化します。 デモ, ドキュメント, リポジトリ | #SCSS

• MVP.css - HTML要素向けのミニマルなスタイルシートです。 ドキュメント, リポジトリ | #CSS

• sakura - ミニマルなクラスレスCSSフレームワーク／テーマです。 デモ, リポジトリ | #SCSS

• Simple.css - 軽量なクラスレスCSSフレームワークです。 デモ, ドキュメント, リポジトリ | #CSS

• Tacit - クラスを使わない、初心者向けのCSSフレームワークです。 リポジトリ | #SCSS

超軽量

約10KB未満のフレームワークです。

• Pure - あらゆるウェブプロジェクトで使える、小さくレスポンシブなCSSモジュール集です。 デモ, ドキュメント, リポジトリ | #CSS

• Picnic CSS - 軽量で美しいライブラリです。 デモ, ドキュメント, リポジトリ | #SCSS

• Chota - とても小さなCSSフレームワークです。 デモ, ドキュメント, リポジトリ | #CSS

汎用

• Bootstrap - レスポンシブでモバイルファーストなウェブプロジェクトを開発するための、最も人気のあるHTML、CSS、JavaScriptフレームワークです。 デモ, ドキュメント, リポジトリ | #SCSS

• Bulma - Flexboxを基盤とするモダンなCSSフレームワークです。 デモ, ドキュメント, リポジトリ | #Sass

• Foundation - 高度なレスポンシブフロントエンドフレームワークです。 デモ, ドキュメント, リポジトリ | #SCSS

• UIkit - 高速で強力なウェブインターフェースを開発するための軽量でモジュール式のフロントエンドフレームワークです。 デモ, ドキュメント, リポジトリ | #LESS #SCSS

• Primer - GitHubのフロントエンドデザインを支えるCSSフレームワークです。 ドキュメント, リポジトリ | #SCSS

• Carbon Components - IBMのCarbon Design Systemを支えるコンポーネントライブラリです。 ドキュメント, リポジトリ | #SCSS

• U.S. Web Design System - 米国連邦政府のウェブサイトで使われるコンポーネントです。 ドキュメント, リポジトリ | #SCSS

• Fomantic-UI - 簡潔なHTML、直感的なJavaScript、容易なデバッグによって美しいウェブサイトをすばやく構築できます。 ドキュメント, リポジトリ | #LESS

• Cirrus - 迅速なプロトタイピング向けに設計された、コンポーネントとユーティリティ中心のSCSSフレームワークです。 デモ, ドキュメント, リポジトリ | #SCSS

• Vanilla Framework - Canonical Web Teamが開発する、シンプルで拡張可能なCSSフレームワークです。 デモ, ドキュメント, リポジトリ | #SCSS

• PatternFly - エンタープライズウェブアプリケーション向けのUIフレームワークです。 デモ, ドキュメント, リポジトリ | #SCSS #LESS

• Stacks - Stack Overflowで使われているUIコンポーネントです。 ドキュメント, リポジトリ | #LESS

• HiQ - レスポンシブなタイポグラフィと入力要素のスタイルを備えた、シンプルなCSS基盤です。 ドキュメント, リポジトリ | #PostCSS

Material Design

• Beer CSS - 開発者が手軽にMaterial Designインターフェースを短時間で構築できます。 リポジトリ | #CSS

• Materialize - GoogleのMaterial Designを基盤とするレスポンシブなフロントエンドライブラリです。 ドキュメント, リポジトリ | #SCSS

ユーティリティベース

• Tailwind CSS - UIを迅速に開発するためのユーティリティファーストCSSフレームワークです。 ドキュメント, リポジトリ | #CSS

• Open Props - 適応性と一貫性のあるデザインをすばやく作るためのCSSカスタムプロパティです。 デモ, ドキュメント, リポジトリ | #CSS #PostCSS

特化型

• NES.css - NES風のCSSフレームワークです。 デモ, ドキュメント, リポジトリ | #SCSS

• 98.css - Windows 98風のインターフェースを構築するCSSライブラリです。 リポジトリ | #CSS

• Tufte CSS - Edward Tufteの配布資料のようにウェブページを装飾します。 リポジトリ | #CSS

• Gutenberg - ウェブを適切に印刷するためのモダンなフレームワークです。 デモ, ドキュメント | #SCSS

• System.css - レトロなApple風インターフェースを構築するデザインシステムです。 リポジトリ | #PostCSS

• XP.css - Windows XP風のインターフェースを構築するCSSライブラリです。 リポジトリ | #PostCSS

• TuiCss - MS-DOS風インターフェースを作るためのライブラリです。 デモ, ドキュメント | #SCSS

• 7.css - Windows 7風のインターフェースを構築するCSSライブラリです。 リポジトリ | #PostCSS

• Bojler - レスポンシブで軽量なメールテンプレートを開発するためのメールフレームワークです。 ドキュメント, リポジトリ | #SCSS

• Orbit - あらゆる種類の放射状UIを構築するために設計されたCSSフレームワークです。 ドキュメント, リポジトリ | #SCSS

開発停止

約1年以上にわたり実質的な開発がない、または公式に非推奨となったフレームワークです。 参考や着想のために残しており、開発再開を期待しています。

ライセンス

ライセンスはCC0 1.0です。

許可を求めることなく、商用目的を含め、本作品を複製、変更、配布、実演できます。

GitHubスター画像はShieldsによって提供されています。