Skip to content

Instantly share code, notes, and snippets.

@beijaflor
Created March 29, 2016 13:24
Show Gist options
  • Save beijaflor/9e0824b838f9cf2a2080 to your computer and use it in GitHub Desktop.
Save beijaflor/9e0824b838f9cf2a2080 to your computer and use it in GitHub Desktop.

Front-End Style-Guides: Definition, Requirements, Component Checklist

フロントエンドスタイルガイド

レスポンシブ対応もスタイルガイドに入れよう

含むべき8つの要素

  • コンポーネントは探しやすいカテゴリーに分割されている
  • レスポンシブもしくはグリッドシステム
  • カラーパレット
  • タイポグラフィルール
    • フォント名
    • 文字サイズ&ウェイト
    • 行間
    • カーニング
    • 利用箇所
  • コンポーネント
    • どこでどんな所に利用するかの説明。特に似た別のコンポーネントとどう使い分けるかがわかるように。
    • コードスニペット
    • 実装仕様。ポジショニングや余白など
    • していいこと、だめなこと

必要な25のコンポーネント

分類は勝手に追加

  • ナビ
    • パンくず
    • ナビゲーションメニュー(サブナビゲーション)
    • タブ
    • ボタングループ
    • ツールバー
  • コンポーネント
    • 写真などのグリッドリスト
    • カード
    • テーブル
    • ダイアログ
    • リスト
  • フォームアイテム
    • ボタン
    • チェックボックス
    • ラジオボタン
    • ドロップダウンメニュー
    • スライダー
    • トグルスイッチ(オン/オフ)
    • 数値入力(+/-)
    • 日付と時間ピッカー
  • 小物
    • ツールチップ
    • ローディング
    • アイコン
    • アイコンのリプレースメント(トークン/チップス)
    • アラートモーダル
  • その他
    • アニメーション
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment