grunt-styleguide は、CSSのドキュメント生成ツール。


[markdown]
“`prettyprinted
% grunt –version
grunt-cli v0.1.10
grunt v0.4.1
“`

## インストール

> * [indieisaconcept/grunt-styleguide · GitHub](https://github.com/indieisaconcept/grunt-styleguide)

“`prettyprinted
% npm install grunt-styleguide –save-dev
“`

## Gruntfile

css 以外にも scss 等も指定できる。

“`
# grunt-styleguide
styleguide:
prod:
name: ‘<%= pkg.name %>‘
options:
framework:
name: ‘styledocco’
files:
‘docs/styleguide’: ‘src/sass/*.scss’
“`

## つかいかた

例えば、style.scss にmarkdownでコメントを追加する。

> * [【Grunt】styledoccoでCSSスタイルガイドを自動作成をしてみる。 ｜ Developers.IO](http://dev.classmethod.jp/etc/grunt-styledocco/)

“`prettyprinted
/*
# サイト名
 
サイト名を装飾する。
 
\“`

サイト名

\“`
*/
 
h1 {
font-size: 4em;
color: #f00;
}
“`

※ 上記のコメント内のコード記述は、「\`\`\`」three backticksです。

“`prettyprinted
% grunt styleguide
Running “styleguide:prod” (styleguide) task
>> DEST: docs/styleguide/index.html
Done, without errors.
% open docs/styleguide/index.html
“`

このような形で使われているようです。

> * [StyleDoccoによるCSSスタイルガイドの導入｜1 pixel｜サイバーエージェント公式クリエイターズブログ](http://ameblo.jp/ca-1pixel/entry-11453624925.html)
> * [作業効率を2倍にしたSassとStyleDoccoの活用ポイント : DeNA Creator(クリエイター) Blog](http://creator.dena.jp/archives/27298098.html)

## 補遺

参考

> * [ウェブサイトの制作に携わる全ての人に役立つスタイルガイドを簡単に作成できる -Style Guide Boilerplate | コリス](http://coliss.com/articles/build-websites/operation/work/style-guide-boilerplate.html)

メモ

> * [grunt.js – grunt-contrib-watchでlivereload – Qiita [キータ]](http://qiita.com/tomtoma1025/items/0862ece4133932ad3d89)
> * [『StyleDocco』でCSSプリプロセッサのスタイルガイド作成 | toybox-design.net](http://toybox-design.net/?p=640)
[/markdown]