Foundation - 快速指南

上一頁
下一頁

Foundation - 概述

什麼是 Foundation？

Foundation 是一個用於設計美觀響應式網站的高階前端框架。它適用於所有型別的裝置，並提供 HTML、CSS 和 JavaScript 外掛。

Foundation 最初是 ZURB 在 2008 年建立的內部樣式指南。ZURB 是一家位於加利福尼亞州坎貝爾的產品設計公司。它於 2011 年 10 月釋出了 Foundation 2.0 開源版本。Foundation 的最新版本是 6.1.1，於 2015 年 12 月釋出。

為什麼要使用 Foundation？

  • 它透過使用 Sass 編譯器提供更快的開發速度，Sass 編譯器比預設編譯器快得多。

  • 它透過定價表、開關、Joyride、範圍滑塊、燈箱等豐富您的網站。

  • 它帶有 Grunt 和 Libsass 等開發包，可實現更快的編碼和控制。

  • Foundation for Sites 為您提供 HTML、CSS 和 JS，以便快速構建網站。

  • 電子郵件框架為您提供響應式 HTML 電子郵件，可在任何裝置上閱讀。

  • Foundation for Apps 允許您構建完全響應式的 Web 應用程式。

特性

  • 它具有強大的網格系統和一些有用的 UI 元件以及酷炫的 JavaScript 外掛。

  • 它提供響應式設計，適用於所有型別的裝置。

  • 它針對移動裝置進行了最佳化，並真正支援移動優先方法。

  • 它提供 HTML 模板，這些模板是可定製和可擴充套件的。

優勢

  • 一旦您掌握了 HTML 和 CSS 的基本知識，它就很容易學習。

  • 您可以自由使用 Foundation，因為它是一個開源專案。

  • 它為您提供了一系列模板，幫助您立即開始開發網站。

  • Foundation 支援 Sass 和 Compass 等預處理器，從而使開發速度更快。

缺點

  • 由於 Twitter Bootstrap 的流行，Twitter Bootstrap 的社群支援優於 Foundation。

  • 對於初學者來說，學習和利用預處理器支援可能需要一些時間。

  • 缺乏更廣泛的支援，例如 QA 網站和論壇來解決問題。

  • 與其他框架相比，Foundation 的主題較少。

Foundation - 安裝

在本章中，我們將討論如何在網站上安裝和使用 Foundation。

下載 Foundation

當您開啟連結 foundation.zurb.com 時，您將看到如下所示的螢幕 -

Foundation Installation

點選下載 Foundation 6按鈕，您將被重定向到另一個頁面。

在這裡您可以看到四個按鈕 -

Foundation Installation

  • 下載全部 - 如果您希望擁有框架中的所有內容（即普通 CSS 和 JS），則可以下載此版本的 Foundation。

  • 下載基本元件 - 它將下載包含網格、按鈕、排版等的基本版本。

  • 自定義下載 - 這將下載 Foundation 的自定義庫，其中包括元素並定義列的大小、字型大小、顏色等。

  • 透過 SCSS 安裝 - 這將重定向您到文件頁面以安裝 Foundation for Sites。

您可以點選下載全部按鈕獲取框架中的所有內容，即 CSS 和 JS。由於檔案包含框架中的所有內容，因此您無需每次都為單個功能包含單獨的檔案。在編寫本教程時，下載了最新版本（Foundation 6）。

檔案結構

下載 Foundation 後，解壓縮 ZIP 檔案，您將看到以下檔案/目錄結構 -

Foundation Installation

如您所見，有編譯後的 CSS 和 JS (foundation.*)，以及編譯和壓縮後的 CSS 和 JS (foundation.min.*)。

在本教程中，我們使用的是庫的 CDN 版本。

HTML 模板

使用 Foundation 的基本 HTML 模板如下所示 -

線上演示 
<!DOCTYPE html>
<html>
   <head>
      <title>Foundation Template</title>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">

      <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/css/foundation.min.css" crossorigin="anonymous">

      <!-- Compressed JavaScript -->
      <script src="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.5.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

   </head>

   <body>
      <h1>Hello, world!</h1>
   </body>
</html>

以下部分詳細描述了上述程式碼。

HTML5 文件型別

Foundation 包含某些 HTML 元素和 CSS 屬性，這些屬性需要使用 HTML5 文件型別。因此，以下 HTML5 文件型別程式碼應包含在使用 Foundation 的所有專案開頭。

<!DOCTYPE html>
<html>
   ....
</html>

移動優先

它有助於響應移動裝置。您需要將視口元標記包含到<head>元素中，以確保在移動裝置上正確呈現和觸控縮放。

<meta name = "viewport" content = "width = device-width, initial-scale = 1">

  • width屬性控制裝置的寬度。將其設定為 device-width 將確保它在各種裝置（手機、桌上型電腦、平板電腦…）上正確呈現。

  • initial-scale = 1.0確保載入時，您的網頁將以 1:1 的比例呈現，並且不會應用任何縮放。

元件初始化

Foundation 中的元件（如模態框和下拉選單）需要 jQuery 指令碼。

<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/foundation.min.js">
</script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/foundation/6.0.1/js/vendor/jquery.min.js">
</script>

輸出

讓我們執行以下步驟來檢視上面給出的程式碼是如何工作的 -

  • 將上面給出的 html 程式碼儲存為firstexample.html檔案。

  • 在瀏覽器中開啟此 HTML 檔案，將顯示如下所示的輸出。

Foundation - 初始專案

您可以使用一些可用的模板開始您的專案開發，這些模板可以透過 Yeti Launch 或Foundation CLI安裝。您可以使用這些模板開始新專案，並使用Gulp構建系統處理 Sass、JavaScript、複製檔案等。

基本模板

基本模板類似於 SASS 模板，它包含扁平的目錄結構，並且僅編譯 SASS 檔案，在僅使用 SASS 時使用此簡單模板是不錯的選擇。您可以使用 Yeti Launch 或使用以下命令使用 Foundation CLI 使用基本模板 -

$ foundation new --framework sites --template basic

要設定此模板，首先執行npm install、bower install，並使用npm start命令執行它。您也可以從Github下載模板檔案。

ZURB 模板

它結合了 CSS/SCSS、JavaScript、Handlebars 模板、標記結構、影像壓縮，並使用 SASS 處理。您可以使用Yeti Launch或使用以下命令使用Foundation CLI使用 ZURB 模板 -

$ foundation new --framework sites --template zurb

要執行此模板，請按照基本模板中指定的相同步驟操作。您也可以從Github下載模板檔案。

資產複製

您可以使用Gulp複製src/assets資料夾中的內容，其中assets將是您的專案資料夾。這裡需要注意的是，SASS 檔案、JavaScript 檔案和影像將不會包含在此資產複製過程中，因為它們將有自己的過程來複制內容。

頁面編譯

您可以在位於src/目錄下的三個資料夾（pages、layouts和partials）下建立 HTML 頁面。您可以使用Panini平面檔案編譯器，該編譯器透過使用模板、頁面、HTML 部分為頁面建立佈局。此過程可以使用Handlebars模板語言完成。

