ここ数年、Webのフロントエンド開発でのレイアウト部分には「Twitter Bootstrap」を長く使って来たが、さすがに飽きてきた（笑） バージョンが3になってからあまりコアに変更もなくなって、つまらなくなって来たというのが一番大きいのかも。
──そんなわけで、Bootstrapに代わるフロントエンドフレームワーク（≒CSSフレームワーク）ってないのかなぁと思い立ったのだ。
探してみたら、結構面白いのが色々あったのでこの記事で紹介しておこう（アルファベット順）。

AUI ─ Atlassian User Interface

「Bitbucket（Git & Mercurial（マーキュリアル）選択型Webホスティングサービス）」を提供しているアトラシアン社が提供しているCSSフレームワーク（フロントエンドライブラリ）。Bootstrapと同等かそれ以上の高機能フレームワークで、Forkしている有志のユーザーによってコアやUIコンポーネント等の開発が活発である。
その他の特徴としては、

  • CDN経由での読み込みが可能
  • 動作にはjQueryが必要（公式サポートバージョンは1.7.2と1.8.3、および1.10.21）
  • UIコンポーネントセットが多い（種類としてはBootstrapを超える）
  • コアモジュールに魅力的なUIコンポーネントがある（ソート可能テーブルや日付ピッカーなど）
  • Soyテンプレート（Closure templateとも呼ばれる）を採用しており、これを利用することで開発者はクライアントとサーバ上（JAVA）で同じテンプレート上でのUI開発を行うことができる
  • bootstrapよりHTML側のネスト構造が浅いままUIコンポーネントが適用できるため、最終的なHTMLの可読性が高い
  • ライセンス形態： Apache2

最新バージョン: 5.8.7（2015年3月3日時点）

Base ─ ベース

CSSプリプロセッサ「SASS/LESS」で開発されたCSSフレームワークで、IE7を含むほとんどのメジャーブラウザでの互換性を謳っている。UIコンポーネントは全体的にセンシティブ（線が細い）な感じで、非丸角型のフラットレイアウトとなる。フレームワークのclass名汚染は少ない方だが、class名はやや長いかも。
その他の特徴としては、

  • 動作にはプラグイン用の default.js と modernizr.js （どちらもパッケージに同梱）が必要
  • カスタマイズにはSASSかLESSのコンパイラが必要
  • グリッドは最大12グリッドまで
  • 初期状態ではプラグインが未定義で、JavaScriptを使用する動的なUIコンポーネントはない
  • ライセンス形態： MITライセンス

最新バージョン: 1.8.5（2015年3月3日時点）

BassCSS ─ BASSCSS

デザイナーのための超高速CSSフレームワークで、「初心者向けCSSツールキット」を謳っている。基本的に利用するユーザーがスタイル定義を拡張していくことが前提となっていて、フレームワークと言うよりはCSSテンプレートに近い。仕様的にもBootstrapに似ている部分が多く、Bootstrapを使ったことがあるユーザーなら扱い易いかも。
その他の特徴は、

  • CDN経由でのインポートに対応
  • Reworkプリプロセッサを利用したコンパイルが可能
  • 各UIコンポーネントをプラグインとして使用する／しないを選べる
  • グリッドレイアウトやカラーリング等、UIコンポーネントセットは多め
  • レスポンシブ対応型の要素オブジェクトのスタイル「Flex Object」という独自コンポーネントがある（グリッドレイアウトとも組み合わせられる）
  • 公式サイトから自分用のスタイル定義を設定してコンパイル済みCSSファイルを取得できる
  • デフォルトのCSSファイルは23kBで、GZIP圧縮後は4kBとなる
  • ライセンス形態： MITライセンス

最新バージョン: 5.0.0 （2015年3月3日時点）

CardinalCSS ─ カーディナルCSS

