Railsプログラマはこれを入れればすぐにズルいデザインをはじめられます！

先日のプログラマ向けデザイン勉強会で発表された「少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック」（by 赤塚さん）の中に書かれていたSassのMixinをRailsで使えるGemにしてみました。

zurui-sass-rails: https://github.com/mahm/zurui-sass-rails
sample: http://zurui-sample.herokuapp.com/

うおおずるい！ｗ RT @mah_lab: .@ken_c_lo さんのズルいデザインをGemにしてみました。 github.com/mahm/zurui-sas… サンプルはこちら zurui-sample.herokuapp.com (based on github.com/machida/Custom…)

— TAEさん (@ken_c_lo) 11月 7, 2012

@mah_lab ありがとうございます！！これはズルい！先に作られたｗｗ今日から使わせていただきます(ΦωΦ)

— TAEさん (@ken_c_lo) 11月 7, 2012

デザインもうまくてずるいプログラマの@mah_lab さんが最後に全部もってったｗ

— TAEさん (@ken_c_lo) 11月 7, 2012

そういう訳で今日から「ズルいプログラマ」を名乗りますね！（キリッ

Getting Started

恐らくサンプルページのソースコードを見て頂くのが一番てっとり早いです。Rails3.1以上が対象です。

Gemfile

group :assets do
  # ...
  gem 'compass-rails'
  gem "zurui-sass-rails"
end

application.css

/*
 *= require base
 */

base.css.sass

@import compass/utilities
@import compass/css3
@import zurui-sass

これだけの準備をすれば、すぐにズルいデザインをはじめられます。とはいえ、ズルいデザインはパーツ単位のTipsなので、CustomizedTwitterBootstrap（by 町田さん）といったズルい土台から利用していくのが良いと思います。

Tips

サンプルでは書いていないのですが、用意しているMixinには引数が設定できまして、シチュエーションに応じてちょろっと引数を足さないとあんまりズルくなりません。Twitter Bootstrapの色合いだと以下のような感じが良いかも知れませんね。サンプルでも以下のような値を使用しています。

// Zurui line
@include zurui-line-top(.1, 1.0)
@include zurui-line-right(.1, 1.0)
@include zurui-line-left(.1, 1.0)
@include zurui-line-bottom(.1, 1.0)

// Zurui font-shadow
@include zurui-ts-000(.1)
@include zurui-ts-fff(.1)

// Zurui box-shadow
@include zurui-box-deboss(.1, .4, .7)
@include zurui-box-emboss(.1, .2, .7)