SASS 編譯

您可以使用Libsass將 SASS 編譯為 CSS，主 SASS 檔案將儲存在src/assets/scss/app.scss下，新建立的 SASS 部分也將儲存在此資料夾中。CSS 的輸出將像普通的 CSS 一樣，採用巢狀樣式。您可以使用clean-css壓縮 CSS，並使用UnCSS從樣式表中刪除未使用的 CSS。

JavaScript 編譯

JavaScript 檔案將儲存在src/assets/js資料夾下，並且所有依賴項都與app.js檔案捆綁在一起。檔案將按以下順序捆綁在一起 -

  • Foundation 的依賴項。
  • 檔案將儲存在src/assets/js資料夾下。
  • 這些檔案捆綁在一個名為app.js的檔案中。

影像壓縮

預設情況下，所有影像都將儲存在dist資料夾下的assets/img資料夾下。您可以在構建用於生產環境時使用gulp-imagemin壓縮影像，它支援 JPEG、PNG、SVG 和 GIF 檔案。

BrowserSync

您可以建立一個BrowserSync伺服器，該伺服器在https://:8000提供同步瀏覽器測試，並能夠使用此 URL 檢視編譯後的模板。當您的伺服器正在執行時，儲存檔案時頁面會自動重新整理，並且您可以在即時工作時檢視對頁面的更改。

Foundation - 元件庫

描述

它包含 Foundation 元素，以便與 Web 應用程式順暢地協作。下表列出了一些 Foundation 元件 -

序號 元件及描述
1 手風琴

手風琴包含垂直選項卡，用於網站上展開和摺疊大量資料。
2 手風琴選單

它顯示帶有手風琴效果的可摺疊選單。
3 徽章

徽章類似於標籤，用於突出顯示資訊，例如重要註釋和訊息。
4 麵包屑

它指定網站在導航層次結構中的當前位置。
5 按鈕

Foundation 支援具有不同樣式的標準按鈕。
6 提示框

提示框是一個元素，可用於放置內容。
7 關閉按鈕

它用於關閉警報框。
8 層疊選單

層疊選單將巢狀列表更改為垂直層疊選單。
9 下拉選單

下拉選單用於以列表格式顯示連結。
10 下拉窗格

單擊按鈕時，下拉窗格會顯示內容。
11 彈性影片

它用於在網頁中建立影片物件。
12 浮動類

它用於向 HTML 元素新增實用程式類。
13 表單

它用於建立表單佈局以收集使用者輸入。
14 標籤

標籤是內聯樣式，用於定義輸入元素的標籤。
15 媒體物件

它用於新增媒體物件，例如影像、影片、部落格評論等，這些物件可以放置在內容塊的左側或右側。
16 選單

它提供對網站中不同模式的訪問。
17 分頁

它是一種導航型別，將內容劃分為一系列相關的頁面。
18 滑塊

它透過拖動手柄來指定值的範圍。
19 開關

它用於在開和關狀態之間切換。
20 表格

它以行和列格式表示資料。
21 選項卡

它是一個基於導航的選項卡，用於在不同的窗格中顯示內容，而無需離開頁面。
22 縮圖

它將影像樣式化為縮圖形狀。
23 標題欄

它用於顯示使用者使用的當前螢幕以及其他選單項。
24 工具提示

當您將滑鼠懸停在連結上時，它是一個描述資訊的小彈出框。
25 頂部欄

它用於在網站中建立導航標題。
26 軌道

它是一個簡單而強大的滑塊，使用orbit類滑動元素。

Foundation - 全域性樣式

在本章中，我們將學習全域性樣式。Foundation 框架的全域性 CSS 包括有用的重置，以確保樣式在不同瀏覽器中保持一致。

字型大小

瀏覽器樣式表中的字型大小預設設定為 100%。預設字型大小設定為 16 畫素。根據字型大小計算網格大小。為了擁有不同的基本字型大小和不受影響的網格斷點，請將$rem-base設定為$global-font-size值，該值必須以畫素為單位。

顏色

連結和按鈕等互動式元素使用來自 SASS 變數$primary-color的預設藍色陰影。元件還可以具有顏色，例如：secondary、alert、success 和 warning。有關更多資訊，請參見此處。

SASS 參考

變數

下表列出了 SASS 變數，這些變數用於自定義專案_settings.scss中元件的預設樣式。

序號 名稱和描述 型別 預設值
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

透過將此屬性設定為true並使用 CSS 屬性-webkit-font-smoothing和-moz-osx-font-smoothing來啟用抗鋸齒型別。

 布林值 true
18

$global-margin

它表示元件上的全域性邊距值。

 數字 1rem
19

$global-padding

它表示元件上的全域性填充值。

 數字 1rem
20

$global-margin

它表示元件之間使用的全域性邊距值。

 數字 1rem
21

$global-weight-normal

它表示普通型別的全域性字型粗細。

 關鍵字或數字 normal
22

$global-weight-bold

它表示粗體的全域性字型粗細。

 關鍵字或數字 bold
23

$global-radius

它表示所有具有邊框半徑的元素的全域性值。

 數字 0
24

$global-text-direction

它將 CSS 的文字方向設定為ltr或rtl

 ltr

Foundation - Sass

SASS 有助於使 Foundation 中的程式碼更靈活和可自定義。

相容性

要為 foundation 安裝基於 SASS 的版本，應在 Windows 上安裝 Ruby。Foundation 可以使用 Ruby SASS 和 libsass 編譯。我們建議使用node-sass 3.4.2+版本編譯 SASS。

需要 Autoprefixer

Autoprefixer 處理 SASS 檔案。gulp-autoprefixer用於構建過程。以下 autoprefixer 設定用於獲得正確的瀏覽器支援。

autoprefixer ({
   browsers: ['last 2 versions', 'ie >= 9', 'and_chr >= 2.3']
});

載入框架

我們可以使用 NPM 安裝框架檔案。使用命令列介面 (CLI)，我們可以編譯 Sass 檔案。以下是載入框架的命令：

npm install foundation-sites --save

執行上述命令列程式碼後，您將獲得以下行：

Foundation sass

手動編譯

框架檔案可以根據您的構建過程新增為匯入路徑，但路徑將相同packages_folder/foundation-sites/scss。@import語句包含在foundation-sites.scss檔案的頂部。給定程式碼中的下一行在調整 CSS 輸出部分中進行了說明。

@import 'foundation';
@include foundation-everything;

使用編譯後的 CSS

您可以包含預編譯的 CSS 檔案。有兩種型別的 CSS 檔案，即縮小版和未縮小版。縮小版用於生產，未縮小版用於直接編輯框架 CSS。

<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.css">
<link rel = "stylesheet" href = "node_modules/foundation-sites/dist/foundation-sites.min.css">

調整 CSS 輸出

對於各種元件，Foundation 輸出包含許多類。它用於控制框架的 CSS 輸出。新增以下單行程式碼以一次包含所有元件。

@include foundation-everything;

