on:2013年6月6日sponsorsオブジェクト指向CSS(OOCSS)のコンセプトは普段使ってるCSSのパフォーマンスとメンテナンス性を向上させること。そんなOOCSSをベースに設計された、モバイルファーストの拡張性も備えた超軽量フレームワークを紹介します。-GitHubオブジェクト指向CSS(OOCSS)とはKrakenの特徴Krakenのデモオブジェクト指向CSS(OOCSS)とはKrakenはオブジェクト指向CSS(OOCSS)ベースで開発されています。Krakenで採用しているものを例に、簡単に説明します。Way大きいブルーのボタンのスタイルを定義する際、一つのclassやidなどで定義することもできますが、OOCSSでは「ボタン=btn」「大きいボタン=btn-large」「ブルーのボタン=btn-blue」とします。これは煩雑なように見えますが、classを組み合わせて使うことでき、HTMLを見ただけでその構造とスタイルを把握することができます。CSS自体もシンプルになり、ページのパフォーマンスとメンテナンス性も向上します。OOCSSについての詳しい情報は下記をご覧ください。Resetクロスブラウザ互換用レスポンシブ対応のグリッドモバイルファーストの6カラムのグリッドタイポグラフィ可変対応のデザインされたタイポグラフィボタンCSS3を使った美しいスタイルのボタンフォームベーシックなスタイルのシンプルなフォームアドオンオプションのアドオンで機能追加が可能サポートブラウザKrakenのサポートするブラウザは、IE8+と全てのモダンブラウザです。Queriesを認識しないためです。※KrakenのテンプレートではIE6-8も視野にいれた実装です。Krakenのデモデモでは、Krakenのレイアウト・グリッドをはじめ、エレメントなどをチェックできます。Gridモバイルファーストの6カラムベースのグリッドです。Gridグリッドはバリエーションも実用的で、オフセットやネスト、画像ギャラリーも簡単に実装できます。Typographyパラグラフ用のテキスト、リンクテキスト、アクセント用、小さいサイズ用などが揃っています。Listリストはシンプルに数字、記号、無しの3種類。Headign見出しはセマンティックに、h4レベルの見出しをh1のスタイルで実装する方法などもあります。Buttonボタンは通常のボタンタイプとブロックタイプの2種類。Formsフォームの各エレメントはミニマルなスタイルです。Formsフォームの各エレメントを組み合わせて、レイアウトした例。Details寄せ・フロートの例、ここらへんは特にOOCSSならではのスタイルです。Detailsスペーシングのさまざまなスタイル。TemplateIE6-8も想定したテンプレートも用意されています。