RailsでTwiiterBootstrapを設定してBootThemeを使う。

Webで何かアプリのモックを作るときにエンジニアだと,
基本デザインまで手が回らないことが多い。

そんなときにデザインにごまかしを効かせるための
ライブラリTwitterのbootstrapは割と有名だと思う。

今回はそのbootstrapをRailsで使う設定。
これこれ→seyhunak/twitter-bootstrap-rails · GitHub
その後、BootThemeを使って、bootstrapを楽に設定してみる。
Rails 3.2.13を使用。

1 Gemfileに設定

そしたら、お決まりのこれ。

bundle install

2 layoutを作成する

ここでlayout/application.html.erbが作成される。
とりあえず、headタグだけ抽出してみた。

3 BootThemeを使う

後はviewのところ。
お手軽ツールとしてBootThemeを見つけたので、使ってみる。
https://www.boottheme.com

BootThemeの一画面。
コードの画面と表示画面を並べて編集できるので、作業が捗る。
後、bootstrapで用意しているパーツ、
例えばフォームとかボタン、ボックスなんかも
ドラッグ＆ドロップで画面にあわせることができてしまう。

bootstrapでも便利な代物だけど、このジェネレータを使うと
もっと楽ができるからおすすめしたい。

初めてBootThemeで作ったトップ画面。

bootstrap使うとどうしても他の人が作ったデザインとかぶりやすいけど、
通常のCSSなんかも加工しながらいじれるので静的なデザインにこだわって
編集するときは楽。

３ステップくらいでコンパクトにまとまった...