[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
Post on:2012年9月20日
プロフェッショナルデベロッパ向けに、サイト作成のベースとして利用できるレスポンシブデザイン用の超軽量(min:16KB)のフレームワークを紹介します。

Kube Frameworkのデモ
デモでは実際のページのように画像やテキストを配置したデモページ、シンプルなテンプレートページがあります。

デモページ:幅1200pxで表示
グリッドいっぱいの打ち出し画像の下に3カラムのパネルが配置されており、キャプチャ画面の下には2カラムのレイアウトが続きます。

デモページ:幅768pxで表示
サイズを小さくすると、ロゴとナビゲーションが積み重なり、打ち出し画像は比率を維持したまま小さくなり、下のコンテンツはグリッドいっぱいに積み重なります。

テンプレートページ:幅1200pxで表示
上からロゴ・ナビゲーション、2カラム、3カラム、フッタとなっています。

テンプレートページ:幅768pxで表示
サイズを小さくすると、ナビゲーションは水平型のリストになり、下のコンテンツはグリッドいっぱいに積み重なります。
Kube Frameworkのタイポグラフィ
見出し・パラグラフをはじめ、テキストに使用するインライン要素、引用、リスト、画像のキャプションなど。

見出しとパラグラフ

サブヘッダ、アドレス、水平線、さまざまなインラインエレメント

引用、リスト

画像とキャプション
Kube Frameworkのグリッド
グリッドのパターンも豊富です。
2カラム、3カラムをはじめ、ネスト、インナー、プッシュ、センター、スプリットなど、あらゆるグリッドが網羅されています。

2カラム、3カラム、ネスト

グリッドの中に内包するインナー

カラムを押し出すプッシュ、内包を中央に配置するセンター

等分にするスプリット

リスト要素を使ったスプリット
Kube Frameworkのフォーム
ベーシックなものから、枠線付き、ライナータイプのフォームが用意されています。

ベーシックなフォーム、枠線付きのフォーム

ライナータイプのフォーム

きっちりとレイアウトされたフォーム
Kube Frameworkのテーブル
テーブルもベーシックなものから、セルをストライプにしたり、ホバーでハイライトにするものなどがあります。

ベーシックなテーブル、セルがストライプなテーブル

ボーダーにアレンジを加えたテーブル

ホバーでセルがハイライトするテーブル
Kube Frameworkのよく使う小物
ウェブページでよく使う便利なスタイルです。

リード、リンク

エレメントのサイズ変更、マージン調整など

ライン、カラー

画像とキャプションの回り込み
Kube Frameworkのボタン
ボタンもさまざまなスタイルのものが揃っています。

ボタンのベーシックなサンプル

グループ化したボタン

検索用のボタン
Kube Frameworkのダウンロード
ダウンロードはページの「Download」ボタンからダウンロードできます。
LESSバージョンも用意されています。
利用にあたっては個人でも商用でも絶対的に無料、とのことです。
使い方は、スタイルシートを外部ファイルとして記述するだけです。
<link rel="stylesheet" type="text/css" href="css/kube.css" />
Kube Frameworkの対応ブラウザ
全てのモダンブラウザの最新版、IE8+、モバイル用のブラウザ。
sponsors