[POST] style guideline with Jekyll template engine

[Rplus]

http://primercss.io/ 是 GitHub 出品的一套 CSS framework 主要也是它們的開發準則 目前由 mdo & jonrohan 在維護

https://github.com/primer/primer guideline repository 上可以看一下它是怎麼生成跟維護的

主要是使用 Jekyll template engine 在處理 文件以 markdown (.md) 為主，也算一種格式化吧~

guideline 主要最麻煩的就是 example 的 code 跟 preview 部份 一方面要寫完整的 code，一方面又要附上完整的 preview 結構 如果能自動化的話，那就真的是太棒了~

primer css 這一部份可以看到它們的 md 檔格式非常簡單~ https://github.com/primer/primer/blame/v2.3.3/docs/layout.md#L86-L92 簡單地用自訂語法框起來後，直接寫原始碼：

{% example html %}
<div class="columns">
  <div class="one-half column centered">
    .one-half
  </div>
</div>
{% endexample %}

解析部份則是要自己附一下 custom plugin https://github.com/primer/primer/blob/v2.3.3/docs%2F_plugins%2Fexample.rb (( 這部份目前看不懂~ 哈哈

應該可以自行 fork 後自己弄一套~

---

另外一個有趣的工具是 Parker

stylesheet analysis tool.

https://github.com/katiefenn/parker 可以幫你分析一個 CSS 的工具，可輸出不同格式的報告 human(text), json, cvs 可以在 terminal 直接搭配 curl 使用~ 蠻趣味的~ 在 grunt 跟 gulp 上都有各自的 package

[Rplus]

Facebook note permalink https://www.facebook.com/rplus.tw/posts/969199326481184

[Rplus]

Art Pai 有一篇是講用 ReactJS 來寫 style guideline http://minipai.tumblr.com/post/112684988122/

不過 ReactJS 沒怎麼摸 不是很熟 哈~

[Rplus]

alistapart 上關於 style guide 建置的文章

1. Creating Style Guides by Susan Robertson April 08, 2014 http://alistapart.com/article/creating-style-guides
2. Style Guide Generator Roundup by Susan Robertson · February 04, 2015 http://alistapart.com/blog/post/style-guide-generator-roundup

[Rplus]

An overview of Pattern Library Generators https://github.com/davidhund/styleguide-generators

整理包

[Rplus]

http://azanebrain.github.io/gulp-kss/section-1.html https://github.com/azanebrain/gulp-kss/blob/master/demo%2Fsass%2Felements%2F_buttons.sass

直接看 KSS source 跟 output. 覺得蠻神奇的是 :hover , :active 這類的 pseudo-class 也可以直接 trigger!?

.pseudo-class-* 看起來像是用 JS 生成的 http://azanebrain.github.io/gulp-kss/public/kss.js

[Rplus]

前些天在社團裡看到一個整理地不錯的 repo 裡面有很多種 styleguide-generators https://github.com/davidhund/styleguide-generators

via: https://www.facebook.com/groups/f2e.tw/permalink/958515644185801/?comment_id=958534310850601

其它筆記：https://github.com/Rplus/f2e-note/issues/31