Cntlog > 開発 > フレームワーク > bootstrap並にイケてたCSSフレームワーク[Gumby]※サンプル有り

bootstrap並にイケてたCSSフレームワーク[Gumby]※サンプル有り

新年もあけましたので新しいCSSフレームワークを探していたら素敵なものと出会いました。

Gumby

sample
Gumbyで作られたサイト

作成したサンプル

CSSフレームワークって?

CSSフレームワークとは、htmlソースにフレームワークに沿った記述をするだけで、簡単にカッコイイWebサイトが作成できるツールです。
最近ではレスポンシブデザインが流行しているので、PC用スマホ用の画面をイメージさせるためにモックアップ用に使われたりもします。
0からでレスポンシブデザイン開発するのはスキルと労力が必要なのでモックアップといわず、そのまま開発に使われることもあります。
有名ところはBootstrapやFoundationですね。

触ってみた印象と特徴

Gumbyはレスポンシブでデスクトップ、タブレット、スマートフォンと幅広く対応しています。
触っていて気に入ったのが画像読み込みを端末毎に設定できるので、スマホ用に文字の大きい画像を設定できたりするのでレスポンシブ向きのデザインができるところですね。

SASSベースの設計ですのでみんな使いやすいですね。
私はLESS派なのでこれを機会にSASSにも挑戦してみます。

機能面に関してはよく使う機能は付いているので気になりませんでした。
不要な機能がある場合は自分で機能削除したものをDLできます。
customize

設計もカスタマイズを想定していてBootstrapほど束縛がキツイ印象はありません。
ただGumby独特と描き方をするので、慣れるまでは少し面倒ですね。
※コピペでいけるので、難しい書き方をするわけではないです。

機能

デザイン
グリッドレイアウト
Flexible Responsive Grid Gumby Framework
レスポンシブ対応
ボタンデザイン
User Interface UI Kit Gumby Framework
formパーツのデザイン
SassによるCSS構築
ナビゲーション(※スマホ用の切り替え有り
位置固定(途中から出現させたりできて優秀
アイコンセット※画像は一部のものを抜粋しています。
User Interface UI Kit0 Gumby Framework
JS関係
トグル・スウィッチ機能(すごい優秀!
ドロップダウン
タブ
ドロワー(アコーディオンみたいな感じ)
パララックス
遅延表示
モーダルウインドウ
ツールトピック

最後に

CSSフレームワークはどれもコンセプトや設計思想などが違っているので「最強!」みたいなのはありません。
CSMも同じですが長所と短所を見極めて選ぶべきだと思います。
とはいえ選択肢が多すぎると迷う事しかないのでなんでも触ればいいと言うものではありませんが、私にとって「Gumby」は触る価値のあるものでした。
今後はGumbyベースのWordPressテーマを作ってみて、もっと使っていく予定です。

作成したサンプル

おまけ

私が現在気に入っているCSSフレームワークです。

Bootstrap
HTML KickStart
Topcoat
Kube
Less Framework 4
LAYERS CSS

関連記事

学習コストが低くて使いやすいCSSフレームワーク(Skeleton)... 最近色々なサイトを作る機会に恵まれました。 普段はUikitといった大型のCSSフレームワークを使うのですが、ふとした機会にミニマムなCSSフレームワークに出会い、一目惚れしましたのでご紹介します。 Skeletonとは Skeletonはとても...
Flexbox童貞を卒業させるためのフレームワーク(Dlex)作りました。... Flexbox ベースのレスポンシブ CSS フレームワーク Dlex を作りしました。 もともと Flexboxは好きではなく、display:table派だったのですが、長いことFlexboxを放置していたのですが、 Disろうと思って学び直して見たらつい熱が入りフレームワーク化してしてま...
CSSフレームワークの使いドコロ CSSフレームワークは以前からありましたが、レスポンシブデザインが流行するのに比例して、こちらの注目度も高まってきています。 レスポンシブ対応を0から自作しようと思うと時間と労力もかかりますし、メンテナンスにも欠けてしまうあたりが流行出した理由でしょうか。 CSSフレームワークと...
Google謹製Material Design Liteを触ってみた所感... Googleがマテリアルデザインの考えを取り入れた公式フレームワーク「Material Design Lite」(以下、MDL)を公開しました。 少し触ってみましたので、基礎的な使い方と自分の備忘録も兼ねてまとめてみます。 Material Design Liteとは ...