[CSS]用途に合わせて必要な機能を拡張できるCSSのフレームワーク -Cabin
Post on:2011年9月28日
sponsors
Media Queries、グリッド、フォームなど、用途に合わせて必要な機能を拡張できるCSSのフレームワークを紹介します。
[ad#ad-2]
Cabin CSS Frameworkのデモ
まずは、Cabinのベースとなる「core」からご紹介。
デモ：core
見出し・パラグラフ・リスト・ナビゲーションが揃ったCabinのコアとなるデモ。
以下は用途に合わせて利用できる拡張機能です。
デモ：12カラムグリッド
12カラムを使ったグリッドのデモ。
デモ：12カラムグリッド（可変）
可変タイプの12カラムを使ったグリッドのデモ
デモ：16カラムグリッド
16カラムを使ったグリッドのデモ
デモ：16カラムグリッド（可変）
可変タイプの16カラムを使ったグリッドのデモ
デモ：フォーム
フォームのデモ
デモ：ソーシャルメディア
約50種類のソーシャルメディア用のメッセージボックスのデモ
デモ：テーブル
ベーシックなデザインのテーブルのデモ
Media Queriesはデモがなく、下記ページより利用できます。
[ad#ad-2]
Cabin CSS Frameworkの使用方法
Cabinは一つのコアファイルと複数の拡張ファイルが構成されています。
拡張ファイルは必要なもののみ使用します。
<head>
<!-- Cabin コアファイル -->
<link rel="stylesheet" href="css/cabin.css" />
<!-- Cabin 拡張ファイル -->
<link rel="stylesheet" href="css/extension-name.cabin.css" />
</head>
Cabin CSS FrameworkのIE6のサポート
IE6とそのユーザーを甘やかすのをやめるため、サポートしないことを決断した、とのことです。
sponsors
