HTML5MinutesのLTでお話させて頂いた資料です。 FrontNoteというNode.js製のジェネレーターについて少しだけお話させていただきました。 ５分はやっぱり短い・・・・

1. 1
CSS Living Style Guide

2. 2
@frontainer
Front-end Engineer
林 優一
2014/4 LIG入社
フロントエンドエンジニア
プロフィール
最近はAngularJSの勉強会に顔を出していました
ng-mtg#6 - ディレクティブパターン
第１回AngularJS勉強会@LIG
現在はWebサイトを作ったりテンプレート作ったり
いろいろと活動しています。
http://github.com/frontainer
9月10月もLTと勉強会が一杯です。ありがとうございます。

3. 3
Living Style Guide（メンテナンスされている）スタイルガイドを作るのは難しい。

4. 4
スタイルガイドを作る道
01
静的に作る
静的にHTMLを作ってスタイルガイドをする
• 最初はしっかり作られる
• リリースが近くなると既にコーディングされたものだけが更新され始める
• システムに組み込まれるとほとんどが組み込まれたものだけが更新される
• 最終調整段階ではほとんど無視される
• 納品時には死んでいる

5. 5
スタイルガイドを作る道
02 自動化させる
ジェネレーターを活用して自動化させる
• CSSやSASS,LESSに書かれたコメントをもとに自動生成
• コメントを書く習慣にもなる
• CSSファイルが縦に長くなる
• HTMLのハイライトがされないのでサンプルコードが入力しにくい

6. StyleDocco [Ruby]
KSS [Ruby,Node,PHP]
Pattern Primer [PHP,Node,Ruby]
6
02 自動化させる
ジェネレーターいろいろ
Kalei Style Sheet [JavaScript]
Hologram [Node]
https://github.com/jacobrask/styledocco
http://warpspire.com/kss/
https://github.com/adactio/Pattern-Primer
http://kaleistyleguide.com/
http://trulia.github.io/hologram/

7. 7
https://github.com/frontainer/frontnote

8. JavaScriptで作ったスタイルガイドジェネレーター
テンプレートエンジンにEJSを採用
外部CSSの影響を受けにくいスタイルガイドテーマを作成
8
FrontNote
FrontNoteの特徴
非推奨、todoなどのラベルが付けられる
Grunt,Gulpプラグインを提供

9. 9
FrontNote /*
#overview
ファイル全体の総称
!
ファイル全体のざっくりした説明を書く
*/
/*
#styleguide
スタイルの名称
!
@非推奨
@version 1.1-
@todo
!
ここにコメントを書きます。
<div>hogehoge</div>コメントのHTMLはエスケープされます。
改行は反映されます。
!
```
<a class="link" href="">太字アンダーラインが引かれる</a>
<span class="link link-disabled">押せないリンク</span>
```
*/
.link {
font-weight: bold;
text-decoration: underline;
}
.link-disabled {
color: #999;
}
.link-disabled:hover {
color: #999;
}

10. 10
FrontNote
ラベルがつく
ファイルごとに
ページが作られる
モダンブラウザなら
一括選択してコピー

11. ドキュメントが薄い。まだデモすら作れていない。
テストが十分ではない
先週リリースしたばかりの個人開発
11
AngularJSを使うなら知っておきたいワード
問題点
とりあえずでリリースしてしまったのでバージョンアップが頻繁

12. 12
手伝ってくれる方、応援してくれる方がいらっしゃいましたら
後ほどお声がけください！

13. 13
ご清聴ありがとうございました
FrontNoteは以下で公開されています
https://github.com/frontainer/frontnote
バグってても怒らないでね