[CSS]高性能すぎてビックリしました、レスポンシブデザイン用の超軽量フレームワーク -Kube Framework

プロフェッショナルデベロッパ向けに、サイト作成のベースとして利用できるレスポンシブデザイン用の超軽量(min:16KB)のフレームワークを紹介します。

サイトのキャプチャ

Kube Framework

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+、モバイル用のブラウザ。

top of page

©2017 coliss