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