CSS3フレームワークは数多くなってきたのでその特徴をちゃんと掴んでおかないといけないですね。
GumbyはSassを使ったCSS3フレームワークです。他のフレームワークと同じようにレスポンシブ、モバイルフレンドリーになっています。その特徴を見ていきましょう。
まずデスクトップからです。
ヘッダーバー。フラットだったり、幅が固定だったりと色々な形式が想定されています。
リストだけでも黒丸、白丸、ドット、数字など多数用意されています。さらに定義リストまで!
ボタン。サイズ、色、形が様々です。片方だけ丸い、なんて便利そうですね。
インジケーターやラベル、アラート。こういうのもよく使いますよね。
フォーム。基本的にplaceholderを使った表示になっているようです。
アイコン。これはBootstrapと同じくらいあると見ていいでしょう。
こちらはスマートフォンで見た場合。ヘッダーです。メニューは折り畳まれています。
フォーム。1列に並んだ形になります。モバイルの場合はこの方が良さそうですね。
Gumbyが特徴として挙げているのはレスポンシブでデスクトップ、タブレット、スマートフォンと幅広くワンソースで対応していること、カスタマイズを想定してシンプルに作っているとのことです。非圧縮で178KBなのでシンプルとは思いがたいですが、カスタマイズ前提なのは良いことです。
スクラッチで開発して柔軟性で拡張性のあるレスポンシブデザインを作るというのはかなり大変でテクニックが必要です。そのため大枠をフレームワークで揃えて後はカスタマイズするというのはよくあるやり方でしょう。
そこでBootstrapを使うと、意外と束縛が多くてちょっと無理をしようとすると全体のバランスが崩れるというのもよく聞く話です。Gumbyはそういった問題点を解決してくれる存在になるかも知れませんね!
Gumby - A Flexible, Responsive CSS Framework - Powered by Sass
MOONGIFTの関連記事