最近のWebデザインでは様々な技術を組み合わせて行うようになっています。昔のようにHTMLとCSS、JavaScriptだけで事足りる訳ではありません。もっと色々なテクニックを組み合わせなければ生産性は高くなりません。 Rinはその一つで、単体のソフトウェアというよりもテクニックの組み合わせ集的な存在です。実践の中で培われたテクニックを手に入れられる、そんな素晴らしいソフトウェアです。

Rinの使い方

Rinで作られたサイトを紹介します。

このようなモダンなデザインのサイト。

大きな画像はインパクトがありますね。

ファイル構成です。

仕組みはgruntを使っていますので、インストールは次のようになります。

$ npm install -g grunt-cli
$ git clone git@github.com:sanographix/rin-html-template.git your_project
$ cd your_project
$ npm install
$ grunt

これで http://localhost:8080/ にサーバが立ち上がります。機能としては画像の圧縮があり、imagesフォルダに入れると自動的に画像を圧縮してくれます。

スタイルシートはSass/Compassをサポートしています。JavaScriptもミニファイする機能があります。また、LiveReloadに対応していますので機能拡張を入れたブラウザであればさくさくとデザインの確認ができるでしょう。

Rinはnode/JavaScript製のオープンソース・ソフトウェア（MIT License）です。

Rin - A Lean, Basic HTML5 and SASS Template by sanographix/ sanographix/rin-html-template