酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

RailsでCompass, Zurui-design, Sassy-Buttons, Bootstrapを使ってUIをかっこ良くしちゃおう!

Compassやzurui-design, Sassy-Buttonsはエンジニア視点でデザインをちょっと改善するときにすごく役立つツールです。まるでUIもプログラムのパーツのように書けてしまうので、デザインの改善を思い立った時にオススメです。

この記事では、Rails環境にCompass, Zurui-design, Sassy-Buttons, Twitter-Bootstrapを追加するための手順を書きます!


Compassとは?

Sassをさらに強化してくれる便利なmixin群、スプライト自動作成、プロジェクトごとに設定ファイルを適用などがセットになったフレームワークです。
CompassについてはCSSの常識が変わる!「Compass」、基礎から応用まで! | 株式会社LIGにすごく丁寧な説明があります。
また、英語ですがCompassの公式ページもデモがあって概要をつかみやすいです。

Compass

Zurui-Designとは?

Zurui-Designとは、sassでのカッコイイmixinが使えるようになる仕組みです。
ちなみに、ズルいデザインについてはこちらのスライドがわかりやすいと思います。
zurui-sass-railsについては、こちらのブログ記事がわかりやすいです。

zurui-design-for-rails

Sassy-Buttonsとは?

sassy-buttonsは下のようグラデーションの効いたキレイなボタンを簡単に作成できる仕組みです。
英語ですが、公式サイトが一番雰囲気をつかみやすいです。

sassy-buttons

Gemのインストール

いつもどおりGemfileに以下を追加して、bundle installを実行してください。

1
2
3
4
5
6
7
8
# Bootstrap/Compress/Sassy-Buttons/Zurui-design
gem 'less-rails'
gem 'less-rails-bootstrap'
gem 'sass-rails'
gem 'compass-colors'
gem 'compass-rails'
gem 'sassy-buttons'
gem 'zurui-sass-rails'

Compassのインストール

Compassのインストールはこちら。

1
bundle exec compass init --syntax sass

Sassy-Buttonsのインストール

Compassのインストールはこちら。

1
bundle exec compass install sassy-buttons

もしNo such framework: "sassy-buttons"が発生するようなら、補足をご覧下さい。

使い方のサンプル

application.cssに以下を追加。

1
2
3
/*
 *= require twitter/bootstrap
*/

application.jsに以下を追加。

1
//= require twitter/bootstrap

xxx.css.sassファイルに次のコードを追加。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
@import "compass/utilities"
@import "compass/css3"
@import "sassy-buttons"
@import "zurui-sass"

// Compass
.compass-box
  +display-box
  +box-orient(horizontal)
  +box-align(stretch)
  +box-direction(reverse)
  height: 200px
  width: 100%
  .content, .sidebar
    padding: 20px
  .content
    +box-flex(4)
    background-color: #C5C1B4
  .sidebar
    +box-flex(1)
    background-color: #375F99
    margin-right: 1px

// Sassy-Buttons
.sassy-button
  +sassy-button("shiny", 15px, 26px, #ffd71a, #ffaa1a)

// Zurui-design
.zurui-box
  +zurui-box-deboss

xxx.html.erbに次のようなコードを書く。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!-- Twitter-bootstrapのサンプル -->
<div class="navbar navbar-fluid-top">
  <div class="navbar-inner">
    <div class="container-fluid">
      <a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </a>
      <a class="brand" href="#">TestApp</a>
      <div class="container-fluid nav-collapse">
        <ul class="nav">
          <li><%= link_to "Link1", "/path1"  %></li>
          <li><%= link_to "Link2", "/path2"  %></li>
          <li><%= link_to "Link3", "/path3"  %></li>
        </ul>
      </div><!--/.nav-collapse -->
    </div>
  </div>
</div>

<!-- compassのサンプル -->
<div class="compass-box">
  <div class="content">content</div>
  <div class="sidebar">sidebar</div>
</div>

<!-- sassy-buttonのサンプル -->
<div class="sassy-button">sassy-button</div>

<!-- zurui-designのサンプル -->
<div class="zurui-box">zurui-box</div>

結果が次のように表示されていれば成功。

Compass, zurui-design, Sassy-Buttons, Twitter-bootstrapのサンプル

おまけ: Buttons

ButtonsはSass + Compassで構成されているちょっと凝ったデザインのボタンを簡単に作ることができるライブラリです。デザインのアクセントに是非ご活用ください!

Buttons

こちらのツールは、コリスさんの記事『[CSS]さまざまなデザインのボタンを簡単に実装できるSass/Compassのボタンライブラリ -Buttons』に詳しく紹介されています!

補足: No such framework: “sassy-buttons”が発生する場合

Sassy-Buttonsの公式のインストール方法では、次のコマンドを実行する必要があるっぽです。

1
compass install sassy-buttons

ですがなぜか僕の環境では、No such framework: "sassy-buttons"となってしまいました。ただ上のエラーが出ていてもSassy-Buttonsを動かせました。 一応現在、GitHubで質問中です。回答を貰えたら記事を修正します。

Special Thanks

@suginoyさんに記述ミスをご指摘いただきました。深謝です!!

Twitter Bootstrapにcompass, Sassy Buttons, zurui-sass-railsを追加する手順。 - @camelmasaの開発日記

変更来歴

(08/20 21:20) おまけ: Buttonsを追加
(08/21 19:25) Bootsrapの対応法の記述を修正

ハッカソンハウス始めました!

ハッカソンハウス
2014年2月8日からエンジニア・クリエイターのためのスペース「Hackathon House」始めました!エンジニアがプロダクトづくりに集中出来る環境を作るために『Camp Fire』のご協力よろしくお願いします!

なぜ始めたのか?

僕はアメリカの有名なインキュベーション・オフィスを少しだけ訪問させて頂いたことがあります。あそこはプロダクトの可能性を目一杯引き出してくれる夢のような空間でした。僕はあんな場所を日本にも作りたいとずっと想い続けてきました。この企画を一緒にやっているくりしーさんは、『サウス・バイ・サウスウエスト』を通して、「あのワクワクする空間、熱気溢れるカオスな空間を日本でも創りたい。」というビジョンで一緒にやっています!

どんな場所を作りたいのか?

僕が目指しているのは、日本を代表するようなプロダクトが芽吹く場所。そんなプロジェクトをやりたい本気な仲間と集まれる場所。そんな仲間を見つけられる「ルイーダの酒場」のような場所です。

また、プロダクト開発のために「仲間と一緒に」どこよりもリラックス・集中できる空間をコンセプトにHackathon Houseを育てていきたいです!



押さえておきたい書籍

いかがだったでしょうか?
もし説明がわかりにくかったり、間違っている場所があればぜひ一言!

Comments