CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。
GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。
まずデスクトップからです。
ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。
タイポグラフィ。可読性高いです。
リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで！
ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。
インジケーターやラベル、アラート。こういうのもよく使いますよね。
フォーム。基本的にplaceholderを使った表示になっているようです。
テーブル。角丸サポートです。
タブ。幅が設定できます。
縦のタブもあります。
ドロワー。クリックするとコンテンツが表示されます。
モーダルウィンドウ。
クリックで指定された場所まで滑らかに移動するリンクです。
画像。サイズが細かく指定できます。
四角い画像。ポラロイド風指定もあります。
タイル表示。2〜5列で自在に指定可能。
ツールチップ。
動画埋め込み。
アイコン。これはBootstrapと同じくらいあると見ていいでしょう。
こちらはスマートフォンで見た場合。ヘッダーです。メニューは折り畳まれています。
メニューアイコンをタップすると内容が表示されます。
さらに階層を辿ることもできます。
タイポグラフィ。可読性は変わっていません。
ボタンも問題なさそうです。
インジケータ。
フォーム。1列に並んだ形になります。モバイルの場合はこの方が良さそうですね。
こういった凝った入力フォームもできます。
テーブル。2列であれば問題ありません。
カラム数が増えると飛び出してしまいました…。
タブ。ページネーションにも使えそうですね。
モーダルは画面いっぱいに広がります。
画像。デスクトップのようなサイズ指定はないようです。
タイル表示は問題ありません。
動画埋め込み。
Gumbyが特徴として挙げているのはレスポンシブでデスクトップ、タブレット、スマートフォンと幅広くワンソースで対応していること、カスタマイズを想定してシンプルに作っているとのことです。非圧縮で178KBなのでシンプルとは思いがたいですが、カスタマイズ前提なのは良いことです。
スクラッチで開発して柔軟性で拡張性のあるレスポンシブデザインを作るというのはかなり大変でテクニックが必要です。そのため大枠をフレームワークで揃えて後はカスタマイズするというのはよくあるやり方でしょう。
そこでBootstrapを使うと、意外と束縛が多くてちょっと無理をしようとすると全体のバランスが崩れるというのもよく聞く話です。Gumbyはそういった問題点を解決してくれる存在になるかも知れませんね！
Gumby - A Flexible, Responsive CSS Framework - Powered by Sass
MOONGIFTの関連記事
