良質でレスポンシブなCSSフレームワークを使えば、どんなWebデザインプロジェクトも有利にスタートできます。CSSフレームワークのなかには、Bootstrapのようにコードが多すぎて重いものもあれば、反応が遅いものもあります。
不必要な選択肢に悩まされない、操作に十分な機能だけあるものが理想的でしょう。
よければ、Material Design Web FramewoeksやOpen-Source WordPress Development Frameworkの記事もご覧ください。
ここでは、軽量でベーシックな20のCSSフレームワークをご紹介します。
FICTOAN
FICTOANは、複雑なフレームワークを好まないユーザーにとっての優れた選択肢になることを狙っています。含む機能は、鮮やかなカラースキーム、カスタムアイコン、そして多くの軽いデザイン要素です。
Avalanche
ニーズに合わせてカスタマイズできるフレームワークです。流動的なグリッドシステム、オフセットクラス、コンテナ、バーティカルスペーシングなどの特定の機能を使うことができます。
Beauter
５KB未満に圧縮されたBeauterは、超軽量を実現しています。軽いだけで機能がないわけではありません。レスポンシブなグリッドなどの基本機能だけでなく、パララックススクロール、モーダル、ツールTIPSなどの良い機能が備わっています。
Vanilla Framework
Vanilla Frameworkはシンプルなデザインで、プロジェクトの立ち上げに使用するのに良いフレームワークです。そのままでも見栄えがするコンテナとデザイン要素がたくさん含まれていますが、簡単に好みの形にカスタマイズすることもできます。
Bulma
CSS FlexboxをベースにしたBlumaは、必要なものだけを使うことができる、完全レスポンシブなモジュールフレームワークです。数字やビューポートに基づいて自動的にカラムやタイル状のデザインを実現するといった、Flexboxの便利な機能を備えています。
Milligram
Milligramはその名前の通り、とても軽量です。圧縮時にはたったの２KBになります。想像するような基本機能をすべて含み、サイトを組み直すための最小限のスタイルで設計されています。
InvisCss
InvisCssは、複雑なフレームワークの代用品として構築されました。シンプルなCSSセレクタ名と小規模ながら魅力的なUIが特徴です。
Look
個人のプロジェクトの産物であるLookは、ミニマルなCSSフレームワークです。サイト開発者が仕事を始めるときに導入しやすい基本のフレームワークになっています。デザイン要素はシンプルで、好みの形にカスタマイズできます。
unlimitedGrid
Sassに基づいたunlimitedGridは、フレキシブルでモバイルファーストなグリッドのフレームワークです。モジュラーなので、必要とする機能のみを使わなくてはいけません。Flexboxのサポートを含み、複数のグリッドバリエーションから選べます。
Vital
より大きなフレームワークへの「逆アプローチ」として構築されたVitalは、軽量かつスケーラブルです。Sassを使って構築されているので、有効なグリッドレイアウト、カスタムボタンとローダーを見つけられます。写真加工、カードコンテナ、フォーム用にいくつかの便利なレイアウトがあります。
PowerToCSS
SMACCSやDRYをベースにしたPowerToCSSは、強固な基盤を提供する軽量のCSSフレームワークで、Webプロジェクトを次々に素早く始められます。
Kouto Swiss
Kouto Swissは、Stylusのための完全なCSSフレームワークで、多くのmixin、機能、そして素早くコード化するためのユーティリティソフトウェアを持っています。また、Caniuse Webサイトの権限も持っており、互換性のニーズに合ったスタイルシートを作ることができます。
Muffin
Muffin自体はフレームワークではありませんが、ここで取り上げる価値があるものです。デザイン重視のフロントエンドデザインテンプレートで、SASSやJekyllを使って静的なサイトを作ることができます。Muffinは、Bootstrap、Boilerplate、 inuit.cssなどのライブラリから一般的な方法を採用しているので、すぐにコーデイングを始められます。
Furtive CSS
Furtiveは、少ないメモリでも動作するモバイルファーストなフレームワークです。古いバージョンのブラウザでも作動します。つまりflexboxやSVGや、一部のベンダープレフィックスなどの「最先端技術」使うことができます。SCSSやCSSでも入手でき、構築をカスタマイズするのにGulpのファイルを用います。
Webplate
Webplateには、強固でレスポンシブなレイアウトエンジンから、グローバルなボタン要素、カスタマイズ可能なフォームや、IcoMoonアイコンフォント用サポートまですべてが含まれます。jQuery、Modernizr、Typeplateもデフォルトで入っています。
Fluidity
Fluidityは、現存するもっとも軽量でレスポンシブ対応したCSSフレームワークかもしれません。そのHTML記述だけで、追加設定なしに、115バイトのCSSファイルのみでほぼ100％レスポンシブ対応します。これ以上軽量のものはないでしょう。
Schema
LESS上に構築されたSchemaは、レスポンシブなフロントエンドのUIフレームワークで、CSSコンポーネントの包括的なコレクション（ボタン、ドロップダウン、フォームなど）を搭載しているので、素早く使用を始められます。
Emerald
Emeraldは、LESS内の実用的でレスポンシブなグリッドシステムで、ブロック要素に基づいており（フロートとは正反対）、BEMシンタックスを用いたOOCSSで書かれています。
Bijou
Bijouは、軽量（２KB以下）でレスポンシブな10カラムのグリッドフレームワークです。ボタン、アラート、テーブル、ナビゲーションバー、グリッドから構成されています。
Base
Baseは、セマンティックかつ軽量で拡張可能なフレームワークで、流動的グリッドと固定的グリッドを独自の幅、カラム、ガター、オフセット、パディングで作成できます。ボタン、フォーム、メニュー要素、CSS３プロパティ用のLESS mixinコレクション、アニメーション、グラデーション、いくつかの便利なmixinまでも含みます。
Spark
Sparkはレスポンシブデザイン用の、モバイルファーストのアプローチに基づいた軽量フレームワークです。そのフレームワークは交換可能ないくつかのカラーテーマを使い、明るくフラットなスタイルであらかじめ構築されています。
Typebase
Typebase.cssは、最小限でカスタマイズできるCSSタイポグラフィの文例集です。Typebase.cssが提供するもっとも重要な機能は、ほとんどのデバイス画面に適用される強制的なバーティカルリズムです。カラムにまたがるテキストと長いコピーが自動的に揃うようにします。 Less版とSass版が入手できます。
Hoisin
Sassで構築されたHoisinは、シンプルでレスポンシブなフロントエンドミニフレームワークで、複雑で肥大化したフロントエンドフレームワークの代替品として作られました。コンポーネントを一切含まず、その代わりに、独自のライブラリを作れる組織化された基盤の提供に注力しています。
Cute Grids
Cute Gridsは、モバイルファーストな12カラムのレスポンシブグリッドシステムです。多くのプロジェクトを大失敗させデザイナーの創造力を制限する恐れのある、今日のフレームワークへの失望から生まれました。
軽量でありながら強力
どんな種類であれフレームワークを使う際のポイントは、作業をより簡単にするかどうかです。たくさんのCSSスタイルを変更したり一連のスクリプトを読み込む際に、フレームワークを使おうとしないのはまったく論理的ではありません。
上記の基本フレームワークのどれかを使うことで、悩まされずに素早く作業を始められます。なかにはモジュラーアプローチを用いたフレームワークもあるので、特定のプロジェクトのために必要なアイテムだけを選んで使うこともできます。
