Rin 3.0 というのを作った。
僕はいわゆるペライチのWebサイトを作ることが多いんだけど、そういう制作時に使っているフレームワークというかBoilerplate的なやつです。
フレームワークといっても、BootstrapのようにCSSをモリモリ書いて汎用コンポーネントを用意しまくる、というふうにはしていない。結局各webサイトでデザインの要件が大きく異なる場合が多いので、CSS部分の記述をできるだけ少なくして、各サイト向けに柔軟にスタイルを書けるようにする方針をとっている。一方でビルドツールに求められることは割と毎回一緒なことが多いので、gulpですばやく環境構築して、スタイルは各サイトでよしなに、みたいな雰囲気。
Rinは、だいたい下記のようなことがすばやくできる。
- CSS/JS/画像（gif,jpg,png,svg）の自動圧縮
- ローカルサーバーの起動
- レスポンシブ対応のグリッドシステム
- 主要なogp記載済のhtmlファイル
- Retinaディスプレイを含めたMedia Queriesの分岐
バージョン3.0の新機能
Rinは2年前くらいにバージョン1.0を作ってから、微妙にちまちまと作りなおしてきたんだけど、今回のバージョン3.0ではタスクランナーをgruntからgulpに変更して、ついでに色々できることが増えた。
- svg画像の圧縮に対応
- BrowserSyncにより、ファイルの変更を高速にローカルサーバーに反映
- CSSのベンダープレフィックスの自動付与
あとは、グリッドシステムのclass名をSMACSSライクに変更するなど、いくつかの仕様変更を加えてある。
Rinを使ったサイト事例
過去のバージョン（2.xなど）を含めると、ぼくが今まで作ったサイトほとんど全てがそれにあたる。例えばIllustfolio3のサイトとか。
あとは去年出した同人誌の告知サイトにも使った。Rinには汎用コンポーネントみたいなのがほとんど含まれてないので、正直スクリーンショット見ただけではよくわからないと思うんだけど、グリッドシステムの感じとかで雰囲気を掴んでいただければと思います。
ご利用ください
こういうフレームワーク的なやつ他にも沢山あると思うんだけど、もし気に入ったらご利用ください。