読者です 読者をやめる 読者になる 読者になる

togatttiのエンジニアメモ

過度な期待はしないでください。旧麹町で働くエンジニアのメモ帳です。

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

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

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

今回はその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でも便利な代物だけど、このジェネレータを使うと
もっと楽ができるからおすすめしたい。
f:id:togattti1990:20130530224732j:plain:h400:w600

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

f:id:togattti1990:20130529235209j:plain:h400:w400

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

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