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

基本排版

Foundation 6 中的排版旨在通过为所有最基本的排版元素提供简洁、美观、简单的默认样式，让您的生活更轻松。

段落

这是一个段落。段落预设了字体大小、行高和间距，以匹配整体的垂直节奏。为了展示段落的外观，这里需要更多内容——所以，您知道木星上正在发生的暴风雨比地球还大吗？很酷。使用 <strong> 和 <em> 标签来表示应该强调显示或阅读的文本。浏览器会将这些词语加粗和斜体，而屏幕阅读器会以强调的方式阅读它们。

如果短语的强调很重要，不要仅仅依靠视觉上的强调——也要使用 <em> 或 <strong> 标签来标记它。这两个标签都有内置的样式，但在特定情况下添加额外的样式也无妨。

edit on codepen button 
<p>This is a paragraph. Paragraphs are preset with a font size, line height and spacing to match the overall vertical rhythm. To show what a paragraph looks like this needs a little more content so, did you know that there are storms occurring on Jupiter that are larger than the Earth? Pretty cool. Wrap strong around type to <strong>make it bold!</strong>. You can also use em to <em>italicize your words</em>.</p>

Foundation 包含所有标题的样式——它们的大小和平衡都按照模块化比例进行调整。

观看视频中的这部分内容

在构建文档时，避免跳过标题级别，因为这会使屏幕阅读器感到困惑。例如，在代码中使用 <h2> 之后，下一个使用的标题应该是 <h2> 或 <h3>。如果您需要调整标题的大小以匹配特定的样式，请使用 CSS 覆盖默认大小。

edit on codepen button 
<h1>h1. This is a very large header.</h1>
<h2>h2. This is a large header.</h2>
<h3>h3. This is a medium header.</h3>
<h4>h4. This is a moderate header.</h4>
<h5>h5. This is a small header.</h5>
<h6>h6. This is a tiny header.</h6>

h1. 这是一个非常大的标题。

h2. 这是一个大标题。

h3. 这是一个中等标题。

h4. 这是一个适度标题。

h5. 这是一个小标题。
h6. 这是一个很小的标题。

标题样式

该框架包含两种排版比例——一种针对小尺寸屏幕使用较窄的尺寸范围，另一种针对中等和大尺寸屏幕使用较大的尺寸范围。您可以通过编辑项目设置文件中的 $header-styles 映射来更改这些比例，或为其他断点添加新的比例。

观看视频中的这部分内容

标题 默认 中等及以上
<h1> 24px 48px
<h2> 20px 40px
<h3> 19px 31px
<h4> 18px 25px
<h5> 17px 20px
<h6> 16px 16px

您还可以在设置文件中添加值来调整每个标题大小的行高、上边距和下边距。

$header-styles 映射最完整的形式如下所示

