Sample Page

sample

カラーサンプル

設定場所：setting.scss

$mainColor＝イメージカラー、$baseColor＝色違い背景などの薄目の色、$accentColor＝差し色

  • $mainColor

  • $baseColor

  • $accentColor

フォントサンプル

設定場所：common.scss、setting.scss
sans-serif＝飾りなし（例：ゴシック体）、serif＝飾りあり（例：明朝体）
日本語と英語の分をそれぞれ2種用意します。
足りない場合はmixinのif文の分岐を増やして対応してください。

  • @include sans-serif(jp);

  • sans-serif English

    @include sans-serif(en);

  • @include serif(jp);

  • serif English

    @include serif(en);

テキストサンプル

設定場所：setting.scss

共通の設定（$base）、サイズ違いに対応する設定（$size）があります。
この2種を統合して、デザイン違いに対応する設定をしています。
別のサイズやデザインがある場合は、それぞれのmixinのif文の分岐を増やして対応してください。

  • 文字サイズがMサイズで、line-heightが2

    @include txt_common(m,normal);

  • 文字サイズがLサイズで、font-weightが900でline-heightが2

    @include txt_common(l,black);

ボタンサンプル

設定場所：setting.scss
サイズやタイプは設定場所の記述を確認。

共通の基礎設定（$base）、サイズ（横幅や文字）違いに対応する設定（$size）があります。
この2種類を統合して、デザイン違いに対応する設定をしています。
別のサイズやデザインがある場合は、それぞれのmixinのif文の分岐を増やして対応してください。