以下是當您在 scss 檔案中編寫上述程式碼時匯入的元件列表。可以註釋掉不需要的元件。您可以在Your_folder_name/node_modules/foundation-sites/scss/foundation.scss檔案中檢視以下程式碼行。

@import 'foundation';

@import 'grid/grid';
@import 'typography/typography';
@import 'forms/forms';
@import 'components/visibility';
@import 'components/float';
@import 'components/button';
@import 'components/button-group';
@import 'components/accordion-menu';
@import 'components/accordion';
@import 'components/badge';
@import 'components/breadcrumbs';
@import 'components/callout';
@import 'components/close-button';
@import 'components/drilldown';
...
...
...
//so on....

設定檔案

整個 foundation 專案（即_settings.scss）中都包含一個設定檔案。如果您使用 Yeti Launch 或 CLI 建立 Foundation for Sites 專案，則可以在 src/assets/scss/下找到設定檔案。

我們已使用 npm 安裝了 Foundation，因此您可以在your_folder_name/node_modules/foundation-sites/scss/settings/_settings.scss下找到包含的設定檔案。您可以將其移到您自己的 Sass 檔案中以進行操作。

如果您無法使用變數自定義，則可以編寫自己的 CSS。以下是一組變數，它們更改按鈕的預設樣式。

$button-padding: 0.85em 1em;
$button-margin: 0 $global-margin $global-margin 0;
$button-fill: solid;
$button-background: $primary-color;
$button-background-hover: scale-color($button-background, $lightness: -15%);
$button-color: #fff;
$button-color-alt: #000;
$button-radius: $global-radius;

$button-sizes: (
   tiny: 0.6rem,
   small: 0.75rem,
   default: 0.9rem,
   large: 1.25rem,
);
$button-opacity-disabled: 0.25;

Foundation - JavaScript

在本章中，我們將學習JavaScript。在 Foundation 中設定 JavaScript 很容易；您只需要 jQuery。

JavaScript 安裝

您可以使用 ZIP 下載、包管理器或 CDN 獲取 Foundation JavaScript 檔案。在您的程式碼中，您可以提供指向 jQuery 和 Foundation 的連結作為<script>標記，放置在<body>的結束標記之前，並檢查 jQuery 載入後是否載入了 Foundation。有關更多資訊，請點選此處。

檔案結構

當您透過命令列安裝 Foundation 時，Foundation 外掛會下載為單獨的檔案，例如foundation.tabs.js、foundation.dropdownMenu.js、foundation.slider.js等等。所有這些檔案都組合到foundation.js中，一次提供所有外掛。如果您希望使用某些外掛，則應首先載入foundation.core.js。

例如：

<script src = "js/jquery.min.js"></script>
<script src = "js/foundation.core.js"></script>
<script src = "js/foundation.tabs.js"></script>

某些外掛可能需要特定的實用程式庫，這些庫隨 Foundation 安裝一起提供。您可以在下一章JavaScript 實用程式中詳細瞭解特定外掛的要求。

載入單個檔案會建立網路開銷，特別是對於移動使用者而言。為了加快頁面載入速度，建議使用grunt或gulp。

初始化

foundation()函式用於一次初始化所有 Foundation 外掛。

例如：

(document).foundation();

使用外掛

使用資料屬性，外掛連線到 HTML 元素，因為它們與外掛的名稱匹配。一個 HTML 元素一次只能有一個外掛，儘管大多數外掛可以巢狀在其他外掛中。例如，透過新增data-tooltip建立工具提示連結。有關更多資訊，請點選此處。

配置外掛

可以使用外掛的配置設定來自定義外掛。例如，您可以設定手風琴向上和向下滑動的速度。可以使用外掛的DEFAULTS屬性全域性更改外掛設定。有關更多資訊，請點選此處。

在頁面載入後新增外掛

當新的 HTML 新增到 DOM 中時，這些元素上的任何外掛預設情況下都不會被初始化。您可以透過重新呼叫.foundation() 函式來檢查新的外掛。

例如：

$.ajax('assets/partials/kitten-carousel.html', function(data) {
   $('#kitten-carousel'</span>).html(data).foundation();
});

程式設計使用

在 JavaScript 中，外掛可以透過程式設計方式建立，每個外掛都是全域性Foundation 物件的類，具有一個建構函式，該建構函式需要兩個引數，例如元素和物件。

var $accordion = new Foundation.Accordion($('#accordion'), {
   slideSpeed: 600, multiExpand: true
});

大多數外掛都提供了公共 API，允許您透過 JavaScript 操作它。您可以檢視外掛的文件，瞭解可用的函式和方法，以便輕鬆呼叫。

例如：

$('.tooltip').foundation('destroy');
// this will destroy all Tooltips on the page.

$('#reveal').foundation('open');
// this will open a Reveal modal with id `reveal`.

$('[data-tabs]').eq(0).foundation('selectTab', $('#example'));
// this will change the first Tabs on the page to whatever panel you choose.

  • 您可以選擇任何 jQuery 選擇器，如果選擇器包含多個外掛，則它們都將具有相同的被呼叫方法。

  • 可以像傳遞引數給 JavaScript 一樣傳遞引數。

  • 以下劃線(_)為字首的方法被認為是內部 API 的一部分，這意味著，它們可能會在沒有警告的情況下中斷、更改甚至消失。

事件

每當特定函式完成時，DOM 都會觸發一個事件。例如，每當選項卡更改時，就可以監聽並對其建立返回響應。每個外掛都可以觸發事件列表，這些事件將在外掛文件中記錄。在 Foundation 6 中，回撥外掛已被移除，必須作為事件監聽器使用。

例如：

$('[data-tabs]').on('change.zf.tabs', function() {
   console.log('Tabs are changed!');
});

Foundation - JavaScript 工具

Foundation 包含用於新增常用功能的 JavaScript 實用程式。它非常有用且易於使用。此 JavaScript 實用程式庫可以在Your_folder_name/node_modules/foundation-sites/js 資料夾中找到。

盒子

  • Foundation.Box 庫包含幾個方法。

  • js/foundation.util.box.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • 兩種方法都可以傳遞 jQuery 物件或普通 JavaScript 元素。

var dims = Foundation.Box.GetDimensions(element);

返回的物件指定了元素的尺寸，如下所示：

{
   height: 54,
   width: 521,
   offset: {
      left: 198,
      top: 1047
   },

   parentDims: {
      height: ...    //The same format is share for parentDims and windowDims as the element dimensions.
   },

   windowDims: {
      height: ...
   }
}

  • 包含ImNotTouchingYou 函式。

  • 根據傳遞的元素，返回一個布林值，該值表示與視窗邊緣或可選或父元素的衝突。

  • 下面給出的行中指定的兩個選項，即 leftAndRightOnly、topAndBottomOnly，用於僅在一個軸上識別碰撞。

var clear = Foundation.Box.ImNotTouchingYou (
   element [, parent, leftAndRightOnly, topAndBottomOnly]);

