Foundation for Sites6.8.1 變更紀錄
元件清單

安裝

安裝 Foundation 的方法有很多，但如果您是剛開始使用，我們有一些建議。

使用套件管理員安裝

Foundation 可在 npm 上取得。套件包含所有原始 Sass 和 JavaScript 檔案，以及已編譯的 CSS 和 JavaScript，有未壓縮和壓縮的版本。

NPM
npm install foundation-sites
Yarn
yarn add foundation-sites

以下是套件中的內容。

├─ scss       Source Sass files. Use this folder as a load path in Sass.
├─ js         Source JavaScript files. If you're using a build system, make sure `foundation.core.js` is loaded first.
└─ dist       Compiled files:
   ├─ css        * Compiled CSS files. Includes minified and unminified files.
   ├─ js         * Concatenated JavaScript files. Includes minified and unminified files.
   └─ plugins    * Standalone JavaScript plugins.

使用 CLI 安裝 Foundation

不喜歡 GUI 嗎？Foundation 可以輕鬆透過 CLI 安裝。它可以為您安裝相同的範本專案。

基礎範本安裝

git clone https://github.com/foundation/foundation-sites-template basic-project
cd basic-project
yarn install
yarn start

進階範本安裝

git clone https://github.com/foundation/foundation-zurb-template f6-project
cd f6-project
yarn install
yarn start

基礎範本

建議初學者使用
開始使用 Foundation 的基礎範本。其中包含

  • 預先設定的 Foundation for Sites。
  • Sass 編譯
    將 SASS/SCSS 檔案轉換為 CSS 的工具。
  • 入門 HTML 檔案
    協助您使用基本 Foundation 元件（包括新的 XY 格線！）的基本檔案

進階範本

建議有經驗（或好奇）的使用者使用
進階專案，包括 Foundation 和建置流程，其中包含

  • 使用 Panini 的 Handlebars HTML 範本
  • Sass 編譯和加前綴
  • 使用 webpack 進行 JavaScript 模組組合
  • 內建 BrowserSync
  • 使用 CSS、JavaScript 和影像壓縮進行生產建置

請參閱進階範本安裝

Foundation 5 使用者：如果您電腦上已經有 Foundation 5 CLI，您只能存取其中一個指令，具體取決於您的命令列環境設定方式。

若要移除 Foundation 5 CLI，請執行 gem uninstall foundation。測試 Foundation 6 CLI 之後，如果您想移除它以返回舊版 CLI，請執行 npm uninstall foundation-cli --global。

Windows 使用者：請確定您的 node 環境中提供了 python v2.7，因為 node-gyp 工具需要它。有兩種方法可以達成此目的

  1. 安裝 windows-build-tools（建議）並透過 npm config set python "%USERPROFILE%\.windows-build-tools\python27\python.exe" 使 python 可存取
  2. 安裝 python（不建議）並將它新增到您的系統環境變數

如果您尚未安裝 python v2.7，建議使用第一種方法，因為它不會影響 node 環境以外的電腦。如果您已經安裝 python v2.7，當然可以略過這兩種方法，並立即開始使用 foundationc-cli。

下載

如果您不喜歡 Sass，我們有一個包含已編譯 CSS 和 JavaScript 的入門範本，以及一個供您修改的入門 `index.html` 檔案。只要解壓縮並開始編碼即可！

下載 Foundation

jsDelivr 上的人員為我們主機壓縮的 Foundation CSS 和 JavaScript。只要將其中一個 <script> 標籤放入您的 HTML 中，即可設定

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

<!-- Compressed JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/js/foundation.min.js" crossorigin="anonymous"></script>

從 Foundation 6.4 開始，flex 預設啟用，而且僅提供新的 XY Grid。不過，其他 CSS 版本可供後向相容和最常見的使用案例使用。對於其他用途和進階自訂，我們建議使用自訂設定來建置 Foundation（請參閱其他安裝方法）。

<!-- foundation-float.min.css: Compressed CSS with legacy Float Grid -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation-float.min.css" crossorigin="anonymous">

<!-- foundation-prototype.min.css: Compressed CSS with prototyping classes -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation-prototype.min.css" crossorigin="anonymous">

<!-- foundation-rtl.min.css: Compressed CSS with right-to-left reading direction -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-sites@6.8.1/dist/css/foundation-rtl.min.css" crossorigin="anonymous">
查看所有 CDN 檔案和版本

HTML 入門範本

從此 HTML 範本開始，並根據您的需求調整。請務必在範本的 html 標籤中包含 .no-js 類別。新增此類別可防止 未套用樣式的內容閃爍，這適用於許多 foundation 元件。

<!doctype html>
<html class="no-js" lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation Starter Template</title>
    <link rel="stylesheet" href="css/foundation.css" />
  </head>
  <body>
    <h1>Hello, world!</h1>

    <script src="js/vendor/jquery.js"></script>
    <script src="js/vendor/what-input.js"></script>
    <script src="js/vendor/foundation.min.js"></script>
    <script>
      $(document).foundation();
    </script>

  </body>
</html>

其他整合

Foundation 社群協助我們將架構整合到 Rails、WordPress、Django 等。前往我們的 資源頁面，以找到更多使用 Foundation 的方法。