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で書ける

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のハイライトが効く

サンプル

@yomotsu

利用者の声📢

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

🙏Please feedback🙏