鍵盤

  • Foundation.Keyboard 中有很多方法，可以幫助簡化鍵盤事件互動。

  • js/foundation.util.keyboard.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • 物件Foundation.Keyboard.keys 包含鍵值對，這些鍵在框架中更頻繁地使用。

  • 每當按下鍵時，都會呼叫Foundation.Keyboard.parseKey 來獲取字串。這有助於管理您自己的鍵盤輸入。

以下程式碼用於查詢給定$element 內的所有可聚焦元素。因此，您無需編寫任何函式和選擇器。

var focusable = Foundation.Keyboard.findFocusable($('#content'));

  • handleKey 函式是此庫的主要函式。

  • 此方法用於處理鍵盤事件；每當任何外掛向實用程式註冊時，都可以呼叫它。

Foundation.Keyboard.register('pluginName', {
   'TAB': 'next'
});

...//in event callback
Foundation.Keyboard.handleKey(event, 'pluginName', {
   next: function(){
      //do stuff
   }
});

當您想使用自己的鍵繫結時，可以呼叫Foundation.Keyboard.register 函式。

媒體查詢

  • MediaQuery 庫是所有響應式 CSS 技術的支柱。

  • js/foundation.util.mediaQuery.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • Foundation.MediaQuery.atLeast('large') 用於檢查螢幕是否至少與斷點一樣寬。

  • Foundation.MediaQuery.get('medium') 獲取斷點的媒體查詢。

  • Foundation.MediaQuery.queries 是媒體查詢陣列，Foundation 用於斷點。

  • Foundation.MediaQuery.current 是當前斷點大小的字串。

Foundation.MediaQuery.get('medium');
Foundation.MediaQuery.atLeast('large');
Foundation.MediaQuery.queries;
Foundation.MediaQuery.current;

以下程式碼在視窗上廣播媒體查詢更改。

$(window).on('changed.zf.mediaquery', function(event, newSize, oldSize){});

運動和移動

  • Foundation.Motion javascript 類似於 Motion UI 庫，該庫包含在 Foundation 6 中。它用於建立自定義 CSS 過渡和動畫。

  • js/foundation.util.motion.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • Foundation.Move 用於使 CSS3 支援的動畫簡單而優雅。

  • requestAnimationFrame(); 方法告訴瀏覽器執行動畫；它請求在瀏覽器執行下一個重繪之前呼叫您的動畫函式。

Foundation.Move(durationInMS, $element, function() {
   //animation logic
});

動畫完成後，將觸發finished.zf.animate。

計時器和影像載入

Orbit 使用兩者，即函式計時器和影像載入。js/foundation.util.timerAndImageLoader.js 是指令碼檔名，在編寫程式碼時可以包含它。

var timer = new Foundation.Timer($element, {duration: ms, infinite: bool}, callback);

影像載入方法在影像完全載入時在您的 jQuery 集合中執行回撥函式。

Foundation.onImagesLoaded($images, callback);

觸控

  • 這些方法用於向元素新增偽拖動事件和滑動。

  • js/foundation.util.touch.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • addTouch 方法用於在 Slider 外掛中將元素繫結到移動裝置的觸控事件。

  • spotSwipe 方法用於在 Orbit 外掛中將元素繫結到移動裝置的滑動事件。

$('selector').addTouch().on('mousemove', handleDrag);

$('selector').spotSwipe().on('swipeleft', handleLeftSwipe);

觸發器

  • 它為選定的元素觸發指定的事件。

  • js/foundation.util.triggers.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • 觸發器在許多 Foundation 外掛中使用。

$('selector').on('open.zf.trigger', handleOpen);
$('selector').on('close.zf.trigger', handleClose);
$('selector').on('toggle.zf.trigger', handleToggle);

此庫中使用了以下兩種方法，即調整大小和滾動。

  • resize() 方法在發生調整大小事件時觸發調整大小事件。

  • scroll() 方法在發生滾動事件時觸發滾動事件。

$('#someId').on('scrollme.zf.trigger', handleScroll);
$('#someId').on('resizeme.zf.trigger', handleResize);

其他

  • Foundation 在核心庫中包含一些功能，這些功能在許多地方使用。

  • js/foundation.core.js 是指令碼檔名，在編寫程式碼時可以包含它。

  • Foundation.GetYoDigits([number, namespace]) 返回一個帶名稱空間的隨機 base-36 uid。預設情況下，它返回長度為 6 個字元的字串。

  • Foundation.getFnName(fn) 返回 JavaScript 函式名稱。

  • Foundation.transitionend 在 CSS 過渡完成後發生。

Foundation - 媒體查詢

媒體查詢是 CSS3 模組，其中包含媒體功能（如寬度、高度、顏色）並根據指定的螢幕解析度顯示內容。

Foundation 使用以下媒體查詢建立分解範圍：

  • 小型 - 用於任何螢幕。

  • 中型 - 用於 640 畫素及更寬的螢幕。

  • 大型 - 用於 1024 畫素及更寬的螢幕。

您可以使用斷點類更改螢幕大小。例如，您可以對小型螢幕使用.small-6 類，對中型螢幕使用.medium-4 類，如下面的程式碼片段所示：

<div class = "row">
   <div class = "small-6 medium-4 columns"></div>
   <div class = "small-6 medium-8 columns"></div>
</div>

更改斷點

如果您的應用程式使用 Foundation 的 SASS 版本，則可以更改斷點。您可以將斷點名稱放在設定檔案中的$breakpoints 變數下，如下所示：

$breakpoints: (
   small: 0px,
   medium: 640px,
   large: 1024px,
   xlarge: 1200px,
   xxlarge: 1440px,
);

您可以透過修改$breakpoint-classes 變數來更改設定檔案中的斷點類。如果要在 CSS 中使用.large 類，則將其新增到列表的末尾，如下所示：

$breakpoints-classes: (small medium large);

假設您想在 CSS 中使用.xlarge 類，然後將此類新增到列表的末尾，如下所示：

$breakpoints-classes: (small medium large xlarge);

SASS

斷點混合

  • 您可以使用breakpoint() 混合以及@include編寫媒體查詢。

  • 使用down 或only 關鍵字以及斷點值來更改媒體查詢的行為，如下面的程式碼格式所示：

.class_name {
   // code for medium screens and smaller
   @include breakpoint(medium down) { }

   // code for medium screens only
   @include breakpoint(medium only) { }
}

您可以使用三個媒體查詢portrait、landscape 和retina 來表示裝置方向或畫素密度，它們不是基於寬度的媒體查詢。

斷點函式

  • 您可以使用內部函式使用breakpoint() 混合的功能。

  • breakpoint() 功能可以直接用於編寫自己的媒體查詢：

@media screen and #{breakpoint(medium)} {
   // code for medium screens and up styles
}

JavaScript

使用媒體查詢

  • Foundation JavaScript 提供MediaQuery.current 函式來訪問Foundation.MediaQuery 物件上的當前斷點名稱，如下所示：

Foundation.MediaQuery.current

  • MediaQuery.current 函式顯示small、medium、large 作為當前斷點名稱。

  • 您可以使用MediaQuery.get 函式獲取斷點的媒體查詢，如下所示：

Foundation.MediaQuery.get('small')

