Foundation for Sites6.8.1 更新日志
组件列表

入门项目

我们有一些可以使用 Foundation CLI 安装的入门项目模板。您也可以手动下载它们！

我们的项目模板为您提供了一个坚实的…… 基础，您可以以此开始一个新项目。这两个模板都使用 Gulp 构建系统来自动化编译 Sass、处理 JavaScript、复制文件等过程。

基本模板

我们的基本项目模板与 Foundation 5 中的 Sass 模板非常相似。该项目具有扁平的目录结构，并且只编译 Sass。如果您想快速组建一个简单的项目并且只需要使用 Sass，那么它非常适合。

您可以使用以下命令手动安装模板

# Download the template with Git
git clone https://github.com/foundation/foundation-sites-template projectname

# Move to the project folder, and install dependencies
cd projectname
yarn

# Build the Sass files
yarn start

每次您在 `dist/` 中保存 Sass 文件时，您的项目都会重新编译。

ZURB 模板

官方的 ZURB 模板不仅包括 Sass 处理，还包括 JavaScript 处理、Handlebars 模板和图像压缩。我们在 ZURB 为客户工作时使用了这个确切的模板！

您可以使用以下命令手动安装模板

# Download the ZURB template with Git
git clone https://github.com/foundation/foundation-zurb-template projectname

# Move to the project folder, and install dependencies
cd projectname
yarn

# Build the project
yarn start

编译完成后，您可以在以下位置查看您的项目：http://localhost:8000

它与基本模板的最大区别在于文件夹结构。在 ZURB 模板中，您的项目有一个包含源文件的 src/ 文件夹，以及一个包含已完成网站的独立 dist/ 文件夹。当您处理项目时，Gulp 会不断使用新版本的文件更新您的 dist/ 文件夹。要编译生产版本，请运行 yarn build。

要覆盖或添加到 ZURB 模板的默认样式，请在您项目的 src/assets/scss/ 文件夹中

  • 在 _settings.scss 中更改 Sass 变量
  • 将自定义 SCSS 和 css 添加到 components 文件夹中的新文件中，然后在 app.scss 的底部导入这些文件

升级现有项目时，不会更改 _settings.scss 和 app.scss 文件。因此，您必须手动编辑您的 _settings.scss 文件，以合并 发行说明 中发现的任何 Sass 更改。

功能

以下是 ZURB 模板可以执行的操作的概述

  • 资源复制

    Gulp 会将 src/assets 文件夹中的所有内容原封不动地复制到最终项目的 assets 文件夹中。请注意，Sass 文件、JavaScript 文件和图像 不 属于此复制过程的一部分，因为它们有自己的步骤。

  • 页面编译

    src/ 目录包含三个用于创建 HTML 页面的文件夹：pages/、layouts/ 和 partials/。一个名为 Panini 的平面文件编译器用于处理您项目的各种页面，将它们插入到一个公共模板中，并注入任何 HTML 部分。这是使用一种名为 Handlebars 的模板语言完成的。

    Panini 在文档中有一个专门的页面，解释了它的各种功能。详细了解 Panini。

  • Sass 编译

    使用 Libsass（通过 node-sass）将 Sass 编译为 CSS。主 Sass 文件位于 src/assets/scss/app.scss 下，并导入了 Foundation 和 Motion UI。您创建的任何新的 Sass 部分也应该在此文件夹中。

    CSS 以 nested 样式输出，这种样式与普通 CSS 一样可读。还会创建一个源映射，可以通过开发工具（例如 Chrome Web Inspector）读取。在构建生产版本时，还会使用 clean-css 压缩 CSS，并使用 UnCSS 进行修剪。UnCSS 会扫描您页面的 HTML 并删除您未使用的任何 CSS 类。

  • JavaScript 编译

    使用 Babel（使用 es2015 插件）对 JavaScript 进行转译，以便您可以使用 ES2015 功能。主 Js 文件位于 src/assets/js/app.js 下，并导入了 Foundation、jQuery 和 whatInput。您可以导入已安装的软件包和自定义文件，它们将包含在构建中。

    会创建一个映射回原始文件的源映射。默认情况下，捆绑的 app.js 是未压缩的。在构建生产版本时，文件会通过 UglifyJS 进行压缩。

    整个捆绑过程由 webpack 处理：它为您管理所有资源和依赖项，并将它们编译成一个单一文件。如果您不熟悉导入或模块捆绑，请查看

  • 图像压缩

    默认情况下，所有图像都原样从 assets/img 复制到您的 dist 文件夹。在构建生产版本时，图像会通过 gulp-imagemin 进行压缩。该插件支持 JPEG、PNG、SVG 和 GIF 文件。

  • BrowserSync

    该模板创建了一个 BrowserSync 服务器，地址为 http://localhost:8000。加载此 URL 以查看您编译的模板。在服务器运行时，每次您保存文件时，您打开的任何页面都会自动刷新，允许您在工作时实时查看更改。

  • 样式指南创建

    在 src/styleguide 下有两个文件，用于为您的项目创建样式指南。样式指南是使用 Style Sherpa 生成的，Style Sherpa 是 ZURB 创建的一个小插件。

Style Sherpa 在文档中有一个专门的页面，解释了它的各种功能。详细了解 Style Sherpa。

教程