ITエンジニア/デザイナ向けにオープンソースを毎日紹介

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

そこで使ってみたいのがSkeletonです。ごく基本的なレスポンシブ構造だけを提供するCSSフレームワークです。

Skeletonの使い方

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

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

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

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

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

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

画像も縦です。
画像も縦です。

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

タイポグラフィ。
タイポグラフィ。

ボタン。
ボタン。

フォーム。
フォーム。

リスト。
リスト。

コード。
コード。

テーブル。
テーブル。

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

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

Skeleton: Responsive CSS Boilerplate

Skeleton: Responsive CSS Boilerplate

dhg/Skeleton

 

MOONGIFTの関連記事

コメント

  • DevRel
  • Com2