Sass 參考

變數

下表列出了可用於自定義元件預設樣式的 SASS 變數：

序號 名稱和描述 型別 預設值
1

$breakpoints

這是一個斷點名稱，可用於使用breakpoint() 混合編寫媒體查詢。

 對映

small: 0px

medium: 640px

large: 1024px

xlarge: 1200px

xxlarge: 1440px
2

$breakpoint-classes

您可以透過修改$breakpoint-classes 變數來更改 CSS 類輸出。

 列表 small medium large

混合

混合建立一組樣式以構建 Foundation 元件的 CSS 類結構。

斷點

它使用breakpoint() 混合建立媒體查詢，幷包括以下活動：

  • 如果傳遞字串，則混合在$breakpoints 對映中搜索字串並建立媒體查詢。

  • 如果您使用畫素值，則使用$rem-base將其轉換為 em 值。

  • 如果傳遞 rem 值，則將其單位更改為 em。

  • 如果您使用 em 值，則可以按原樣使用它。

下表指定了斷點使用的引數：

序號 名稱和描述 型別 預設值
1

$value

它使用斷點名稱、px、rem 或 em 值處理值。

 關鍵字或數字 無

函式

斷點

它使用breakpoint() 混合建立與匹配輸入值相符的媒體查詢。

下表指定了斷點使用的可能的輸入值：

序號 名稱和描述 型別 預設值
1

$val

它使用斷點名稱、px、rem 或 em 值處理值。

 關鍵字或數字 small

JavaScript 參考

函式

有兩種型別的函式：

  • .atLeast - 它檢查螢幕。它必須至少與斷點一樣寬。

  • .get - 用於獲取斷點的媒體查詢。

下表指定了上述函式使用的引數：

序號 名稱和描述 型別
1

size

它分別檢查並獲取指定函式的斷點名稱。

 字串

Foundation - 網格系統

描述

Foundation 網格系統透過頁面擴充套件到 12 列。網格系統用於透過一系列包含內容的行和列來建立頁面佈局。

網格選項

下表簡要說明了 Foundation 網格系統在多種裝置中的工作原理。

小型裝置 手機（<640px） 中型裝置 平板電腦（>=640px） 大型裝置 筆記型電腦和桌上型電腦（>=1200px）
網格行為 始終水平 開始時摺疊，在斷點以上水平

 開始時摺疊，在斷點以上水平
類名字首 .small-* .medium-* .large-*
列數 12 12 12
巢狀 是 是 是
偏移量 是 是 是
列排序 是 是 是

Foundation 網格的基本結構

以下是 Foundation 網格的基本結構：

<div class = "row">
   <div class = "small-*"></div>
   <div class = "medium-*"></div>
   <div class = "large-*"></div>
</div>

<div class = "row">
   ...
</div>

  • 首先，建立一個 row 類來建立水平方向的列組。

  • 內容應放置在列中，並且只有列可以作為行的直接子元素。

  • 網格列是透過指定您希望跨越的 12 列中的列數來建立的。例如，對於四列相等的列，我們將使用 .large-3

以下是 Foundation 網格系統中使用的三個類：

序號 基本網格類及描述
1 大型

large-* 類用於大型裝置。
2 中等

medium-* 類用於中等裝置。
3 小型

small-* 類用於小型裝置。

高階網格

以下是 Foundation 中使用的高階網格格式。

序號 高階網格及描述
1 組合列/行

column 和 row 類用於同一元素，以獲取全寬列用作容器。
2 巢狀

我們可以在另一個列內巢狀網格列。
3 偏移量

使用 large-offset-* 或 small-offset-* 類，您可以將列向右移動。
4 不完整的行

當行不包含多達 12 列的列時，Foundation 會自動將最後一個元素浮動到右側。
5 摺疊/展開行

使用媒體查詢大小，將摺疊和展開類包含到行元素中以顯示填充。
6 居中的列

透過在列中包含類 small-centered，您可以使列位於中心。
7 源排序

源排序類用於在斷點之間切換列。
8 塊網格

塊網格用於拆分內容。

語義化構建

使用一組 SASS 混合宏，生成一個用於構建您自己的語義網格的網格 CSS。更多資訊請 點選此處

SASS 參考

以下是 Foundation 中使用的網格 SASS 參考。

序號 基本網格及描述
1 變數

使用 sass 變數，我們可以修改此元件的預設樣式。
2 混合

最終的 CSS 輸出是使用混合宏構建的。

Foundation - Flex 網格

網格依賴於 flex 顯示屬性。它包含許多可與 flexbox 一起使用的功能，例如自動堆疊、源排序、垂直對齊和水平對齊。

瀏覽器支援

Flex 網格在 Chrome、Firefox、Internet Explorer 10+、Safari 6+、Android 4+ 和 iOS 7+ 中受支援。

下表描述了 Flex 網格的功能及其描述。

序號 功能及描述
1 匯入

它包括 Flex 網格的匯出混合宏，以使用預設 CSS。
2 基礎

Flex 網格結構類似於浮動網格。
3 高階尺寸調整

如果列中不包含尺寸調整類，則它會自行擴充套件並填充列中剩餘的空間。
4 響應式調整

如果未給出 Flex 網格中列的顯式大小，則它將自動調整列的大小
5 列對齊

Flex 網格列可以在父行中的水平或垂直軸上對齊。
6 源排序

源排序有助於在不同尺寸的螢幕上重新排列列。
7 Sass 參考

SASS（Syntactically Awesome Stylesheet）是一種 CSS 預處理器，它有助於減少 CSS 的重複並節省時間。

Foundation - 表單

在本章中，我們將學習有關表單的內容。Foundation 提供了功能強大、簡單且通用的表單佈局系統，它結合了表單樣式和網格支援。

下表列出了 Foundation 中使用的表單元素。

序號 表單元素及描述
1 表單基礎

表單的建立非常簡單且靈活，它是使用標準化表單元素和強大的網格系統相結合構建的。
2 幫助文字

它用於通知使用者元素的目的，通常放置在欄位下方。
3 標籤位置

您可以將標籤放置在輸入的左側或右側。
4 內聯標籤和按鈕

額外的文字或控制元件可以附加到輸入欄位的左側/右側。
5 自定義控制元件

自定義控制元件（如日期選擇器、開關或滑塊）需要一些注意才能訪問它。
6 SASS 參考

您可以使用 SASS 參考更改元件的樣式。

Foundation - 可見性類

描述

  • Foundation 使用可見性類根據裝置方向（縱向和橫向）或螢幕尺寸（小、中、大或超大螢幕）顯示或隱藏元素。

  • 它允許使用者根據瀏覽環境使用元素。

下表列出了 Foundation 的可見性類，這些類根據其瀏覽環境控制元素：

序號 可見性類及描述
1 按螢幕尺寸顯示

它使用 .show 類根據裝置顯示元素。
2 按螢幕尺寸隱藏

它使用 .hide 類根據裝置隱藏元素。

Foundation 支援一些類，您可以使用 .hide 和 .invisible 類隱藏內容，並且在頁面上不顯示任何內容。

