モバイルファーストがコンセプトのデザインフレームワーク「Cardinal」
CardinalはCSS3製のオープンソース・ソフトウェア（MIT License）です。
Webデザインフレームワークが多数登場しています。それぞれに特徴がありますが、今回紹介するCardinalはWebアプリケーション開発に使えそうなフレームワークになります。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.16.36.1374667367.png)
説明ページがそのままデモになっています。左側にメニュー、右側にコンテンツが表示される形になっています。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.16.58.1374667376.png)
まずはグリッド。区切りの幅も指定できるようになっており、細かな制御が出来ます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.17.14.1374667383.png)
もちろんレスポンシブです。この場合でもグリッドは保たれたまま。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.17.21.1374667389.png)
レスポンシブなグリッドもあります。こちらはウィンドウ幅によってグリッドの表示が変わります。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.17.43.1374667395.png)
ボタン系。四角と角丸があります。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.17.49.1374667401.png)
さらに丸みを帯びたタイプも用意されています。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.18.01.1374667407.png)
ボタンもスマートフォンサイズに縮めた場合もきれいに表示されます。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.18.15.1374667412.png)
テーブル。多様な表現が用意されています。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.18.28.1374667461.png)
スマートフォンサイズになってもきれいに表示されています。
[](http://images.moongift.jp/2013/07/Screenshot 2013-07-22 11.18.57.1374667477.png)
メニューはフローティングではなく左からスライドしてくる形になっています。
Cardinalのコンセプトはモバイルファーストです。単に出来上がったデザインを並べるだけでなく、どういったクラス名指定でどうやって使うのかといった説明も細かく書いてあるので自分たちのプロジェクトでの適用もしやすいのではないでしょうか。
MOONGIFTはこう見る
Bootsrapやそのフォークをはじめとしてデザインフレームワークの裾野が広がっています。通常、この手のデザインではレスポンシブWebデザインが標準サポートされています。デザインの学習を行う上でも役立つでしょう。
また、グリッドの幅などがパーセント表示で細かく指定されている点もなぜその数値になっているのかを知ると、こういったフレームワークを使わない場合のデザインも適用できるはずです。より先進的なデザインフレームワークからは学べる点が多いでしょう。