2017年にチェックしておきたい、CSSの軽量フレームワークのまとめ
Post on:2017年4月27日
sponsors
Flexboxで実装されたグリッドのみをはじめ、さまざまなコンポーネントが利用できるもの、ファイルがモジュール化されたもの、アクセシブルに特化されたものなど、2017年にチェックしておきたいCSSの軽量フレームワークを紹介します。
mini.css -GitHub
mini.css
テンプレート一覧
モバイルデバイスと最新のブラウザを考慮して設計された軽量（7KB）CSSフレームワーク。ほとんどのコンポーネントはFlexboxで実装されています。カスタマイズにも優れており、デザインにとらわれることなく、利用できます。
Bootstrapの代替として利用できるよう設計された軽量（8KB）のフレームワーク。CSSの詳細度を小さい値で実装されており、KSSを使用したスタイルガイドのベースになります。
Milligram -GitHub
Milligram
デモ一覧
ミリグラムの名の通り非常に軽量（2KB）のフレームワークで、実装の出発点として最小のスタイル設定を提供します。リセットすべきプロパティはよりクリーンなコードで、より良いパフォーマンスと高い生産性を目的に設計されています。
BulmaをベースにしたVue.js用の軽量UIコンポーネント。派手なアニメーションはなしで、ユーザビリティとパフォーマンスに焦点を当てています。
Bulmaについては、下記を参考に。
フラットなデザインで、クリーンなWebサイトを設計するためのレスポンシブ対応のオープンソースの軽量（8KB）フレームワーク。Material Designの美しいカラーを使ったシンプルなコンポーネントが用意されています。
モバイルファーストで設計された軽量（3KB）のフレームワーク。デスクトップでも動作します。コンポーネントのディテールに重点が置かれており、特にコンテンツが豊富なページに最高のユーザーエクスペリエンスを提供します。
modulr.css -GitHub
modulr.css
デモ一覧
パワフルなWebインターフェイスとモバイルインターフェイスを構築するために、モジュラー式で設計された軽量（17KB）フレームワーク。必要なCSSファイルのみで構成するとさらに軽くなります。
日本人制作者による、Flexboxで実装されたグリッド専門の軽量（321bytes）フレームワーク。使用するclassは、2つだけで、単位にcalc()を使用して、グリッドを作成します。
Flexboxでグリッドをはじめ、さまざまなコンポーネントを実装できる軽量（21KB）フレームワーク。ヘッダやカード、高さ100%など、最近人気のコンポーネントが揃っています。
EqualizeCss -GitHub
EqualizeCss
Flexboxの各プロパティを活用して制作された軽量（13KB）のフレームワーク。必要なスタイルを記述するだけで、グリッドを作成し、行や列を管理することができます。class名は一般的なフレームワークと同じなので、移行も簡単です。
Waffle Grid System -GitHub
Waffle Grid System
Flexboxで実装された軽量（6KB）のフレームワーク。ガード型レイアウトが、まるでワッフルのように簡単にレイアウトできます。
今回紹介している中で最軽量の93bytes！
たった9行でレスポンシブ対応、プログレッシブエンハンスベースのグリッドを実装するCSSフレームワークです。
GoogleのMaterial Designのガイドラインに準拠した軽量（5.4KB）のCSSフレームワーク。サイトを構築するために必要な基本コンポーネントはすべて含まれています。
Picnic CSS -GitHub
Picnic CSS
デモページ
さまざまなコンポーネントが含まれた、プロジェクトをはじめる際のベースになる軽量（37KB）のフレームワーク。ファイルサイズの割に、かなりの数のコンポーネントが用意されています。
デフォルトのHTML要素を使い、アクセシブルでセマンティックなWebサイトを構築するための軽量（71KB）フレームワーク。
Spectre.css -GitHub
Spectre.css
カスタマイズ性に優れた、レスポンシブ対応の軽量（10KB）のフレームワーク。Flexboxベースで実装されており、モバイルフレンドリーのレイアウトを構築できます。
スピード、パフォーマンス、スケーラビリティのために設計された軽量ユーティリティのコレクション。グリッド用、レイアウト用、ボーダー用など、それぞれ利用するもののみ使用することができます。
非常にシンプルなデザインで、Flexboxをベースに実装された軽量フレームワーク。用途ごとにCSSファイルが管理されており、グリッド用、コンポーネント用、マークダウン用などが揃っています。
sponsors