方向檢測

裝置可以使用 landscape 和 portrait 功能確定不同的方向。手持裝置（如手機）在旋轉時會指定不同的方向。對於桌上型電腦，方向始終為橫向。

可訪問性

下表列出了螢幕閱讀器的可訪問性技術，這些技術隱藏內容，同時使螢幕閱讀器能夠讀取內容：

序號 可訪問性類及描述
1 對螢幕閱讀器顯示

它使用 show-for-sr 類隱藏內容，同時阻止螢幕閱讀器讀取它。
2 對螢幕閱讀器隱藏

它使用 aria-hidden 屬性使文字可見，但螢幕閱讀器無法讀取。
3 建立跳過連結

螢幕閱讀器將建立一個跳過連結，以便導航到您網站的內容。

Sass 參考

Foundation 使用以下混合宏來顯示 CSS 輸出，這允許為您的元件構建自己的類結構：

序號 混合宏及描述 引數 型別
1

show-for

預設情況下，它隱藏元素並在特定螢幕尺寸以上顯示它。

 $size 關鍵字
2

show-for-only

預設情況下，它隱藏元素並在斷點內顯示它。

 $size 關鍵字
3

hide-for

預設情況下，它顯示元素並在特定螢幕尺寸以上隱藏它。

 $size 關鍵字
4

hide-for-only

預設情況下，它顯示元素並在特定螢幕尺寸以上隱藏它。

 $size 關鍵字

所有這些混合宏的預設值將設定為 none。

Foundation - 基本排版

描述

Foundation 中的排版定義標題、段落、列表和其他內聯元素，這些元素為元素建立了有吸引力和簡單的預設樣式。

下表列出了 Foundation 中使用的不同型別的排版：

序號 排版及描述
1 段落

段落是一組句子，定義了不同的字型大小、突出顯示的單詞、行高等。
2 標題

它定義了從 h1 到 h6 的 HTML 標題。
3 連結

它建立一個超連結，當您單擊文字或影像時，它會開啟另一個文件。
4 分隔符

它用於使用

標籤在部分之間進行斷開。
5 有序和無序列表

Foundation 支援有序列表、無序列表來列出事物。
6 定義列表

定義列表用於顯示名稱值對。
7 塊引用

它表示一段文字，定義的比普通文字大得多。
8 縮寫和程式碼

縮寫定義單詞或短語的縮寫形式，程式碼表示一段程式碼。
9 擊鍵

它用於執行特定功能。
10 可訪問性

Foundation 提供了一些訪問頁面內容的指南。

Sass 參考

您可以使用下表中列出的以下 SASS 變數更改元件的樣式。

序號 名稱和描述 型別 預設值
1

$header-font-family

指定標題元素的字體系列。

 字串或列表 $body-font-family
2

$header-font-weight

指定標題的字型粗細。

 字串 $global-weight-normal
3

$header-font-style

提供標題的字型樣式。

 字串 normal
4

$font-family-monospace

用於使用等寬型別的元素（如程式碼示例）的字型棧。

 字串或列表 Consolas, 'Liberation Mono', Courier, monospace
5

$header-sizes

定義標題的螢幕尺寸，每個鍵都是一個斷點，每個值都是標題尺寸的對映。

 對映 
small: (
   'h1': 24
   'h2': 20
   'h3': 19
   'h4': 18
   'h5': 17
   'h6': 16
)
medium: (
   'h1': 48
   'h2': 40
   'h3': 31
   'h4': 25
   'h5': 20
   'h6': 16
)
6

$header-color

提供標題的顏色。

 顏色 inherit
7

$header-lineheight

定義標題的行高。

 數字 1.4
8

$header-margin-bottom

提供標題的下邊距。

 數字 0.5rem
9

$header-text-rendering

定義文字渲染方法。

 字串 optimizeLegibility
10

$small-font-size

指定 元素的字型大小。

 數字 80%
11

$paragraph-margin-bottom

指定段落的下邊距。

 數字 1rem
12

$paragraph-text-rendering

文字渲染段落的方法。

 字串 optimizeLegibility
13

$code-color

為程式碼示例提供文字顏色。

 顏色 $black
14

$code-font-family

為程式碼示例提供字體系列。

 字串或列表 $font-family-monospace
15

$code-border

指定程式碼周圍的邊框。

 列表 1px solid $medium-gray
16

$code-padding

指定文本週圍的填充。

 數字或列表 rem-calc(2 5 1)
17

$anchor-color

連結的預設顏色。

 顏色 $primary-color
18

$anchor-color-hover

指定連結懸停時的預設顏色。

 顏色 scale-color($anchor-color, $lightness: -14%)
19

$anchor-text-decoration

連結的預設文字裝飾。

 字串 none
20

$anchor-text-decoration-hover

連結懸停時的預設文字裝飾。

 字串 none
21

$hr-width

定義分隔符的最大寬度。

 數字 $global-width
22

$hr-border

指定分隔符的預設邊框。

 列表 1px solid $medium-gray
23

$hr-margin

分隔符的預設邊距。

 數字或列表 rem-calc(20) auto
24

$list-lineheight

它定義列表中專案的行高。

 數字 $paragraph-lineheight
25

$list-style-type

為無序列表提供專案符號型別。

 字串 disc
26

$list-style-position

它定義無序列表中專案符號的位置。

 字串 outside
27

$list-side-margin

定義左側（或右側）邊距。

 數字 1.25rem
28

$defnlist-term-weight

為<dt>元素提供字型粗細。

 字串 $global-weight-bold
29

$defnlist-term-margin-bottom

提供<dt>和<dd>元素之間的間距。

 數字 0.3rem
30

$blockquote-color

它應用<blockquote>元素的文字顏色。

 顏色 $dark-gray
31

$blockquote-padding

提供<blockquote>元素內部的填充。

 數字或列表 rem-calc(9 20 0 19)
32

$blockquote-border

它為<blockquote>元素提供側邊框。

 列表 1px solid $medium-gray
33

$cite-font-size

定義<cite>元素的字型大小。

 數字 rem-calc(13)
34

$cite-color

為<cite>元素提供文字顏色。

 顏色 $dark-gray
35

$keystroke-font

定義<kbd>元素的字體系列。

 字串或列表 $font-family-monospace
36

$keystroke-color

定義<kbd>元素的文字顏色。

 顏色 $black
37

$keystroke-background

為<kbd>元素提供背景顏色。

 顏色 $light-gray
38

$keystroke-padding

指定<kbd>元素的填充。

 數字或列表 rem-calc(2 4 0)
39

$keystroke-radius

顯示<kbd>元素的邊框半徑。

 數字或列表 $global-radius
40

$abbr-underline

為<abbr>元素提供底部邊框樣式。

 列表 1px dotted $black

Foundation - 排版輔助類

在本章中，我們將學習排版輔助工具。排版輔助工具用於以語義相關的方式格式化文字。Foundation中的輔助類使您可以更快地構建一些排版樣式。

下表列出了Foundation中使用的排版輔助工具。

