Foundation-global-styles
財団-グローバルスタイル
この章では、_グローバルスタイル_について学習します。 FoundationフレームワークのグローバルCSSには、ブラウザー間でスタイリングの一貫性を保証する便利なリセットが含まれています。
フォントサイズ
ブラウザのスタイルシートのフォントサイズは、デフォルトで100％に設定されています。 デフォルトのフォントサイズは16ピクセルに設定されています。 フォントサイズに応じて、グリッドサイズが計算されます。 明確な基本フォントサイズと影響を受けないグリッドブレークポイントを設定するには、_ $ rem-base_を_ $ global-font-size_値に設定します。これはピクセル単位である必要があります。
色
links_や_buttons_などのインタラクティブな要素は、SASS変数 $ primary-color_からのデフォルトの青の影を使用します。 コンポーネントには、_secondary、alert、success、warning_などの色を付けることもできます。 詳細については、リンクを確認してください：/foundation/global_styles_color [こちら]。
SASSリファレンス
変数
次の表に、プロジェクトの__settings.scss_のコンポーネントのデフォルトスタイルをカスタマイズするために使用されるSASS変数を示します。
| Sr.No. | Name & Description | Type | Default Value |
|---|---|---|---|
| 1 |
$global-width サイトのグローバル幅を表します。 グリッドの行幅を決定するために使用されます。 |
Number | rem-calc(1200) |
| 2 |
$global-font-size _ <html> および <body> _に適用されるフォントサイズを表します。 デフォルトでは100％に設定されており、ユーザーのブラウザー設定値が継承されます。 |
Number | 100% |
| 3 |
$global-lineheight すべてのタイプのデフォルトの行の高さを表します。 _ $ global-lineheight_は24pxで、_ $ global-font-size_は16pxに設定されています。 |
Number | 1.5 |
| 4 |
$primary-color リンクやボタンなどのインタラクティブなコンポーネントに色を付けます。 |
Color | #2199e8 |
| 5 |
$secondary-color _.secondary_クラスをサポートするコンポーネントで使用されます。 |
Color | #777 |
| 6 |
$success-color _.success_クラスとともに使用した場合の肯定的なステータスまたはアクションを表します。 |
Color | #3adb76 |
| 7 |
$warning-color _.warning_クラスとともに使用した場合の注意ステータスまたはアクションを表します。 |
Color | #ffae00 |
| 8 |
$alert-color _.alert_クラスとともに使用すると、ネガティブなステータスまたはアクションを表します。 |
Color | #ec5840 |
| 9 |
$light-gray ライトグレーのUIアイテムに使用されます。 |
Color | #e6e6e6 |
| 10 |
$medium-gray 中程度のグレーのUIアイテムに使用されます。 |
Color | #cacaca |
| 11 |
$dark-gray 濃い灰色のUIアイテムに使用されます。 |
Color | #8a8a8a |
| 12 |
$black 黒のUIアイテムに使用されます。 |
Color | #0a0a0a |
| 13 |
$white 白いUIアイテムに使用されます。 |
Color | #fefefe |
| 14 |
$body-background ボディの背景色を表します。 |
Color | $white |
| 15 |
$body-font-color ボディのテキストの色を表します。 |
Color | $black |
| 16 |
$body-font-family 本文のフォントのリストを表します。 |
List | 'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif |
| 17 |
$body-antialiased アンチエイリアスタイプは、CSSプロパティ_-webkit-font-smoothing_および_-moz-osx-font-smoothing_を使用してこの属性を_true_に設定することにより有効になります。 |
Boolean | true |
| 18 |
$global-margin コンポーネントのグローバルマージン値を表します。 |
Number | 1rem |
| 19 |
$global-padding コンポーネントのグローバルパディング値を表します。 |
Number | 1rem |
| 20 |
$global-margin コンポーネント間で使用されるグローバルマージン値を表します。 |
Number | 1rem |
| 21 |
$global-weight-normal 通常のタイプのグローバルフォントウェイトを表します。 |
Keyword or Number | normal |
| 22 |
$global-weight-bold ボールド体のグローバルフォントの太さを表します。 |
Keyword or Number | bold |
| 23 |
$global-radius 境界半径を持つすべての要素のグローバル値を表します。 |
Number | 0 |
| 24 |
$global-text-direction CSSのテキストの方向を_ltr_または_rtl_に設定します |
ltr |
