[CSS]用途に合わせて必要な機能を拡張できるCSSのフレームワーク -Cabin

Media Queries、グリッド、フォームなど、用途に合わせて必要な機能を拡張できるCSSのフレームワークを紹介します。

サイトのキャプチャ

Cabin CSS Framework

[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

top of page

©2018 coliss