![bootstrap並にイケてたCSSフレームワーク[Gumby]※サンプル有り](https://api-blog.cntlog.net/uploads/Gumby-A-Flexible-Responsive-CSS-Framework-Powered-by-Sass.png)
Gumbyで作られたサイト
CSSフレームワークって？
CSSフレームワークとは、htmlソースにフレームワークに沿った記述をするだけで、簡単にカッコイイWebサイトが作成できるツールです。 最近ではレスポンシブデザインが流行しているので、PC用スマホ用の画面をイメージさせるためにモックアップ用に使われたりもします。 0からでレスポンシブデザイン開発するのはスキルと労力が必要なのでモックアップといわず、そのまま開発に使われることもあります。 有名ところはBootstrapやFoundationですね。触ってみた印象と特徴
Gumbyはレスポンシブでデスクトップ、タブレット、スマートフォンと幅広く対応しています。 触っていて気に入ったのが画像読み込みを端末毎に設定できるので、スマホ用に文字の大きい画像を設定できたりするのでレスポンシブ向きのデザインができるところですね。 SASSベースの設計ですのでみんな使いやすいですね。 私はLESS派なのでこれを機会にSASSにも挑戦してみます。 機能面に関してはよく使う機能は付いているので気になりませんでした。 不要な機能がある場合は自分で機能削除したものをDLできます。 customize 設計もカスタマイズを想定していてBootstrapほど束縛がキツイ印象はありません。 ただGumby独特と描き方をするので、慣れるまでは少し面倒ですね。 ※コピペでいけるので、難しい書き方をするわけではないです。機能
- デザイン
- グリッドレイアウト
- レスポンシブ対応
- ボタンデザイン
- formパーツのデザイン
- SassによるCSS構築
- ナビゲーション（※スマホ用の切り替え有り）
- 位置固定（途中から出現させたりできて優秀）
- アイコンセット※画像は一部のものを抜粋しています。
- JS関係
- トグル・スウィッチ機能（すごい優秀！）
- ドロップダウン
- タブ
- ドロワー(アコーディオンみたいな感じ)
- パララックス
- 遅延表示
- モーダルウインドウ
- ツールトピック