1

CSS Living Style Guide

2

@frontainerFront-end Engineer

2014/4 LIG入社 フロントエンドエンジニア

プロフィール

http://github.com/frontainer

現在はWebサイトを作ったりテンプレート作ったり いろいろと活動しています。

最近はAngularJSの勉強会に顔を出していました

林　優一

ng-mtg#6 - ディレクティブパターン

第１回AngularJS勉強会@LIG

9月10月もLTと勉強会が一杯です。ありがとうございます。

3

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

4

01

スタイルガイドを作る道

静的に作る静的にHTMLを作ってスタイルガイドをする

• 最初はしっかり作られる

• リリースが近くなると既にコーディングされたものだけが更新され始める

• システムに組み込まれるとほとんどが組み込まれたものだけが更新される

• 最終調整段階ではほとんど無視される

• 納品時には死んでいる

5

02 自動化させるジェネレーターを活用して自動化させる

• CSSやSASS,LESSに書かれたコメントをもとに自動生成

• コメントを書く習慣にもなる

• CSSファイルが縦に長くなる

• HTMLのハイライトがされないのでサンプルコードが入力しにくい

スタイルガイドを作る道

StyleDocco [Ruby]

Pattern Primer [PHP,Node,Ruby]

KSS [Ruby,Node,PHP]

6

02 自動化させる

ジェネレーターいろいろ

Kalei Style Sheet [JavaScript]

Hologram [Node]

http://warpspire.com/kss/

https://github.com/jacobrask/styledocco

https://github.com/adactio/Pattern-Primer

http://kaleistyleguide.com/

http://trulia.github.io/hologram/

7

https://github.com/frontainer/frontnote

JavaScriptで作ったスタイルガイドジェネレーター

外部CSSの影響を受けにくいスタイルガイドテーマを作成

テンプレートエンジンにEJSを採用

8

FrontNote

FrontNoteの特徴

非推奨、todoなどのラベルが付けられる

Grunt,Gulpプラグインを提供

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

FrontNote

ラベルがつく

ファイルごとに ページが作られる

モダンブラウザなら 一括選択してコピー

ドキュメントが薄い。まだデモすら作れていない。

先週リリースしたばかりの個人開発

テストが十分ではない

11

AngularJSを使うなら知っておきたいワード

問題点

とりあえずでリリースしてしまったのでバージョンアップが頻繁

12

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

13

ご清聴ありがとうございました

https://github.com/frontainer/frontnote

FrontNoteは以下で公開されています

バグってても怒らないでね