財団-グローバルスタイル
この章では、グローバルスタイルについて学習します。FoundationフレームワークのグローバルCSSには、ブラウザー間でスタイルが一貫していることを確認する便利なリセットが含まれています。
フォントのサイズ設定
ブラウザのスタイルシートのフォントサイズは、デフォルトで100％に設定されています。デフォルトのフォントサイズは16ピクセルに設定されています。フォントサイズに応じて、グリッドサイズが計算されます。明確なベースフォントサイズと影響を受けないグリッドブレークポイントを使用するには、$ rem-baseを$ global-font-size値に設定します。これはピクセル単位である必要があります。
色
リンクやボタンなどのインタラクティブな要素は、SASS変数$ primary-colorに由来するデフォルトの青の色合いを使用します。コンポーネントには、セカンダリ、アラート、成功、警告などの色を付けることもできます。詳細については、こちらを確認してください。
SASSリファレンス
変数
次の表に、プロジェクト_settings.scssのコンポーネントのデフォルトスタイルをカスタマイズするために使用されるSASS変数を示します。
| シニア番号 | 名前と説明 | タイプ | デフォルト値 |
|---|---|---|---|
| 1 | $global-width これは、サイトのグローバル幅を表します。グリッドの行幅を決定するために使用されます。 |
数 | rem-calc（1200） |
| 2 | $global-font-size <html>と<body>に適用されるフォントサイズを表します。デフォルトでは100％に設定されており、ユーザーのブラウザ設定値が継承されます。 |
数 | 100％ |
| 3 | $global-lineheight これは、すべてのタイプのデフォルトの線の高さを表します。$ global-lineheightは24pxですが、$ global-font-sizeは16pxに設定されています。 |
数 | 1.5 |
| 4 | $primary-color リンクやボタンなどのインタラクティブコンポーネントに色を付けます。 |
色 | ＃2199e8 |
| 5 | $secondary-color .secondaryクラスをサポートするコンポーネントで使用されます。 |
色 | ＃777 |
| 6 | $success-color .successクラスで使用した場合のポジティブステータスまたはアクションを表します。 |
色 | ＃3adb76 |
| 7 | $warning-color .warningクラスとともに使用した場合の注意ステータスまたはアクションを表します。 |
色 | ＃ffae00 |
| 8 | $alert-color .alertクラスとともに使用すると、否定的なステータスまたはアクションを表します。 |
色 | ＃ec5840 |
| 9 | $light-gray ライトグレーのUIアイテムに使用されます。 |
色 | ＃e6e6e6 |
| 10 | $medium-gray ミディアムグレーのUIアイテムに使用されます。 |
色 | #cacaca |
| 11 | $dark-gray ダークグレーのUIアイテムに使用されます。 |
色 | ＃8a8a8a |
| 12 | $black 黒のUIアイテムに使用されます。 |
色 | ＃0a0a0a |
| 13 | $white 白いUIアイテムに使用されます。 |
色 | #fefefe |
| 14 | $body-background 体の背景色を表します。 |
色 | $ white |
| 15 | $body-font-color 本文のテキストの色を表します。 |
色 | $ black |
| 16 | $body-font-family 本文のフォントのリストを表します。 |
リスト | 'Helvetica Neue'、Helvetica、Roboto、Arial、sans-serif |
| 17 | $body-antialiased アンチエイリアスタイプは、CSSプロパティ-webkit-font-smoothingおよび-moz-osx-font-smoothingを使用してこの属性をtrueに設定することで有効になります。 |
ブール値 | true |
| 18 | $global-margin これは、コンポーネントのグローバルマージン値を表します。 |
数 | 1レム |
| 19 | $global-padding コンポーネントのグローバルパディング値を表します。 |
数 | 1レム |
| 20 | $global-margin コンポーネント間で使用されるグローバルマージン値を表します。 |
数 | 1レム |
| 21 | $global-weight-normal 通常のタイプのグローバルフォントの太さを表します。 |
キーワードまたは番号 | 正常 |
| 22 | $global-weight-bold 太字のグローバルフォントの太さを表します。 |
キーワードまたは番号 | 大胆な |
| 23 | $global-radius これは、境界半径を持つすべての要素のグローバル値を表します。 |
数 | 0 |
| 24 | $global-text-direction CSSのテキスト方向をltrまたはrtlに設定します |
ltr |