これだけ色々出てくるとどれを使おうか迷ってしまいますね！ UIkitはHTML5向けのフロントエンドフレームワークです。いわゆるBootstrapやFoundationと同じようにWebインタフェースを手軽に作れるようにしてくれるフレームワークです。Bootstrap臭を嫌う方はチェックしてみてはいかがでしょう。

UIkitのスクリーンショット

今回はとにかくスクリーンショット満載です。隅々まで見て、自分のニーズにマッチしているか確認してください。まずは様々な部品を組み合わせたレイアウト例から。

トップページ風デザイン。

画像とテキストの配置。この隙間の空き方がいい感じじゃないかと。

ポートフォリオ風。

マウスオーバーで拡大するための虫眼鏡表示。

モーダルもあります。

ブログ風。

ドキュメント表示。

コンタクトやチームメンバーの表示。このレイアウトいいですね！

フォーム付き。もちろんメンバーにはマウスオーバーも。

ログインウィンドウ風。

さて、ここからは各部品ごとに見ていきます。

リストナビゲーション。

ヘッダーバー的なナビゲーション。

サブナビゲーション。

パン屑。

ページネーション。

タブ。

垂直にも並べられます。

リスト。

定義リストにも対応。

テーブル。レスポンシブです。

様々な種類が用意されています。

フォーム。

横に並べるフォームも可能です。

フォーム＋アイコンなんて表示も。

ボタン。

3つ並べたボタンとか良いですね。

ボタン＋ドロップダウン。

アイコン。

Font Awesome対応です。

閉じるボタン。なかなかマニアックです。

こんな感じに使います。

バッジ。

アラート。

サムネイル表示。

サムネイルの大きさも変更できます。

オーバーレイ。

コンテンツの上にオーバーレイもできます。

テキストオーバーレイ対応。

プログレスバー。

色を変えたりアニメーションもできます。

シンプルなテキスト。でも色々な種類があります。

テキストの配置も変更できます。

縦方向の配置も変更できます。これは良いかも！

アニメーション。標準で用意されています。

ドロップダウン。

ドロップダウンを上に出す事もできます。

3列のドロップダウン。Amazonっぽいですね。

ドロップダウンをタブに配置する事もできます。

左からせり出すメニュー。

右からもできます。

トグル。JavaScriptを意識せず実装できます。

ツールチップ。

スクロールを感知して表示きりかえ。

スクロールをスムーズにするライブラリもあります。

UIkitはボタンが角丸でちょっとBootstrap調ですが、グラデーションがあまりないのでフラットに見えます。デザインとしてはシンプルなのでiOS 7やAndroidで見てもすっきりしているのではないでしょうか。これを見ているだけでも創造性が刺激されますね！

特徴としてはLESSで作られていること、コンポーネント指向であること（実際、各パーツはまとめて使う事も一部だけ取り出す事もできます）、カスタマイズ性の高さ、レスポンシブ対応というのが挙げられています。

UIkitはスタイルシート、JavaScript製のオープンソース・ソフトウェア（MIT License）です。

UIkit uikit/uikit