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