普段使ってるCSSのパフォーマンスとメンテナンス性をアップさせるOOCSSベースの超軽量フレームワーク -Kraken

オブジェクト指向CSS(OOCSS)のコンセプトは普段使ってるCSSのパフォーマンスとメンテナンス性を向上させること。
そんなOOCSSをベースに設計された、モバイルファーストの拡張性も備えた超軽量フレームワークを紹介します。

サイトのキャプチャ

Kraken
Kraken -GitHub

オブジェクト指向CSS(OOCSS)とは

Krakenはオブジェクト指向CSS(OOCSS)ベースで開発されています。

Krakenで採用しているものを例に、簡単に説明します。

サイトのキャプチャ

The Kraken Way

大きいブルーのボタンのスタイルを定義する際、一つの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のレイアウト・グリッドをはじめ、エレメントなどをチェックできます。

サイトのキャプチャ

Grid

モバイルファーストの6カラムベースのグリッドです。

サイトのキャプチャ

Grid

グリッドはバリエーションも実用的で、オフセットやネスト、画像ギャラリーも簡単に実装できます。

サイトのキャプチャ

Typography

パラグラフ用のテキスト、リンクテキスト、アクセント用、小さいサイズ用などが揃っています。

サイトのキャプチャ

List

リストはシンプルに数字、記号、無しの3種類。

サイトのキャプチャ

Headign

見出しはセマンティックに、h4レベルの見出しをh1のスタイルで実装する方法などもあります。

サイトのキャプチャ

Button

ボタンは通常のボタンタイプとブロックタイプの2種類。

サイトのキャプチャ

Forms

フォームの各エレメントはミニマルなスタイルです。

サイトのキャプチャ

Forms

フォームの各エレメントを組み合わせて、レイアウトした例。

サイトのキャプチャ

Details

寄せ・フロートの例、ここらへんは特にOOCSSならではのスタイルです。

サイトのキャプチャ

Details

スペーシングのさまざまなスタイル。

サイトのキャプチャ

Template

IE6-8も想定したテンプレートも用意されています。

top of page

©2017 coliss