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

CSSのフレームワークは既に多数登場している。レイアウトを簡単に決められるものや、ブラウザ互換性が高いレイアウトを簡単に構築できるとあって利用されるケースも増えている。だが、CSSは一度作成された後のリファクタリングがしづらく、肥大化しやすい傾向にある。


ピクチャ 13.png

yahoo、gCalといったクラスがある

 

有名なCSSフレームワークであるYUI Grids Builderについてもそれは変わらず、シェイプアップする余地はあるようだ。

今回紹介するフリーウェアはObject Oriented CSS、YUI Grids Builderと互換性のあるCSSフレームワークだ。CSSなのでソースコードは公開されているがライセンスは明記されていなかったのでご注意いただきたい。

Object Oriented CSSは軽量なCSSフレームワークで、YUI Grids Builderと互換性の高い作りになっている。さらにサイズは4KBとなっており、YUIの約半分とのことだ。入れ子になった複雑なHTMLレイアウトをCSSで簡単に実現できる。


ピクチャ 14.png

複雑なグリッドの例

 

利用するクラス名はあまり多くなく、ヘッダー、フッター、メイン、レフトカラム、ライトカラムなどだ。そしてyahooというクラスを使うと幅が240pxになったり、gCalと指定すると180pxとなったりする。

複雑なグリッド構成も可能で、1/3ずつ分けたり、4/5と1/5に分けることもできる。両サイドにメニュー幅をもうけつつ、中のコンテンツを等分や三等分に分けるなんてこともできてしまう。

Webサイトのデザインはそれぞれに異なるので、簡単に適用できないケースもあるだろう。だがCSSフレームワークを使っておけば様々なブラウザにおいてもデザインの問題が発生しづらくなる。ぜひデザインの前に触れてみて欲しい。

 

Stubbornella

 http://www.stubbornella.org/content/

Home - oocss - GitHub

 http://wiki.github.com/stubbornella/oocss

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2