全球樣式

我們的全域 CSS 包含實用的重設，以確保在各瀏覽器中維持一致的樣式。

字體大小

預設字體大小設定為瀏覽器樣式表的 100%，通常為 16 像素。這可確保與瀏覽器文字縮放或使用者設定的預設值相容。如果您使用 Foundation 的 Sass 版本，請編輯 $global-font-size 變數來變更基本字體大小。這可以是百分比值或像素值。

色彩

Foundation 擁有可協助使用的預設色彩盤。主要色彩用於互動式元素，例如連結和按鈕。次要、成功、警告和警示色彩用於為 UI 元素和動作提供更多背景。

主要

次要

成功

警告

警示

白色

淺灰色

中灰色

深灰色

黑色

變更色彩盤

如果您使用的是 Foundation 的 Sass 版本，您可以輕鬆地透過編輯設定檔中的變數來變更色彩盤。

語意色彩（主要、次要、成功、警告和警示）可以在 $foundation-palette 地圖中變更。此地圖中的鍵會由各種設定參照，以設定元件樣式和輸出替代類別名稱。

$foundation-palette: (
  "primary": #1779ba,
  "secondary": #767676,
  "success": #3adb76,
  "warning": #ffae00,
  "alert": #cc4b37,
);

如果您從 $foundation-palette 中移除預設鍵，請務必編輯設定檔中參照該色彩的任何變數。

命名色彩（白色、淺灰色、中灰色、深灰色和黑色）可以在其各自的變數中變更

$light-gray: #e6e6e6;
$medium-gray: #cacaca;
$dark-gray: #8a8a8a;
$black: #0a0a0a;
$white: #fefefe;

設定檔中的 @include add-foundation-colors; 行讓您可以使用下列 Sass 變數來參照色彩盤中的預設色彩

$primary-color
$secondary-color
$success-color
$warning-color
$alert-color

您也可以使用 Foundation 的 get-color() 函數來參照色彩盤中的任何色彩。此函數讓您可以存取您已新增至色彩盤中的自訂色彩。

// Create a variable for my custom color.
$custom-color: get-color(custom);

Sass 參考

變數

此元件的預設樣式可以使用專案的設定檔中的這些 Sass 變數進行自訂。

名稱	類型	預設值	說明
`$global-font-size`	數字	`100%`	套用至 `<html>` 和 `<body>` 的字型大小屬性。我們預設使用 100%，因此值會從使用者的瀏覽器設定繼承。
`$global-width`	數字	`rem-calc(1200)`	您網站的整體寬度。由格線用來決定列寬。
`$global-lineheight`	數字	`1.5`	所有字型的預設行高。`$global-lineheight` 為 24px，而 `$global-font-size` 為 16px
`$foundation-palette`	地圖	`"primary": #1779ba "secondary": #767676 "success": #3adb76 "warning": #ffae00 "alert": #cc4b37`	用於按鈕、標示、連結等的色彩。必須永遠有一個稱為 `primary` 的色彩。
`$light-gray`	色彩	`#e6e6e6`	用於淺灰色 UI 項目的色彩。
`$medium-gray`	色彩	`#cacaca`	用於中灰色 UI 項目的色彩。
`$dark-gray`	色彩	`#8a8a8a`	用於深灰色 UI 項目的色彩。
`$black`	色彩	`#0a0a0a`	用於黑色使用者介面項目的顏色。
`$white`	色彩	`#fefefe`	用於白色使用者介面項目的顏色。
`$body-background`	色彩	`$white`	主體的背景顏色。
`$body-font-color`	色彩	`$black`	主體的文字顏色。
`$body-font-family`	清單	`'Helvetica Neue', Helvetica, Roboto, Arial, sans-serif`	主體的字型堆疊。
`$body-safe-padding`	布林值	`false`	設定為 `true` 以在非矩形裝置（例如有凹口的電話）上啟用主體的安全內距
`$body-antialiased`	布林值	`true`	設定為 `true` 以啟用反鋸齒字型，使用 `-webkit-font-smoothing` 和 `-moz-osx-font-smoothing` CSS 屬性。
`$global-margin`	數字	`1rem`	用於元件上外距的整體值。
`$global-padding`	數字	`1rem`	用於元件上內距的整體值。
`$global-position`	數字	`1rem`	用於元件上定位的整體值。
`$global-weight-normal`	關鍵字或數字	`normal`	用於一般字型的整體字重。
`$global-weight-bold`	關鍵字或數字	`bold`	用於粗體字型的整體字重。
`$global-radius`	數字	`0`	用於所有具有邊框半徑的元素的整體值。
`$global-menu-padding`	數字	`0.7rem 1rem`	用於所有選單樣式的整體值。可以在個別選單元件層級覆寫。
`$global-menu-nested-margin`		`1rem`	用於所有選單樣式的整體值。子選單的巢狀外距。
`$global-text-direction`	關鍵字	`ltr`	設定 CSS 的文字方向。可以是 `ltr` 或 `rtl`。
`$global-flexbox`	布林值	`true`	為支援的元件啟用彈性盒狀模型。
`$global-prototype-breakpoints`	布林值	`false`	如果適用，啟用原型設計的回應式中斷點
`$global-button-cursor`	關鍵字	`auto`	按鈕游標的值，預設為 `auto`
`$global-color-pick-contrast-tolerance`	數字	`0`	用於顏色選擇對比的整體容許誤差。