イシュー
- responsive 対応のcss framework である gumbyを使ってみる。
- 日本語サイトがほとんどないので、なにがよいのか分かっていないけど、、
参考
とりあえず、getting start
npm install -g bower
bower install gumby
npm install -g claymate
bower install gumby
- gumby のインストールで、bower_components フォルダとgumbyに必要なファイルがダウンロードされる
claymate install
- claymate install で、gumby.json ほか、必要になりそうなアセットがダウンロードされる
$ ls
bower_components config.rb css fonts gumby.json img index.html js sass ui.html
claymate build
- claymate build コマンドでJSのconcatが行われた。
- 結合されたjsは、プロジェクト配下のjsフォルダに格納される模様。
$ claymate build
Concatenating and minifying js:
Adding file bower_components/gumby/js/libs/gumby.js
Adding file bower_components/gumby/js/libs/ui/gumby.checkbox.js
Adding file bower_components/gumby/js/libs/ui/gumby.fixed.js
Adding file bower_components/gumby/js/libs/ui/gumby.navbar.js
Adding file bower_components/gumby/js/libs/ui/gumby.radiobtn.js
Adding file bower_components/gumby/js/libs/ui/gumby.retina.js
Adding file bower_components/gumby/js/libs/ui/gumby.skiplink.js
Adding file bower_components/gumby/js/libs/ui/gumby.tabs.js
Adding file bower_components/gumby/js/libs/ui/gumby.toggleswitch.js
Adding file bower_components/gumby/js/libs/ui/jquery.validation.js
Adding file bower_components/gumby/js/libs/gumby.init.js
Finished generating js/gumby.min.js
$
claymate
参考
js以外のファイルの移動方法はどうやんの?
Gumbyのいいところ
- 結局SassベースでCSSを書く場合に、共通のコンパイル環境が用意されているところ
- Bootstrapは、Non-Customizeだったらいいが、カスタマイズする場合には、結局Sassから書きたい。
- 同じコンパイル環境(ディレクトリ構成)で、すでにいくつかカスタマイザブルなコンポーネントが用意されている。(もちろん、カスタマイズしやすさが前提)
- カスタマイズするならGumby, カスタマイズしないならBootstrapといったところか(カスタマイズしない=モック)