まず最初はプラグインのインストールだ。

$ ruby script/plugin install git://github.com/pilu/web-app-theme.git

Initialized empty Git repository in #{RAILS_ROOT}/vendor/plugins/web-app-theme/.git/

remote: Counting objects: 72, done.

remote: Compressing objects: 100% (59/59), done.

remote: Total 72 (delta 15), reused 9 (delta 0)

Unpacking objects: 100% (72/72), done.

From git://github.com/pilu/web-app-theme

* branch HEAD -> FETCH_HEAD

これだけでインストールは完了する。次にテーマの生成になる。

$ ./script/generate theme

exists app/views/layouts

create public/stylesheets/themes/default/

create app/views/layouts/application.html.erb

create public/stylesheets/web_app_theme.css

create public/stylesheets/web_app_theme_override.css

create public/stylesheets/themes/default/style.css

この状態でサーバを立ち上げてアクセスすると以下のように表示される（元々のindex.htmlは削除して、ルーティングの設定も変更されている必要がある）。なお、ファイルの内容は修正済なのでご注意いただきたい。

これが最も基本的なスタイルだ。次にテーマを変更する場合。テーマは全部で9種類用意されている。「bec-green」「bec」「blue」「djime-cerulean」「drastic-dark」「kathleene」「orange」「reidb-greenish」「warehouse」をテーマとして指定すれば良いだけだ。

$ ./script/generate theme –theme=blue

exists app/views/layouts

create public/stylesheets/themes/blue/

overwrite app/views/layouts/application.html.erb? (enter “h” for help) [Ynaqdh] Y

force app/views/layouts/application.html.erb

identical public/stylesheets/web_app_theme.css

identical public/stylesheets/web_app_theme_override.css

create public/stylesheets/themes/blue/style.css

そうすれば次のようにテーマが変更されて表示される。

もしapplication.html.erbが嫌であれば、Layoutを指定して変更できる。

$ ./script/generate theme application2 # ここではapplication2.html.erbを指定。

exists app/views/layouts

exists public/stylesheets/themes/default/

create app/views/layouts/application2.html.erb

identical public/stylesheets/web_app_theme.css

identical public/stylesheets/web_app_theme_override.css

identical public/stylesheets/themes/default/style.css

これだけで手軽にテーマに対応したデザインができてしまう。デザイン自体、メニューがあったり、サブメニューがある、テーブルやフォームも考慮されており、さらにメッセージや2カラムフォームも利用できる。リストやログイン画面なども考慮されている等、デザインで厄介になりそうなポイントはきちんと押さえられている。これならば大抵のWebサイトの雛形として使えるのではないだろうか。

実際に使ってみた感じでは、フッターが左側のカラムについているので、幅広のフッターにしたい時にちょっと苦労するといった程度だ。それ以外はとても手軽に使えて、見栄えもよく、開発する気を損なわないで済む。デザインで苦労した経験のある方はぜひ使ってみて欲しいライブラリだ。

その他画面は詳細にて。

テキストとテーブル

フォームとメッセージ

1カラム

via Webシステム開発者に送る便利なテンプレート「Web App Theme」 [ MOONGIFT ]

pilu’s web-app-theme at master – GitHub
　http://github.com/pilu/web-app-theme