CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。

GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。

まずデスクトップからです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.43.22.1382356901.png)
ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.43.32.1382356907.png)
タイポグラフィ。可読性高いです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.43.39.1382356915.png)
リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.43.55.1382356920.png)
ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.44.04.1382356929.png)
インジケーターやラベル、アラート。こういうのもよく使いますよね。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.44.16.1382356935.png)
フォーム。基本的にplaceholderを使った表示になっているようです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.44.20.1382356941.png)
テーブル。角丸サポートです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.44.25.1382356947.png)
タブ。幅が設定できます。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.44.33.1382356954.png)
縦のタブもあります。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.44.46.1382356962.png)
ドロワー。クリックするとコンテンツが表示されます。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.44.49.1382356967.png)
モーダルウィンドウ。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.45.04.1382356972.png)
クリックで指定された場所まで滑らかに移動するリンクです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.45.15.1382356978.png)
画像。サイズが細かく指定できます。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.45.19.1382356988.png)
四角い画像。ポラロイド風指定もあります。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.45.23.1382356997.png)
タイル表示。2〜5列で自在に指定可能。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.45.30.1382357005.png)
ツールチップ。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.45.40.1382357011.png)
動画埋め込み。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.45.47.1382357025.png)
アイコン。これはBootstrapと同じくらいあると見ていいでしょう。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.46.43.1382357031.png)
こちらはスマートフォンで見た場合。ヘッダーです。メニューは折り畳まれています。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.46.50.1382357036.png)
メニューアイコンをタップすると内容が表示されます。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.46.55.1382357041.png)
さらに階層を辿ることもできます。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.47.05.1382357045.png)
タイポグラフィ。可読性は変わっていません。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.47.24.1382357054.png)
ボタンも問題なさそうです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.47.29.1382357060.png)
インジケータ。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.47.34.1382357064.png)
フォーム。1列に並んだ形になります。モバイルの場合はこの方が良さそうですね。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.47.42.1382357070.png)
こういった凝った入力フォームもできます。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.47.51.1382357074.png)
テーブル。2列であれば問題ありません。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.49.39.1382357078.png)
カラム数が増えると飛び出してしまいました…。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.48.16.1382357083.png)
タブ。ページネーションにも使えそうですね。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.50.04.1382357087.png)
モーダルは画面いっぱいに広がります。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.50.36.1382357091.png)
画像。デスクトップのようなサイズ指定はないようです。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.50.52.1382357098.png)
タイル表示は問題ありません。

[](http://images.moongift.jp/2013/10/Screenshot 2013-10-21 19.52.23.1382357104.png)
動画埋め込み。

Gumbyが特徴として挙げているのはレスポンシブでデスクトップ、タブレット、スマートフォンと幅広くワンソースで対応していること、カスタマイズを想定してシンプルに作っているとのことです。非圧縮で178KBなのでシンプルとは思いがたいですが、カスタマイズ前提なのは良いことです。

スクラッチで開発して柔軟性で拡張性のあるレスポンシブデザインを作るというのはかなり大変でテクニックが必要です。そのため大枠をフレームワークで揃えて後はカスタマイズするというのはよくあるやり方でしょう。

そこでBootstrapを使うと、意外と束縛が多くてちょっと無理をしようとすると全体のバランスが崩れるというのもよく聞く話です。Gumbyはそういった問題点を解決してくれる存在になるかも知れませんね！

GumbyFramework/Gumby

Gumby - A Flexible, Responsive CSS Framework - Powered by Sass