序號 排版輔助工具 & 描述
1 文字對齊

它有助於更改元素的文字對齊方式，例如左、右、居中和兩端對齊。
2 副標題

可以使用.subheader類將副標題新增到任何標題元素。
3 引導段落

與普通文字相比，它是一個相當大的文字塊，可用於廣告或其他描述性文字。
4 無專案符號列表

預設情況下，Foundation中的<ul>是專案符號列表。要刪除專案符號，可以使用.no-bullet類。
5 統計資料

在處理儀表盤時，需要突出顯示一些重要的數字。您可以透過使用.stat類來實現。

Sass 參考

變數

下表列出了專案設定檔案中用於自定義元件預設樣式的SASS變數。

序號 名稱和描述 型別 預設值
1

$lead-font-size

引導段落的預設字型大小。

 數字 $global-font-size * 1.25
2

$lead-lineheight

引導段落的預設行高。

 字串 1.6
3

$subheader-lineheight

副標題的預設行高。

 數字 1.4
4

$subheader-color

副標題的預設字型顏色。

 顏色 $dark-gray
5

$subheader-font-weight

副標題的預設字型粗細。

 字串 $global-weight-normal
6

$subheader-margin-top

副標題的預設上邊距。

 數字 0.2rem
7

$subheader-margin-bottom

副標題的預設下邊距。

 數字 0.5rem
8

$stat-font-size

靜態數字的預設字型大小

 數字 2.5rem

Foundation - 基本控制元件

在本章中，我們將學習基本控制元件。Foundation提供基本控制元件，例如按鈕、滑塊和開關。

下表列出了Foundation中使用的基本控制元件。

序號 基本控制元件 & 描述
1 按鈕

Foundation支援多種按鈕樣式，可以根據您的需要進行自定義。
2 按鈕組

它們是對應操作元素的容器。當一組操作顯示在工具欄中時，它可以正常工作。
3 關閉按鈕

當您希望透過單擊某個內容使其消失時，可以使用關閉按鈕。
4 滑塊

滑塊對於在範圍內設定某些值非常有用。
5 開關

它允許您透過單擊來開啟或關閉開關。

Foundation - 導航

描述

Foundation提供了一些用於設定導航元素樣式的不同選項。許多簡單的導航模式都已捆綁在一起；它可以整合到表單中，以形成強大的響應式導航解決方案。

下表描述了不同型別的導航及其描述。

序號 型別 & 描述
1 導航概述

導航包含到其他部分的連結，幷包含許多導航模式。
2 選單

選單用於構建許多導航元件。
3 下拉選單

下拉選單外掛用於在主選單下方建立子選單。
4 層疊選單

鑽取選單外掛用於以滑塊格式在主選單中建立子選單。
5 手風琴選單

它顯示具有手風琴效果的可摺疊選單，並透過手風琴選單外掛提供自動摺疊支援。
6 頂部欄

頂部欄有助於在不同尺寸的螢幕上輕鬆顯示覆雜的導航欄。
7 響應式導航

響應式選單外掛在不同尺寸的螢幕上分配選單。
8 麥哲倫

麥哲倫建立一個導航，該導航處於固定位置；它根據滾動位置自動跟蹤頁面上的導航列表。
9 分頁

分頁，一個無序列表由Bootstrap處理，就像許多其他介面元素一樣。
10 麵包屑

麵包屑指定網站在導航層次結構中的當前位置。

Foundation - 容器

Foundation容器用於始終使網站在所有瀏覽器中都具有全寬，幷包裝網站內容。

下表列出了一些Foundation中使用的容器 -

序號 容器 & 描述
1 手風琴

手風琴包含垂直選項卡，用於網站上展開和摺疊大量資料。
2 提示框

它將內容放置在元件內部。
3 下拉窗格

單擊按鈕時顯示內容。
4 媒體物件

它新增媒體物件，例如影像、影片、部落格評論等，以及一些內容。
5 畫布外

它從可見區域中移出導航選單並顯示主要內容。
6 顯示模態

Foundation允許使用reveal類建立模態對話方塊或彈出視窗。
7 表格

Foundation提供用於以表格格式顯示資料的佈局。
8 選項卡

它是一個基於導航的選項卡，用於在不同的窗格中顯示內容，而無需離開頁面。

Foundation - 媒體

在本章中，我們將學習Foundation中的媒體。Foundation包含幾種媒體型別，例如Flex Video、標籤、軌道、進度條和工具提示。下表列出了所有媒體型別。

序號 媒體型別 & 描述
1 彈性影片

它用於將影片嵌入到Flex Video容器中，以保持正確的縱橫比，而不管螢幕尺寸如何。
2 標籤

它可用於內聯樣式，可以將其放入正文中以呼叫特定部分或附加元資料。
3 軌道

它是一個功能強大且響應迅速的滑塊，允許使用者在觸控式螢幕裝置上滑動。
4 進度條

它用於顯示您的進度，可以新增到您的佈局中。
5 工具提示

它用於顯示頁面上某個術語或操作的額外資訊。

Foundation - 外掛

描述

外掛是一種軟體，它提供Foundation核心功能最初未完成的其他功能。Foundation外掛可以上傳以擴充套件網站的功能。外掛用於簡化您的工作。

下表描述了不同型別的外掛及其描述。

序號 型別 & 描述
1 遵守

遵守用於HTML5表單驗證庫，使用本地API使用必需的屬性和模式。
2 均衡器

均衡器是在頁面上建立多個具有相同高度的內容的一種方法。
3 交換

它用於根據使用者的裝置載入響應式內容。
4 切換器

切換用於在一種設定與另一種設定之間切換。
5 粘性

粘性外掛用於在網站中建立恆定的內容或影像。

Foundation - Sass 函式

Foundation提供一組SASS實用程式函式，可與util、color、selector、unit、value等一起使用。

您可以使用以下程式碼行一次匯入所有實用程式檔案 -

@import 'util/util';

您還可以匯入單個實用程式檔案，如下所示 -

@import 'util/color';
@import 'util/selector';
@import 'util/unit';
@import 'util/value';

Sass 參考

您可以使用以下SASS函式更改元件的樣式。

前景

它根據背景顏色為元素提供前景顏色。它使用以下格式分配不同型別的引數 -

foreground($color, $yes, $no, $threshold)

上述引數在以下表格中指定 -

序號 引數 & 描述 型別 預設值
1

$color

它檢查顏色的亮度。

 顏色 無
2

$yes

如果顏色是淺色，則返回$yes顏色。

 顏色 $black
3

$no

如果顏色是深色，則返回$no顏色。

 顏色 $white
4

$threshold

它表示亮度的閾值。

 百分比 60%

智慧縮放

它根據元素的亮度為其提供合適的顏色。它使用以下格式指定合適的顏色 -

smart-scale($color, $scale, $threshold)

以下表格中指定了上述給定的引數 -

序號 引數 & 描述 型別 預設值
1

$color

它用於縮放顏色。

 顏色 無
2

$scale

它指定向上或向下縮放的百分比。

 百分比 5%
3

$threshold

