Fuel UXはBootstrap用、JavaScript/CSS製のオープンソース・ソフトウェア(MIT License)です。

Bootstrapを使ってWebアプリケーションを開発していると、どうしても足りないコンポーネントが出てきます。ネットで探せば見つかるのですが、組み合わせている内にバランスが悪くなってしまいます。そこで使ってみたいのがFuel UXです。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.07.59_thumb.1371019323.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.07.59.1371019323.png)
様々なウィジェットが提供されています。まずチェックボックス。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.08.10_thumb.1371019325.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.08.10.1371019325.png)
コンボボックス。選択した情報が取得しやすいです。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.08.37_thumb.1371019328.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.08.37.1371019328.png)
データグリッド。検索でのフィルタリング、ページネーションもサポート。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.08.51_thumb.1371019331.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.08.51.1371019331.png)
検索すると右側に×ボタンが出ます。分かりやすいですね。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.09.03_thumb.1371019335.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.09.03.1371019335.png)
タグ。×ボタンも出ていて消すのも簡単です。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.09.26_thumb.1371019337.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.09.26.1371019337.png)
検索ボックス。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.09.38_thumb.1371019340.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.09.38.1371019340.png)
スピナー。上下のボタンを使って値をインクリメントできます。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.09.47_thumb.1371019342.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.09.47.1371019342.png)
ツリー。エクスプローラライクな表示が実現できます。

[![](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.09.57_thumb.1371019345.png)](http://images.moongift.jp/2013/06/Screenshot 2013-06-11 10.09.57.1371019345.png)
ウィザード。パン屑リストに似ていますが、こちらもよく使いますね。

Fuel UXではBootstrapを拡張するウィジェットを多数提供しています。欲しかった!と思うような機能が多く、それがまとめて提供されている事もあってデザインの統一性があるのが利点と言えるでしょう。

MOONGIFTはこう見る

Bootstrapは便利なフレームワークですが、開発が速く互換性が切り捨てられる傾向にあるためにせっかく作られたウィジェットが最新版では動かなかったりするのが難点です。そんな時にも単体のライブラリではサポートされずに放置される傾向がありますが、Fuel UXくらいであれば継続的にメンテナンスされる雰囲気があります(保証はありませんが)。

デザイン上の統一性はとても大事で、それによってBootstrapが指示されているのですが、サードパーティーのライブラリを組み込んでいくとどうしてもちぐはぐ感が出てしまいます。Fuel UXが一定の基準を設けてくれることは開発者にとって大きなメリットと言えそうです。

Fuel UX

ExactTarget/fuelux · GitHub