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