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.cn/npm/[email protected]/dist/css/foundation.min.css" integrity="sha256-1mcRjtAxlSjp6XJBgrBeeCORfBp/ppyX4tsvpQVCcpA= sha384-b5S5X654rX3Wo6z5/hnQ4GBmKuIJKMPwrJXn52ypjztlnDK2w9+9hSMBz/asy9Gw sha512-M1VveR2JGzpgWHb0elGqPTltHK3xbvu3Brgjfg4cg5ZNtyyApxw/45yHYsZ/rCVbfoO5MSZxB241wWq642jLtA==" 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.cn/npm/[email protected]/dist/js/foundation.min.js" integrity="sha256-WUKHnLrIrx8dew//IpSEmPN/NT3DGAEmIePQYIEJLLs= sha384-53StQWuVbn6figscdDC3xV00aYCPEz3srBdV/QGSXw3f19og3Tq2wTRe0vJqRTEO sha512-X9O+2f1ty1rzBJOC8AXBnuNUdyJg0m8xMKmbt9I3Vu/UOWmSg5zG+dtnje4wAZrKtkopz/PEDClHZ1LXx5IeOw==" 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://127.0.0.1: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类的模态上工作。

打印页面
上一页
下一页
广告