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

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

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

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)

Welcome to your PULL REQUEST!

そういうわけで皆様のPull Requestをお待ちしております。Happy Hacking!