-
はじめに
-
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
- 不明
- スニペットファイルをディレクトリに入れると、それのコードを元にプレビュー
-
cssのスタイルガイドライブラリ
Fatal error: Uncaught Error: Call to undefined function set_post_views() in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php:658 Stack trace: #0 /home/jszk/desnote.com/public_html/wpjs/wp-includes/template-loader.php(78): include() #1 /home/jszk/desnote.com/public_html/wpjs/wp-blog-header.php(19): require_once('/home/jszk/desn...') #2 /home/jszk/desnote.com/public_html/index.php(17): require('/home/jszk/desn...') #3 {main} thrown in /home/jszk/desnote.com/public_html/wpjs/wp-content/themes/the-thor-child/single.php on line 658