#CSS
#UI
#StyleGuide

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

More than 1 year has passed since last update.

StyleGuide比較

マークダウン 記法

 /*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{
    ...
  }
}

Styleguideのあとの数字がカテゴリになる

KSS

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

kss-node

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

SC5 Style Guide Generator

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

その他

StyleDocco

docs___StyleDocco.png

実物サンプルが表示されないようなので選外…

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