boilerstrapを試す

css html

githubにboilerstrapというプロダクトがあったので試してみました。

https://github.com/emorikawa/boilerstrap

HTML5 BoilerpalateとTwitter bootstrapを同時に使うWebサイトのテンプレート、って感じでしょうか

とりあえずgit cloneでソースを持ってきます

git clone https://github.com/emorikawa/boilerstrap.git
cd boilerstrap
rm -rf .git


フォルダ構造は以下のようになってます

├── README.md
├── Rakefile
├── css
│   ├── bin
│   │   └── styles.css
│   ├── lib
│   │   └── twitter-bootstrapのlessファイル
│   └── src
│       └── styles.less
├── img
│   ├── glyphicons-halflings-white.png
│   └── glyphicons-halflings.png
├── index.html
└── js
    ├── bin
    │   ├── global.js
    │   ├── global.min.js
    │   ├── json2.js
    │   └── json2.min.js
    ├── lib
    │   ├── bootstrap
    │   │   └── twitter-bootstrapのjsファイル
    │   ├── jquery-1.7.1.min.js
    │   └── modernizr-2.0.6.min.js
    └── src
        ├── global
        │   └── log.js
        └── json2.js

使用方法

実際に自分で編集するのはcss/srcやjs/srcですね

css/srcにはcss、less、sassが置けます
js/srcにはjs、coffeescriptが置けます

rakeでビルドが走り、lessやjsを変換したものがcss/bin、js/binに入ります
rake watchでファイルを監視し続け、修正を保存すると即ビルドされるようになります


依存ライブラリ

jsファイルをビルドするのに必要

npm install -g uglify-js

lessファイルをビルドするのに必要

npm install -g less

sassファイルをビルドする場合

gem install sass

coffeescriptをビルドする場合

npm install -g coffee-script

rake watchを使う場合

gem install watchr