YUI Grids BuilderのCSSをシェイプアップした「Object Oriented CSS」
CSSのフレームワークは既に多数登場している。レイアウトを簡単に決められるものや、ブラウザ互換性が高いレイアウトを簡単に構築できるとあって利用されるケースも増えている。だが、CSSは一度作成された後のリファクタリングがしづらく、肥大化しやすい傾向にある。
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で簡単に実現できる。
複雑なグリッドの例
利用するクラス名はあまり多くなく、ヘッダー、フッター、メイン、レフトカラム、ライトカラムなどだ。そしてyahooというクラスを使うと幅が240pxになったり、gCalと指定すると180pxとなったりする。
複雑なグリッド構成も可能で、1/3ずつ分けたり、4/5と1/5に分けることもできる。両サイドにメニュー幅をもうけつつ、中のコンテンツを等分や三等分に分けるなんてこともできてしまう。
Webサイトのデザインはそれぞれに異なるので、簡単に適用できないケースもあるだろう。だがCSSフレームワークを使っておけば様々なブラウザにおいてもデザインの問題が発生しづらくなる。ぜひデザインの前に触れてみて欲しい。
Stubbornella
http://www.stubbornella.org/content/
**Home - oocss - GitHub