Rails+Unifyでお手軽UIデザイン（お試し編）

Unifyってなに？

Unifyはbootstrap3用のテンプレート（有料）です。レスポンシブで、幅広い用途をカバーしています。

railsから使う

ダウンロードしたUnifyを展開すると、HTML/assets下のcss,js,pluginsなどのフォルダに用途別のcssやjsがたくさん入っています。

まずは最低限のものを使ってみます。

置き場所

今回はrailsアプリのルートディレクトリ下のvendor/assetsにunify1.7というディレクトリをつくって、Unifyのassets下を配置。

application.css

bootstrapとunify本体のcssを読み込むようにします。

*= require ../../../vendor/assets/unify1.7/plugins/bootstrap/css/bootstrap.min
*= require ../../../vendor/assets/unify1.7/css/style.css

view

ためしにこんなslimを用意してみます。

.wrapper
  .content.space-lg-hor
    .row

      .col-md-6
        .tag-box.tag-box-v2.box-shadow.shadow-effect-1
          h2 ひとつめの見出しです
          p ひとつめの本文です

      .col-md-6
        .tag-box.tag-box-v2.box-shadow.shadow-effect-1
          h2 ふたつめの見出しです
          p ふたつめ本文です

確認

UnifyっぽいUIが確認できたら成功！