cssのスタイルガイドライブラリ

  • はじめに
    • CSSのコメントに書く
    • cssが膨大になるのでミニマイズは必要
    • 環境によっては難しい
    • ペラ1ページには向かない
  • 目的
    • モジュールの一覧化
    • デザインの一貫性
    • 新モジュールが追加されたらすぐわかる
    • マークアップのルールがわかる
    • 他のコードをパクりやすい
    • スキルや感性に頼らないコーディング
  • 種類
    • ◯kalei
      • 敷居が低くプログラムを使わないので環境なくても誰でも使える
      • javascriptで動いている
      • cssのコメントにHTMLを書く
      • sass非対応、lessは対応
      • ちょっと機能が弱い
      • 弱いけど、ターミナルの使えないデザイナーにはこのくらいがちょうどいいかも
    • ◯styledecco
      • node.jsが必要
      • cssのコメントにHTMLを書く
      • マークダウン使えない?使える?
      • Ameba, DNA
      • 要コンパイル
      • Gruntで自動化可能
      • 崩れるって噂がある
      • 見た目がいじれない
      • 更新されなかった事例もある
      • タブレットの確認に問題ありな事例も
      • 手軽に導入でき、小規模サイトならいい
      • 出力サンプルを全て手書きで書かなきゃ行けない
      • UIが微妙
    • hologram
      • まだ若いスタイルガイドなので、ドキュメントは弱い
      • ruby
      • 良い意味で自由度が高い
      • 悪い意味で何もしないとただのスタイルが適応されてないページ
      • ビルド必要。hologramコマンドのみ。
    • frontnote
      • LIGのひとに勧められた
      • javascript
      • 非推奨、todoをつけられる
      • できたばっか
      • LIGの人以外使ってなさそう
      • LIGの人も放置っぽい
    • ◯KSS
      • Ruby(node.js、php版もある)
      • Githubで使われている
      • スタイルガイド用のcssやHTMLは自分で用意する?
      • 要コンパイル
      • Gruntで自動化可能
      • 導入少し大変でデザイナーには敷居が高いかも
      • KSS-nodeの方が敷居は低い
      • 派生クラスは1行で追加できるので複雑なサービスはstyledoccoよりこっちがいい
      • styledoccoで届かなかったところまで届くイメージ
      • スタイルガイド自体のデザイン変更も可能
    • KSS-node
      • SASS非対応。gruntを使えばできるっぽい
      • 記法はkalei, styledoccoと同じ
    • Boilerplate
      • bootstrapベース?
      • コマンド入力不要
      • ドキュメント少ない
      • 作れるものが決まっている?
      • markupディレクトリにいれたhtmlファイルから、自動的にプレビュー
      • phpで動作
    • sassDoc
      • 他スタイルガイドと併用できる?
      • mixinをまとめられる?
      • スタイルガイドではない
    • Pattern-Primer
      • 不明
      • スニペットファイルをディレクトリに入れると、それのコードを元にプレビュー