它表示亮度的閾值。

 百分比 40%

文字輸入

在使用文字輸入型別時，它建立一個選擇器。它使用以下格式指定輸入型別 -

text-inputs($types)

它使用以下表格中指定的引數 -

序號 引數 & 描述 型別 預設值
1

$types

它提供許多文字輸入型別以生成選擇器。

 顏色 -

去除單位

它從值中刪除單位，只返回數字。它使用以下格式從值中刪除單位 -

strip-unit($num)

它使用以下表格中指定的引數 -

序號 引數 & 描述 型別 預設值
1

$num

當您從值中刪除單位時，它指定數字。

 顏色 無

rem計算

它更改畫素值以匹配rem值。它使用以下格式將畫素值轉換為rem值 -

rem-calc($values, $base)

它使用以下表格中指定的引數 -

序號 引數 & 描述 型別 預設值
1

$values

它將畫素值轉換為rem值，並使用空格分隔它們。如果您要轉換逗號分隔的列表，則將列表括在括號中。

 數字或列表 無
2

$base

在將畫素轉換為rem值時，它提供基本值。如果基本值為null，則函式使用$base-font-size變數作為基本值。

 數字 null

有值

如果它不是false，則指定值。false值包括null、none、0或空列表。它使用以下格式指定值 -

has-value($val)

它使用以下表格中指定的引數 -

序號 引數 & 描述 型別 預設值
1

$val

它檢查指定的值。

 混合 無

獲取側邊

它指定值的側邊，並定義填充、邊距等上的頂部/右側/底部/左側值。它使用以下格式來指定值的側邊：

has-value($val)

它使用以下表格中指定的引數 -

序號 引數 & 描述 型別 預設值
1

$val

它指定值的側邊。

 列表或數字 無
2

$side

它確定應返回哪個側邊（頂部/右側/底部/左側）的值。

 關鍵字 無

get-border-value

它確定元素的邊框值。它使用以下格式來指定邊框值：

get-border-value($val, $elem)

它使用以下表格中指定的引數 -

序號 引數 & 描述 型別 預設值
1

$val

它查詢邊框的特定值。

 列表 無
2

$elem

它用於提取邊框元件。

 關鍵字 無

Foundation - Sass 混合宏

匯入

它匯入位於scss/util/_mixins.scss檔案下的SASS混合宏的內容。您可以使用以下程式碼行匯入SASS混合宏：

@import 'util/mixins';

Sass 參考

您可以使用SASS函式更改元件的樣式。

混合

您可以使用以下混合宏來構建元件的CSS類結構。

CSS-TRIANGLE

它用於建立下拉箭頭、下拉點等。它使用<i>&::before</i>或<i>&::after</i>選擇器將三角形附加到現有元素。它使用以下格式：

@include css-triangle($triangle-size, $triangle-color, $triangle-direction);

它使用表格中指定的以下引數：

序號 引數 & 描述 型別 預設值
1

$triangle-size

它定義三角形的寬度。

 數字 無
2

$triangle-color

它定義三角形的顏色。

 顏色 無
3

$triangle-direction

它定義三角形的方向，例如向上、向右、向下或向左。

 關鍵字 無

HAMBURGER

它用於建立具有寬度、高度、條數和顏色的選單圖示。它使用以下格式：

@include hamburger($color, $color-hover, $width, $height, $weight, $bars);

它使用表格中指定的以下引數：

序號 引數 & 描述 型別 預設值
1

$color

它定義圖示的顏色。

 顏色 無
2

$color-hover

當您將滑鼠懸停在圖示上時，它定義顏色。

 顏色 無
3

$width

它定義圖示的寬度。

 數字 無
4

$height

它定義圖示的高度。

 數字 無
5

$weight

它定義圖示中各個條的粗細。

 數字 無
6

$bars

它定義圖示中條的數目。

 數字 無

BACKGROUND-TRIANGLE

它用於為元素指定背景影像。它使用以下格式：

@include background-triangle($color);

它使用表格中指定的引數：

序號 引數 & 描述 型別 預設值
1

$color

它定義三角形的顏色。

 顏色 $black

CLEARFIX

此混合宏自動清除子元素，因此無需額外的標記。它使用以下格式：

@include clearfix;

AUTO-WIDTH

它根據容器中存在的元素數量自動調整元素的大小。它使用以下格式：

@include auto-width($max, $elem);

它使用以下表格中指定的引數 -

序號 引數 & 描述 型別 預設值
1

$max

它識別容器中專案的最大數量。

 數字 無
2

$elem

它使用標籤作為兄弟選擇器。

 關鍵字 li

DISABLE-MOUSE-OUTLINE

它用於在識別滑鼠輸入操作時停用元素周圍的輪廓。它使用以下格式：

@include disable-mouse-outline;

ELEMENT-INVISIBLE

它用於隱藏元素，並且可以用於鍵盤和其他裝置。它使用以下格式：

@include element-invisible;

ELEMENT-INVISIBLE-OFF

它用於刪除不可見的元素，並透過使用element-invisible()混合宏來反轉CSS輸出。它使用以下格式：

@include element-invisible-off;

VERTICAL-CENTER

它用於透過使用以下格式將元素垂直居中放置在非靜態父元素內：

@include vertical-center;

HORIZONTAL-CENTER

它用於透過使用以下格式將元素水平居中放置在非靜態父元素內：

@include horizontal-center;

ABSOLUTE-CENTER

它用於透過使用以下格式將元素絕對居中放置在非靜態父元素內：

@include absolute-center;

Foundation - Motion UI

Foundation 提供 Motion UI 庫用於建立 UI 過渡和動畫，並被 Foundation 元件（如Toggler、Reveal 和Orbit）使用。

安裝 Motion UI

您可以使用 npm 或 bower 在您的專案中安裝 Motion UI 庫，如下面的程式碼行所示：

$ npm install motion-ui --save-dev
bower install motion-ui --save-dev

您可以使用config.rb在Compass中新增 Motion UI 庫的路徑，如下面的程式碼行所示：

add_import_path 'node_modules/motion-ui/src'

您可以使用以下程式碼行在gulp-sass中包含路徑：

gulp.src('./src/scss/app.scss')
   .pipe(sass( {
      includePaths: ['node_modules/motion-ui/src']
   }));

在 SASS 檔案中匯入 Motion UI 庫，使用以下程式碼：

@import 'motion-ui'

內建過渡

Foundation 透過使用 Motion UI 庫建立的過渡類提供過渡效果。讓我們使用過渡效果建立一個簡單的示例。

自定義過渡

您可以使用 Motion UI 庫設定自定義過渡類。例如，我們將為mui-hinge()過渡設定自定義類，該過渡會旋轉元素：

@include mui-hinge(
   $state: in,
   $from: right,
   $turn-origin: from-back,
   $duration: 0.5s,
   $timing: easeInOut
);

動畫

您可以使用 Motion UI 過渡效果建立 CSS 動畫。單擊此連結以檢查動畫如何在使用data-animation類的模態上工作。

列印頁面
上一頁
下一頁
廣告

© . All rights reserved.