「モバイルファースト」を謳っているCSSフレームワーク。LESSプリプロセッサ用のCSSで読みやすく保守性が高い。機能やUIコンポーネントセットはBootstrapに迫るものがある。
特徴としては、

  • normalize.css 組み込み済み
  • 利用にはサーバ側でCSSをLESSコンパイルできる環境が必要
  • 柔軟なグリッドレイアウトシステム
  • ボタン、フォーム、テーブルなどのUIコンポーネントセットを持つ
  • gzip圧縮用に最適化されたユーティリティクラス
  • 実ファイルはミニファイ&gzip圧縮されていて 11.13kB
  • ほぼすべてのメジャーなモダンブラウザに対応している
  • ライセンス形態： MITライセンス

最新バージョン: 3.0.6（2015年3月3日時点）

ConciseCSS ─ コンサイスCSS

フラットデザインのCSSフレームワーク。必要最小限の機能構成なので初心者にも扱いやすい。デフォルトのカラートーンが淡め。グリッドレイアウトは16グリッドまで可能。UIコンポーネントのclass名がやや長いのでコーディング時の負担がやや大きいかも。
その他の特徴としては、

  • Normalize.CSS 組み込み済み
  • SASSソースファイルによるカスタマイズ
  • HTML5を無効にできる（旧来の(X)HTML用CSSセットとしても利用可能）
  • レスポンシブを無効化できる
  • コンパイル済みCSSを適応するだけで利用可能（css/concise.css と js/concise.js）
  • 動作にはjQueryが必要
  • アドオンにてUIコンポーネントセットを利用できるが少なめ
  • ライセンス形態： MITライセンス

最新バージョン: 2.1.0 （2015年3月3日時点）

Furtive ─ ファーティブ

100％モバイルファーストの超軽量CSSフレームワーク。モバイル優先のメディアクエリでグリッドを生成する「Rework Flex Grid」というCSSプラグインを取り込んでいて、モバイルでのブラウジングに対して無駄なCSS解析を行わず高速なWEBレンダリングを実現している（と謳っている）。確かに今回調査したCSSフレームワーク中では一番軽量だったので、名前の通り「ひそかに」動くのかも（笑） ただし、PC向けのサイトには向かないので、利用シーンは限られるかも。
その他の特徴は、

  • rem単位でのグリッドシステムを採用（完全なプログレッシブ・エンハンスメント対応のため、レガシーブラウザでは動作制限あり）
  • グリッドは最大6グリッドまで
  • 最終的にWEBサイトに読み込まれるCSSファイルは3.92kB（GZIP圧縮済み）と超軽量
  • SCSSに対応している
  • uncssの利用推奨で、gulpにてビルド（CSSコンパイル）する
  • 利用できるコンポーネントセットは必要最小限で、すべてモバイル向けに最適化されている感じ
  • ライセンス形態： MITライセンス

最新バージョン: 2.0.0 （2015年3月3日時点）

Mueller ─ ミューラー

「Compass」ベースのグリッド生成モジュール。レスポンシブ、非レスポンシブを問わずグリッドレイアウトを強力に制御すると謳っている。グリッドレイアウト生成用のスタイリングしか定義されていないので、他のUIコンポーネントのスタイリングは別途必要になる。JavaScriptライブラリ「Masonry」と組み合わせて「Pinterest」のようなデザインを実現できる（らしい）。
その他の特徴としては、

  • Normalize.css は組み込み済み
  • 利用にはSASSでコンパイルするか、screen.cssを読み込む
  • 2013年4月からアップデートがないので、トレンドからやや古くなっている可能性あり
  • ライセンス形態： BSDライセンス

最新バージョン: 1.1 （2015年3月3日時点）

PowerToCSS ─ パワートゥCSS

WEBページのスタートアップには最適と謳う軽量CSSフレームワーク。jQuery等のJavaScriptに依存しない純粋なCSSのみのフレームワークで、専用のclass名記述も必要最小限度でフロントエンドをコーディングできる。それもあって、動的なコンポーネントセットは少ない。
その他の特徴は、

  • オリジンのCSSで21KB、ミニファイされたCSSファイルで14.8KBと軽量
  • powertocss.min.css の読み込みだけで動作可能
  • 追加できるグリッドサイズは1200px、960px、640px、320pxの4種類
  • レスポンシブレイアウトにも対応
  • LESS対応
  • CSSフレームワーク用のclass名定義がほとんど不要（HTMLのタグ名に対してスタイリングされている）
  • ライセンス形態： MITライセンス

