先日のプログラマ向けデザイン勉強会で発表された「少ない手間と知識で”それなり”に見せる、ズルいデザインテクニック」(by 赤塚さん)の中に書かれていたSassのMixinをRailsで使えるGemにしてみました。
- zurui-sass-rails: https://github.com/mahm/zurui-sass-rails
- sample: http://zurui-sample.herokuapp.com/
うおおずるい!w 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 ありがとうございます!!これはズルい!先に作られたww 今日から使わせていただきます(ΦωΦ)
— TAEさん (@ken_c_lo) 11月 7, 2012
デザインもうまくてずるいプログラマの@mah_lab さんが最後に全部もってったw
— TAEさん (@ken_c_lo) 11月 7, 2012
そういう訳で今日から「ズルいプログラマ」を名乗りますね!(キリッ
Getting Started
恐らくサンプルページのソースコードを見て頂くのが一番てっとり早いです。Rails3.1以上が対象です。
group :assets do # ... gem 'compass-rails' gem "zurui-sass-rails" end
/* *= require base */
@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!