去年の今頃作ったkss-nodeのテンプレートが１周年を迎えたのでCSS Architecture Advent Calendar 2014 - Adventarの記事をかねておさらい。
kss-nodeとは、ザックリ言うとRuby上で動作するスタイルガイドジェネレータKSSのNode.jsの移植版。
t32k/grunt-kssだったりPhilJ/gulp-kss（なんか放置されてる？）だったりが、あるのでgruntだったりgulpだったりをご利用の皆さまも導入しやすい仕様となっている。
スタイルガイドとは
コンポーネントリストページとは簡単に言うと、ウェブサイト、ウェブアプリに必要なコンポーネントを一枚のページにまとめてコーディングしたものです。
メールマガジン発行ツールを提供しているMailChimpの例(画像の例ではありますが)がその好例です。
スタイルガイドというように呼ばれることも多いですが、この記事ではコンポーネントリストページと呼ぶことにします。ガイドラインというとどうしても作る方も見る方も構えてしまいますが、リストページであれば、単なるリストとしてとらえて考えることが出来ると思うからです。(最終的にスタイルガイドとよばれるドキュメントになっていくのですが。)
スタイルガイドジェネレーターとは
例えば、ユーザーに対して一貫性を持った操作系を提供できるよいデザインを作り、その中で繰り返されるパターンを抽出した再利用可能なモジュールをCSSのスタイルとして定義していく、こういったプロセスは前提として不可欠です。この部分は自分達で頑張らないといけません。
こうした中で作られるであろう、モジュールを一覧化したHTML、つまり、ここでスタイルガイドと呼んでいる文書を作る部分をなるべく楽にしようというのが、昨今のスタイルガイドジェネレータの役割です。
そんなkss-nodeのデフォルトテンプレートがダサい、KSSで作ってるらしいGitHubのスタイルガイドが素敵、このテンプレート欲しい（というかKSSの中の人がGitHubの中の人らしい）、ということで作ったのがkss-node-template-such-as-github。
うん、今見なおしても素敵ですね。
（名前は冗長だけど such-as-github あたりが韻踏んでてリズムがいいと個人的には思ってたけど、forkされて名前変えられたりしてるのでやはり冗長らしい。）
普段、スタイルガイドを作るほどの案件がなく「自分でわかればいいや」程度のモジュールベタ貼りした一覧程度しか作らないので割りと放置していたのだが、この一年でHandlebars.jsのバージョンアップに伴いkss-nodeもアップデートしていたようで、kss-nodeで拡張されていたHandlebars.jsのヘルパー周りで「もうこれ使うんじゃねー」というwarningが出ているよーとコスタリカ人のイケメンがプルリクくれたりしたので、まだちゃんと使えるレベルを保っているはず。
（kss-nodeではHandlebars.jsをテンプレートエンジンとして利用している。）
こういうところGitHub素晴らしいですね。
そんなわけで、kss-nodeでgithub風な素敵なスタイルガイドを作りたいと思ったそこのアナタ、kss-node-template-such-as-githubを使ってみては。
尚、スタイルガイドジェネレータにはKSS/kss-nodeの他に
なんかがあるらしい。
色々違いがあるからお気に入りのものを見つけて、ハッピースタイルガイドライフを！