最新バージョン: 1.1.0 （2015年3月3日時点）

Skeleton ─ スケルトン

モバイルファーストのCSSフレームワークで、小規模WEBサイトのベースCSS、およびスモールスタート時の初期CSSセットとして推奨している。導入が簡単で、フレームワーク専用のclass名汚染が最小限なので、後々に別のCSSフレームワークに乗り換えるなどの運用に適している。Web開発の初期のとりあえずのスタイリングやモック開発に適している。
その他の特徴は、

  • normalize.css は同梱されているので別途組み込む
  • 対応ブラウザは各モダンブラウザの最新版のみ（完全なプログレッシブ・エンハンスメント対応）
  • 拡張ディストリビューションとしてLESS対応版とSASS対応版がある
  • UIコンポーネントは必要最小限度のみの提供
  • ライセンス形態： MITライセンス

最新バージョン: 2.0.4 （2015年3月3日時点）

Toast ─ トースト

一風変わったグリッドレイアウト専用CSSフレームワーク。ユーザーの好きなカラム数、間隔でグリッドレイアウトを自由に生成できる。…というかそれしかできません。なので、他のUIコンポーネントのスタイリングは別途定義するなり、他のフレームワークに依存することになる。
特徴としては、

  • グリッド定義はSCSSに変数としてセットする（SASSコンパイル形式）
  • プリセットのデフォルトCSSもあるので、カスタマイズしなくてもそのまま使える
  • ライセンス形態： MITライセンス

最新バージョン: 1.0.0（2015年3月3日時点）

TukTuk ─ トゥクトゥク

緑と黒がキーカラーのフロントエンドフレームワーク。グリッドレイアウト（カラムレイアウト）の際のclass名汚染が大きいが、それ以外のUIではほぼclass名なしでスタイリングしてくれる。動的UIコンポーネントもいくつかパッケージングされていて、幅広いWebサイトデザインに対応できる。
その他の特徴としては、

  • プログレッシブエンハンスメント志向なのでモダンブラウザ用（IE6では使うなと謳っている）
  • コアファイルのサイズはGZIP圧縮時で9kB
  • オブジェクト指向型CSSを採用している（≒class名汚染の危険性が高い）
  • モーダル、アコーディオン等の動的UIコンポーネントや専用アイコンセットを有する
  • JavaScriptのソースはCoffeeScript形式、CSSのソースはstyl形式
  • ソースカスタマイズ後はgulpにてビルドする
  • ライセンス形態： GPLv3

最新バージョン: 1.0.0（2015年3月3日時点）

総評

色々試してみて、改めてBootstrapの偉大さに気づかされた次第。いやぁ、Bootstrapは良くできてるフレームワークだわ～。初心者から上級者まで安定して使えるうえに、拡張しやすいしねぇ…。
フラットレイアウトに特に違和感感じないなら、最終的にフロントエンドフレームワークはBootstrapを選んでおきなさい─と言いたくなる…が、それじゃぁこの記事書いた意味がないので、あえてBootstrapに代わるフレームワークを選ぼう！
まぁ、機能面と柔軟性でBootstrapと渡り合えるのは今のところ「AUI」しかないんだけどねぇ…。アトラシアン社のサービスって「Bitbucket」もそうだけど主流のサービスに対抗するような挑戦的なサービスが多いと思った。「AUI」もバリバリに本家Bootstrapを意識して対抗するような感じで作られている気がするんだけど…オレの気のせいか？

とにもかくにも、Bootstrapに代わるCSSフレームワークは「AUI」と（自分の中で）決定したので、うちのブログも「AUI」スタイルでリニューアルしてみようかなぁ…。時間があればだけど、ぜひ触ってみたいフレームワークではあるんだよねぇ。

脚注

参考サイト: http://designposts.net/10-best-bootstrap-alternative-web-developers/

  1. https://bitbucket.org/atlassian/aui-adg/wiki/versions/jq-version-matrix ↩