Make Styleguide

2015/12/15 JSオジサン#6 Day1

about me😪

name: じまぐ
id: @nakajmg
PixelGrid Inc.

CSS Styleguide Generator

Styleguide Generator

StyleDocco
KSS
Hologram

Styleguide Generator

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

😫 変な記法は覚えたくない

😤 Ruby依存をなくしたい

ほしいもの😂

😊 Nodeで動く

😆 Markdownで書ける

pxgrid.github.io/aigis

aigis

🌸 Nodeで動く

🌸 Markdownで書ける

🌸 Hologramのいいとこどり

/*
---
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

@yomotsu

利用者の声📢

「とっても使いやすいです。」

🙏Please feedback🙏

pxgrid/aigis