$header-styles: (
  'small': (
    'h1': ('font-size': 24, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
    'h2': ('font-size': 20, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
    'h3': ('font-size': 19, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
    'h4': ('font-size': 18, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
    'h5': ('font-size': 17, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
    'h6': ('font-size': 16, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom)
  ),
  'medium': (
    'h1': ('font-size': 48, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
    'h2': ('font-size': 40, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
    'h3': ('font-size': 31, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
    'h4': ('font-size': 25, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
    'h5': ('font-size': 20, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom),
    'h6': ('font-size': 16, 'line-height': $header-lineheight, 'margin-top': 0, 'margin-bottom': $header-margin-bottom)
  ),
  ...
);

因为这有点冗长，所以我们也引入了一种简短的形式，您可以选择使用

$header-styles: (
  'small': (
    'h1': ('fs': 24, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h2': ('fs': 20, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h3': ('fs': 19, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h4': ('fs': 18, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h5': ('fs': 17, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h6': ('fs': 16, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom)
  ),
  'medium': (
    'h1': ('fs': 48, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h2': ('fs': 40, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h3': ('fs': 31, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h4': ('fs': 25, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h5': ('fs': 20, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom),
    'h6': ('fs': 16, 'lh': $header-lineheight, 'mt': 0, 'mb': $header-margin-bottom)
  ),
  ...
);

'font-size'/'fs'、'margin-top'/'mt' 和 'margin-bottom'/'mb' 的值将转换为“rem”。您可以使用任何单位，但如果您没有指定，我们将假定您指的是“px”。如果您没有设置 'font-size'/'fs' 键，则默认为 1rem，'margin-top'/'mt' 默认为 0，'margin-bottom'/'mb' 默认为 $header-margin-bottom，适用于大小 'small'。此后，如果未为更大的断点输入值，则较大尺寸的值将继承较小尺寸的值。

'line-height'/'lh' 的值将转换为一个无单位数字，该数字表示相对于字体大小的行高。您也可以输入任何单位。如果您没有指定，我们假定对于小于或等于 10 的数字，您指的是典型的相对行高。但是，如果您输入大于 10 的任何值，我们假定您指的是“px”，因为我们还没有看到大于 10 的相对行高。如果您没有设置 'line-height'/'lh'，则默认为 $header-lineheight，适用于大小 'small'。此后，较大尺寸的值将继承较小尺寸的值。

在版本 6.3 中，`$header-styles` 映射已替换 `$header-sizes` 映射。`$header-styles` 映射比 `$header-sizes` 映射更通用。

`$header-sizes` 映射仍在工作，用于初始化 `$header-styles` 映射。在版本 6.4 中，`$header-sizes` 将被弃用。

小标题段落

通过在标题中插入 <small> 元素，Foundation 将缩小内联元素的标题字体大小，允许您将其用于副标题或其他次要标题文本。

观看视频中的这部分内容

edit on codepen button 
<h3>Foundation for Sites <small>Version 6.6.1</small></h3>

Foundation for Sites 版本 6.6.1

链接非常标准，颜色预设为 Foundation 主颜色。了解更多关于 Foundation 全局颜色的信息。

观看视频中的这部分内容

为了使链接对屏幕阅读器友好，请避免在链接文本中使用模糊的词语，例如“此处”或“阅读更多”。链接本身的文本应该充分描述链接指向的位置。

edit on codepen button 
<p>Links are very standard, and the color is preset to the Foundation primary color. <a href="global.html">Learn more about Foundation's global colors.</a></p>

分隔线

使用分隔线来定义段落之间的主题分隔。要表示页面中一个部分的结束和另一个部分的开始，最好使用 <section> 标签。

edit on codepen button 
<hr>

无序列表

使用无序列表来...列出项目，如果项目的顺序无关紧要。

edit on codepen button 
<ul>
  <li>List item with a much longer description or more content.</li>
  <li>List item</li>
  <li>List item
    <ul>
      <li>Nested list item</li>
      <li>Nested list item</li>
      <li>Nested list item</li>
    </ul>
  </li>
  <li>List item</li>
  <li>List item</li>
  <li>List item</li>
</ul>
  • 列表项，包含更长的描述或更多内容。
  • 列表项
  • 列表项
    • 嵌套列表项
    • 嵌套列表项
    • 嵌套列表项
  • 列表项
  • 列表项
  • 列表项

有序列表

edit on codepen button 
<ol>
  <li>Cheese (essential)</li>
  <li>Pepperoni</li>
  <li>Bacon
    <ol>
      <li>Normal bacon</li>
      <li>Canadian bacon</li>
    </ol>
  </li>
  <li>Sausage</li>
  <li>Onions</li>
  <li>Mushrooms</li>
</ol>
  1. 奶酪（必不可少）
  2. 意大利辣香肠
  3. 培根
    1. 普通培根
    2. 加拿大培根
  4. 香肠
  5. 洋葱
  6. 蘑菇

定义列表

定义列表 (<dl>) 用于显示名称-值对，例如元数据或字典定义。每个术语 (<dt>) 与一个或多个定义 (<dd>) 配对。

edit on codepen button 
<dl>
  <dt>Time</dt>
  <dd>The indefinite continued progress of existence and events in the past, present, and future regarded as a whole.</dd>
  <dt>Space</dt>
  <dd>A continuous area or expanse that is free, available, or unoccupied.</dd>
  <dd>The dimensions of height, depth, and width within which all things exist and move.</dd>
</dl>
时间
过去、现在和未来存在的无限持续进程，被视为一个整体。
空间
空闲、可用或未被占用的连续区域或广阔空间。
所有事物存在和移动的高度、深度和宽度维度。

块引用

有时其他人会说一些聪明的话，你可能想用引用的方式提及这些话。我们已经为您做好了准备。

默认情况下，`` 采用 `.cite-block` 组件的外观。在 Sass 中，您可以使用 `$cite-*` 变量 自定义它，或通过将 `$enable-cite-block` 设置为 false 来禁用它。
edit on codepen button 
<blockquote>
  Those people who think they know everything are a great annoyance to those of us who do.
  <cite>Isaac Asimov</cite>
</blockquote>
那些自以为是的人对我们这些真正了解的人来说非常讨厌。艾萨克·阿西莫夫

缩写

使用 <abbr> 标签来注释缩写词。缩写词必须始终具有一个 title 属性，以阐明完整的术语。

edit on codepen button 
<p>In my dream last night, I saw <abbr title="John Ronald Reuel">J. R. R.</abbr> Tolkien and George <abbr title="Raymond Richard">R. R.</abbr> Martin hanging out on Sunset <abbr title="Boulevard">Blvd</abbr>.</p>

在我昨晚的梦中，我看到 J. R. R. 托尔金和乔治·R. R. 马丁在日落大道上闲逛。

代码

使用 <code> 标签格式化对代码的引用。为了使尖括号 <> 正确渲染，您需要将它们更改为 &lt; 和 &gt;。

edit on codepen button 
Remember to escape angle brackets when printing HTML: <code>&lt;div&gt;</code>
记住在打印 HTML 时转义尖括号：<div>

在需要时，使用 .code-inline 组件来应用代码样式。

<span class="code-inline">I am not code, but I am displayed as if.</span>
我不是代码，但我被显示为代码。

使用 .code-block 组件来创建代码块。

<code class="code-block">{
    "What I am": "I am a big chunk of code. I can have very long lines, I will not break and show a scrollbar instead.",
    ...
}</code>
{ "我是什么": "我是一大块代码。我可以有很长的行，我不会换行，而是显示一个滚动条。", ... }

建议对您的内容使用适当的语义标记（`` 用于代码，`

` for pre-formatted text). Styling classes `.code-inline` and `.code-block` should be used without semantic markup only if the content is NOT code/pre-formatted text but should be displayed as if.

按键

使用 <kbd> 元素来注释按键或组合键。

edit on codepen button 
<p>Press <kbd>Cmd+Q</kbd> (or <kbd>Ctrl+Q</kbd> on Windows) to play Half-Life 3.</p>

按 Cmd+Q（或 Windows 上的 Ctrl+Q）来玩《半条命 3》。

辅助功能

文本是页面内容的核心，因此使其易于每个人访问非常重要。以下是一些需要遵循的通用准则。

文本与图像

建议使用实际文本，而不是图形中的文本。辅助技术无法读取图像，并且图像中的文本无法像普通文本那样由浏览器调整大小。如果图像包含需要阅读的文本，请将其添加到图像的 alt 属性中。

<img src="assets/img/buy-now.jpg" alt="Buy now">

对比度

元素文本与其背景颜色之间的对比度应足够高，以使低视力用户能够阅读。建议的最小对比度为 4.5:1。没有自动工具可以有效地为您检查这一点，但是如果您不确定特定的颜色组合，则可以通过众多颜色对比度检查器之一运行它，例如 WebAIM 的颜色对比度检查器。

Google Chrome 的 无障碍功能开发者工具 还包括一个对比度检查器。通过在检查器中选择一个元素，您可以查看对比度是否符合最低标准。

Screenshot of Google Chrome's Accessibility Tools

字号

尽可能使用 rem 和 em 单位来调整所有内容的大小。不仅是字体大小，还包括填充、边距和任何长度值。这可以确保如果用户更改了浏览器的文本大小，您的设计会统一放大和缩小。视障用户通常会将其浏览器调整为 200% 的缩放比例。

我们在 Foundation 中几乎所有地方都使用 rem 单位，甚至编写了一个 Sass 函数使其更容易一些。rem-calc() 函数可以接受一个或多个像素值，并将它们转换为适当的 rem 值。

.element {
  width: rem-calc(300);
  padding: rem-calc(10 16);
}

更多资源

Foundation 包含由 HTML5 Boilerplate 开发的打印样式，为您提供一些基本的打印专用样式。当您通过媒体查询进行打印时，这些样式会被激活。它包括

  • 清除背景、框阴影和文本阴影
  • 在锚文本后附加链接 URL
  • 为 <blockquote> 和 <pre> 元素添加边框
  • 页面清理和窗口最小化

除此之外，Foundation 还包含几个简单的类，您可以使用它们来控制元素的打印或不打印。只需将 .show-for-print 附加到元素以仅在打印时显示，并将 .hide-for-print 附加到元素以在打印时隐藏。

观看视频中的这部分内容

打印样式使用 `!important` 来确保它们不会被更具体的选择器覆盖。此框架有意识地避免使用 `!important` 声明。这是少数几个使用它的组件之一。

Sass 参考

变量

可以使用项目 设置文件 中的以下 Sass 变量来自定义此组件的默认样式。

名称类型默认值描述
$print-transparent-backgrounds 布尔值 true

如果为 true，则打印时所有元素都将具有透明背景，以节省墨水。
$print-hrefs 布尔值 true

如果为 true，则在打印时显示所有链接旁边的“href”。
$header-font-family 字符串或列表 $body-font-family

标题元素的字体系列。
$header-font-weight 字符串 $global-weight-normal

标题的字体粗细。
$header-font-style 字符串 normal

标题的字体样式（例如斜体）。
$font-family-monospace 字符串或列表 Consolas, 'Liberation Mono', Courier, monospace

用于使用等宽字体的元素的字体堆栈，例如代码示例
$header-color 颜色 inherit

标题的颜色。
$header-lineheight 数字 1.4

标题的行高。
$header-margin-bottom 数字 0.5rem

标题的底部边距。
$header-styles 映射 small: ( 'h1': ('font-size': 24)
'h2': ('font-size': 20)
'h3': ('font-size': 19)
'h4': ('font-size': 18)
'h5': ('font-size': 17)
'h6': ('font-size': 16)
)
medium: ( 'h1': ('font-size': 48)
'h2': ('font-size': 40)
'h3': ('font-size': 31)
'h4': ('font-size': 25)
'h5': ('font-size': 20)
'h6': ('font-size': 16)
)

各种屏幕尺寸的标题样式。每个键都是一个断点，每个值都是一个标题样式映射。
$header-text-rendering 字符串 optimizeLegibility

标题的文本渲染方法。
$small-font-size 数字 80%

<small> 元素的字体大小。
$header-small-font-color 颜色 $medium-gray

放置在标题内的 <small> 元素的颜色。
$paragraph-lineheight 数字 1.6

<p> 元素中文本的行高。
$paragraph-margin-bottom 数字 1rem

段落的底部边距。
$paragraph-text-rendering 字符串 optimizeLegibility

段落文本的文本渲染方法。
$enable-code-inline 布尔值 true

使用 .code-inline 组件作为 <code> 元素的默认值。
$anchor-color 颜色 $primary-color

链接的默认颜色。
$anchor-color-hover 颜色 scale-color($anchor-color, $lightness: -14%)

链接悬停时的默认颜色。
$anchor-text-decoration 字符串 none

链接的默认文本装饰。
$anchor-text-decoration-hover 字符串 none

链接悬停时的默认文本装饰。
$hr-width 数字 $global-width

分隔线的最大宽度。
$hr-border 列表 1px solid $medium-gray

分隔线的默认边框。
$hr-margin 数字或列表 rem-calc(20) auto

分隔线的默认边距。
$list-lineheight 数字 $paragraph-lineheight

列表中项目的行高。
$list-margin-bottom 数字 $paragraph-margin-bottom

列表中项目的底部边距。
$list-style-type 字符串 disc

用于无序列表的项目符号类型（例如，square、circle、disc）。
$list-style-position 字符串 outside

无序列表项上的项目符号定位。
$list-side-margin 数字 1.25rem

列表的左侧（或右侧）边距。
$list-nested-side-margin 数字 1.25rem

列表内列表的左侧（或右侧）边距。
$defnlist-margin-bottom 数字 1rem

<dl> 元素的底部边距。
$defnlist-term-weight 字符串 $global-weight-bold

<dt> 元素的字体粗细。
$defnlist-term-margin-bottom 数字 0.3rem

<dt> 和 <dd> 元素之间的间距。
$blockquote-color 颜色 $dark-gray

<blockquote> 元素的文本颜色。
$blockquote-padding 数字或列表 rem-calc(9 20 0 19)

<blockquote> 元素内的填充。
$blockquote-border 列表 1px solid $medium-gray

<blockquote> 元素的侧面边框。
$enable-cite-block 布尔值 true

使用 .cite-block 组件作为 <cite> 元素的默认值。
$keystroke-font 字符串或列表 $font-family-monospace

<kbd> 元素的字体系列。
$keystroke-color 颜色 $black

<kbd> 元素的文本颜色。
$keystroke-background 颜色 $light-gray

<kbd> 元素的背景颜色。
$keystroke-padding 数字或列表 rem-calc(2 4 0)

<kbd> 元素的填充。
$keystroke-radius 数字或列表 $global-radius

<kbd> 元素的边框半径。
$abbr-underline 列表 1px dotted $black

<abbr> 元素的底部边框样式。