tamlog

主にwebのフロント回り たまに登山

BootstrapをつかうならYeomanがいいよ

スポンサーリンク

CSSフレームワークは何だかんだオレオレフレームワークを使う機会が多いんですが、 Bootstrapを使う機会もちらほら増えてきました。 そして、Bootstrapを使う時は Yomanのgenerator-webappを使ってます。

Bootstrapはサイトからcssファイルをダウンロードしてそのまま使えるのですが、 そのまま使うと使いづらいです。 やはり好みにカスタマイズしたいですよね。 でも都度準備するのって面倒... そんなときYomanのgenerator-webappを使うとサクッと環境を作れちゃいます。

自分の環境構築までの手順は以下

まずはベースをインストールします。

yo webapp

bower.jsonへ以下を追加(追加しなくてもokです。各自ご自由に)

    "jquery": "~1.11.0",
    "underscore": "~1.6.0",
    "responsejs": "~0.9.0",
    "html-inspector": "~0.8.1"

そしてbowerをインストールします。

bower install

次に以下をコピーして

bower_components/bootstrap-sass-official/vendor/assets/stylesheets/bootstrap/_variables.sass

貼り付けます。

app/styles

同フォルダ内にmain.scssがあるので以下を追加

@import "_variables.scss"

これで準備は完了です。 カスタムする場合はapp/styles内を編集していけばok。

あとは、必要に応じて以下コマンドをたたけばok

開発時:grunt serve
ビルド時:grunt build

hologramdevice.min.jsなんかも入れてます。

お試しあれ。