いつか、きっと、何かしらの機会で利用したくなるはずなので、流行りのWindows8風UIを実現させるための、CSSフレームワークを簡単にまとめてみる。

 

BootMetro (http://aozora.github.com/bootmetro/)

Windows8風Webサイトを作るためのCSSフレームワーク。
これでほとんどの表現ができそうなくらい充実。

タイル表示はもちろん、

ボタンスタイルもあり、

さらにアイコンはSVGフォントにもなってる。

 

Metro UI CSS (http://metroui.org.ua/)

こちらもWindows8風WebサイトのためのCSSフレームワーク。
BootMetroよりもさらに細かに体系化されており、勉強がてら眺めるのもあり。

例えば色分け指定も一覧にされていたり、

レイアウトやタイプもあり、

フォーム用パーツもこのとおり。

 

CSS3 Microsoft Modern Buttons (http://ace-subido.github.com/css3-microsoft-metro-buttons/)

こちらはTwitterが開発しているBootstrapをベースにした、ボタンとフォームに特化したフレームワーク。

なのでTwitter用アイコンとの組み合わせボタンや、

TwitterBootstrap用フォームパーツと融合したデザインに。

 

Dashing (http://shopify.github.com/dashing/)

こちらはMetro風ダッシュボードをWeb上に再現するフレームワーク。

来年終了予定のiGoogleっぽく、タイルを好きな場所にドラッグドロップできる。

 

Modern UI Icons (http://modernuiicons.com/)

Metro風アイコン一式。

この一覧に欲しいアイコンがない場合は、自分で作成できるチュートリアルもあり。
Templarian — Design, Develop, and Deploy (http://templarian.com/2011/08/06/tutorial_creating_an_icon/) 

かなり親切に解説されてるので、これはこれで勉強になる。

 

とりあえずこんなところか。また新しいのがあれば追加していこう。