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