Open Rplus opened 9 years ago
Facebook note permalink https://www.facebook.com/rplus.tw/posts/969199326481184
Art Pai 有一篇是講用 ReactJS 來寫 style guideline http://minipai.tumblr.com/post/112684988122/
不過 ReactJS 沒怎麼摸 不是很熟 哈~
alistapart 上關於 style guide 建置的文章
An overview of Pattern Library Generators https://github.com/davidhund/styleguide-generators
整理包
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
前些天在社團裡看到一個整理地不錯的 repo 裡面有很多種 styleguide-generators https://github.com/davidhund/styleguide-generators
via: https://www.facebook.com/groups/f2e.tw/permalink/958515644185801/?comment_id=958534310850601
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 簡單地用自訂語法框起來後,直接寫原始碼:
解析部份則是要自己附一下 custom plugin https://github.com/primer/primer/blob/v2.3.3/docs%2F_plugins%2Fexample.rb (( 這部份目前看不懂~ 哈哈
應該可以自行 fork 後自己弄一套~
另外一個有趣的工具是 Parker
https://github.com/katiefenn/parker 可以幫你分析一個 CSS 的工具,可輸出不同格式的報告
human(text)
,json
,cvs
可以在 terminal 直接搭配 curl 使用~ 蠻趣味的~ 在 grunt 跟 gulp 上都有各自的 package