モバイルファーストを推進するHTML5デザインフレームワーク「Kraken」
KrakenはHTML5/CSS/JavaScript製のソフトウェア（ライセンスはWTFPL）です。
多数のHTML5テンプレートが登場しています。あまりに多くて選択に困ってしまうくらいです。そこでモバイルファーストを選択した際に候補に挙げたいテンプレートとしてKrakenを紹介します。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-22 11.55.10.1369195834.png)
こちらはグリッドのデザイン。基本は6で、それぞれ分割して配置できます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-22 11.55.17.1369195837.png)
オフセットを指定することでスペースを設けられます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-22 11.55.22.1369195841.png)
イメージギャラリー。サムネイル画像を並べられます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-22 11.55.29.1369195846.png)
ネストしたブロックも作成できます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-22 11.55.36.1369195849.png)
基本的なタイポグラフィ。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-22 11.55.43.1369195852.png)
リストです。もちろんレスポンシブです。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-22 11.56.04.1369195856.png)
ボタン。文字サイズや幅を変更できます。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-22 11.56.15.1369195859.png)
フォームです。
[](http://images.moongift.jp/2013/05/Screenshot 2013-05-22 11.56.26.1369195862.png)
コードの記述です。
主な特徴としてはクロスブラウザ対応のためのCSSリセット、レスポンシブグリッド、アドオン対応があります。アドオンは既にアイコンフォント、メニュー、スライダー、モーダル、タブ、CSSによるアニメーションなど様々なライブラリが動作します。
MOONGIFTはこう見る
レスポンシブWebデザインはデスクトップからスマートフォンまで幅広いデバイスに対してワンソースで対応できるのが魅力ですが、それゆえに自由度が下がってしまうのが欠点です。しかもデスクトップでは相当なブラウザが切り捨てられる可能性があります。
個人的にはむしろHTML4とHTML5で切り分けられるのではないかと思っています。HTML5対応のブラウザ向けには新機能を詰め込んで提供できるでしょう。CSS3によるアニメーション、File APIやWeb Workersなどを使えばよりリッチなWeb体験が提供できるようになるはずです。