[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework
Post on:2012年9月20日
sponsors
プロフェッショナルデベロッパ向けに、サイト作成のベースとして利用できるレスポンシブデザイン用の超軽量（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
