More than 3 years have passed since last update.

スタイルガイドジェネレータまとめ

Last updated at 2020-06-12Posted at 2016-07-29

StyleGuide比較

追記

未だにたまにストックされるので...

今はStorybook + addon-docs でmdxで作ってます。
多分、HTML向けのStorybookで同程度に簡単にメンテできるのではなかろうか。
（同一ファイルにするのは無理ですが。。。

マークダウン記法

 /*doc
 ---
 title: Alert
 name: alert
 category: basics
 ---
 　```html_example
     <div class='alert'>Hello</div>
 　``` 
 */
.alert{
  ...
}

categoryがindexになる。 parentも指定できて、grouping可能

Hologram

環境	メタ言語
Ruby	Sass/Scss/Less/PostCSS

aigis

タグ機能がある

環境	メタ言語
Node.js	Sass/Scss/Less/PostCSS

KSS 記法のもの

// A button suitable for giving a star to someone.
//
// :hover             - Subtle hover highlight.
// .star-given        - A highlight indicating you've already given a star.
// .star-given:hover  - Subtle hover highlight on top of star-given styling.
//
// Styleguide 2.1.3.
a.button.star{
  ...
  &.star-given{
    ...
  }
}