ITエンジニア/デザイナ向けにオープンソースを毎日紹介

CardinalはCSS3製のオープンソース・ソフトウェア(MIT License)です。

Webデザインフレームワークが多数登場しています。それぞれに特徴がありますが、今回紹介するCardinalはWebアプリケーション開発に使えそうなフレームワークになります。


説明ページがそのままデモになっています。左側にメニュー、右側にコンテンツが表示される形になっています。


まずはグリッド。区切りの幅も指定できるようになっており、細かな制御が出来ます。


もちろんレスポンシブです。この場合でもグリッドは保たれたまま。


レスポンシブなグリッドもあります。こちらはウィンドウ幅によってグリッドの表示が変わります。


ボタン系。四角と角丸があります。


さらに丸みを帯びたタイプも用意されています。


ボタンもスマートフォンサイズに縮めた場合もきれいに表示されます。


テーブル。多様な表現が用意されています。


スマートフォンサイズになってもきれいに表示されています。


メニューはフローティングではなく左からスライドしてくる形になっています。

Cardinalのコンセプトはモバイルファーストです。単に出来上がったデザインを並べるだけでなく、どういったクラス名指定でどうやって使うのかといった説明も細かく書いてあるので自分たちのプロジェクトでの適用もしやすいのではないでしょうか。


MOONGIFTはこう見る

Bootsrapやそのフォークをはじめとしてデザインフレームワークの裾野が広がっています。通常、この手のデザインではレスポンシブWebデザインが標準サポートされています。デザインの学習を行う上でも役立つでしょう。

また、グリッドの幅などがパーセント表示で細かく指定されている点もなぜその数値になっているのかを知ると、こういったフレームワークを使わない場合のデザインも適用できるはずです。より先進的なデザインフレームワークからは学べる点が多いでしょう。

Cardinal — Build more with less.

cbracco/cardinal

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2