Front-End Style-Guides: Definition, Requirements, Component Checklist
レスポンシブ対応もスタイルガイドに入れよう
- コンポーネントは探しやすいカテゴリーに分割されている
- レスポンシブもしくはグリッドシステム
- カラーパレット
- タイポグラフィルール
- フォント名
- 文字サイズ&ウェイト
- 行間
- カーニング
- 利用箇所
- コンポーネント
- どこでどんな所に利用するかの説明。特に似た別のコンポーネントとどう使い分けるかがわかるように。
- コードスニペット
- 実装仕様。ポジショニングや余白など
- していいこと、だめなこと
分類は勝手に追加
- ナビ
- パンくず
- ナビゲーションメニュー(サブナビゲーション)
- タブ
- ボタングループ
- ツールバー
- コンポーネント
- 写真などのグリッドリスト
- カード
- テーブル
- ダイアログ
- リスト
- フォームアイテム
- ボタン
- チェックボックス
- ラジオボタン
- ドロップダウンメニュー
- スライダー
- トグルスイッチ(オン/オフ)
- 数値入力(+/-)
- 日付と時間ピッカー
- 小物
- ツールチップ
- ローディング
- アイコン
- アイコンのリプレースメント(トークン/チップス)
- アラートモーダル
- その他
- アニメーション