Styleguide Generator

• StyleDocco
• KSS
• Hologram

Styleguide Generator

• StyleDocco 死亡
• KSS 記法が変
• Hologram Ruby依存

/*
---
name: Buttons
category:
  - mod/btn
  - base
tag:
  - latest
  - base
---

Button styles.

* Base button style.
* Use `a` or `button` tag.

```html
<a class="ag-btn">Button</a>
<button class="ag-btn ag-btn--primary">Button</button>
```
*/

.ag-btn {
  ...
}

Config

Markdown

Style

💁Markdownで
外部HTMLを挿入できる

/*
---
name: BaseButton
category: mod/btn
tag: base
---

!![btn](./mod/btn.html)

*/

<button class="mod-btn">Button</button>

btn.html

btn.css

/*
---
name: BaseButton
category: mod/btn
tag: base
---

```html
<button class="mod-btn">Button</button>
```

*/

😭HTMLのハイライトが効く

www.codegrid.net

サンプル

ui.codegrid.net/styleguide