新年もあけましたので新しいCSSフレームワークを探していたら素敵なものと出会いました。
Gumby
CSSフレームワークって？
CSSフレームワークとは、htmlソースにフレームワークに沿った記述をするだけで、簡単にカッコイイWebサイトが作成できるツールです。
最近ではレスポンシブデザインが流行しているので、PC用スマホ用の画面をイメージさせるためにモックアップ用に使われたりもします。
0からでレスポンシブデザイン開発するのはスキルと労力が必要なのでモックアップといわず、そのまま開発に使われることもあります。
有名ところはBootstrapやFoundationですね。
触ってみた印象と特徴
Gumbyはレスポンシブでデスクトップ、タブレット、スマートフォンと幅広く対応しています。
触っていて気に入ったのが画像読み込みを端末毎に設定できるので、スマホ用に文字の大きい画像を設定できたりするのでレスポンシブ向きのデザインができるところですね。
SASSベースの設計ですのでみんな使いやすいですね。
私はLESS派なのでこれを機会にSASSにも挑戦してみます。
機能面に関してはよく使う機能は付いているので気になりませんでした。
不要な機能がある場合は自分で機能削除したものをDLできます。
customize
設計もカスタマイズを想定していてBootstrapほど束縛がキツイ印象はありません。
ただGumby独特と描き方をするので、慣れるまでは少し面倒ですね。
※コピペでいけるので、難しい書き方をするわけではないです。
機能
- デザイン
- グリッドレイアウト
- レスポンシブ対応
- ボタンデザイン
- formパーツのデザイン
- SassによるCSS構築
- ナビゲーション（※スマホ用の切り替え有り）
- 位置固定（途中から出現させたりできて優秀）
- アイコンセット※画像は一部のものを抜粋しています。
- JS関係
- トグル・スウィッチ機能（すごい優秀！）
- ドロップダウン
- タブ
- ドロワー(アコーディオンみたいな感じ)
- パララックス
- 遅延表示
- モーダルウインドウ
- ツールトピック
最後に
CSSフレームワークはどれもコンセプトや設計思想などが違っているので「最強！」みたいなのはありません。
CSMも同じですが長所と短所を見極めて選ぶべきだと思います。
とはいえ選択肢が多すぎると迷う事しかないのでなんでも触ればいいと言うものではありませんが、私にとって「Gumby」は触る価値のあるものでした。
今後はGumbyベースのWordPressテーマを作ってみて、もっと使っていく予定です。
おまけ
私が現在気に入っているCSSフレームワークです。
Bootstrap
HTML KickStart
Topcoat
Kube
Less Framework 4
LAYERS CSS