レスポンシブなWebサイトを作ろうと思った時、一からすべてを設計するのはとても大変です。とはいえ既存のフレームワークはUIウィジェットを含んでいたりして余計なしがらみが発生してしまう可能性もあります。 そこで使ってみたいのがSkeletonです。ごく基本的なレスポンシブ構造だけを提供するCSSフレームワークです。

Skeletonの使い方

こちらがデモページのトップです。

デザインのデモ。スマートフォンアプリのランディング風。

3つのグリッドを分けて表示。

画像のレスポンシブにも対応しています。

幅を狭めるとこうなります。

先ほどの3段カラムは縦に並びます。

画像も縦です。

グリッドはよくある12カラムで構成されています。

タイポグラフィ。

ボタン。

フォーム。

リスト。

コード。

テーブル。

Skeletonはごく基本的な機能、部品だけを提供します。このまま本サイトに適用するということはないでしょう。Skeletonをベースにスタイル設定を追加していくことになるはずです。Bootstrapでもグリッドだけを使うという方が少なくないので、Skeletonも同じように使えそうです。

SkeletonはHTML5/CSS3製、MIT Licenseのオープンソース・ソフトウェアです。

Skeleton: Responsive CSS Boilerplate Skeleton: Responsive CSS Boilerplate dhg/Skeleton