Twitter Bootstrapという素晴らしいCSSフレームワークをよく使っているのですが、やはりこれだけ有名になってくると、「どこかで見たな・・・」感が否めなくなってきますね。
そこで、別のフレームワークも試してみようと、今回はMetro UI CSSを使ってみます。
仕事での案件なので、画面はお見せできませんが、いくつか思うところがあるので書いていきたいと思います。
リキッドレイアウトに対応していない！
このマルチデバイス時代に、リキッドレイアウトに対応していないというのは、ちょっとナンセンスですね。
レスポンシブにはなっているので、一応問題なさそうですが、大きめのPC画面で見たときに左右に不自然な余白ができます。
このへんは、一般サイトがあまりリキッドレイアウト対応でないのでまぁいいでしょう。
リスト要素など、必要ないものにhover疑似クラスが指定されている！
普通に
<ul class="listview"> <li>...</li> </ul>
とすると、リストが設定されますが、a要素を指定していないにも関わらず、マウスカーソルがポインターになり、枠までつきます。
これ、PCスキルが低い人に見せると、クリックできると思いますよ。絶対。
当然、イベントなんかを関連づけない限り何も動作しませんしね・・・
ついでに、listviewクラスをつけると、何故か横幅が固定されます。右がいやに空白あく・・・orz
button要素またはbuttonクラスを付けたボタンのhover疑似クラスが設定されていない！
ここまでくると、嫌がらせかとしか思えませんが、クリックできるアンカー部分にhoverが設定されていません。
なのに、クリックできないリスト要素にはhoverが設定されている。
誰に対する嫌がらせですか！？
結局、リキッドレイアウト対応になるようにや、リストでhoverしないようにいくつかCSSを上書きして作っていってます。
標準でカレンダー機能を持ってくれているのが、今回導入を決めた大きな理由のひとつです。
jQuery UIのカレンダー機能なんかを追加すると、デザインを決めるのが面倒だったりするので、その点デザインが合ってる同梱機能を使うと、手間がなくていいです。
デメリットばかり書きましたが、Twitter Bootstrapに比べると完成度は落ちますが、そこそこ使えると思います。
まぁ、ちょっと触っていきますね。