gumbyを使ってみる

イシュー

  • 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以外のファイルの移動方法はどうやんの?

  • imgフォルダの配下が空なんだけど

Gumbyのいいところ

  • 結局SassベースでCSSを書く場合に、共通のコンパイル環境が用意されているところ
  • Bootstrapは、Non-Customizeだったらいいが、カスタマイズする場合には、結局Sassから書きたい。
  • 同じコンパイル環境(ディレクトリ構成)で、すでにいくつかカスタマイザブルなコンポーネントが用意されている。(もちろん、カスタマイズしやすさが前提)
  • カスタマイズするならGumby, カスタマイズしないならBootstrapといったところか(カスタマイズしない=モック)