样式指南

库

样式指南与 ZURB 模板捆绑在一起，只需两个文件即可轻松为您的代码库创建样式指南。

样式指南是 CSS 代码库的关键组成部分，尤其是多人使用的代码库。团队中的每个人都知道如何构建组件，这一点很重要。样式指南就是文档。您现在正在阅读的文档是核心 Foundation 样式的样式指南。

样式指南是一个与 ZURB 模板捆绑在一起的小工具，可以快速为您生成基本的样式指南。样式指南是从单个 Markdown 文件创建的，该文件包含所有页面内容，以及一个 HTML 模板，该模板定义了内容周围的结构。

用法

观看视频中的此部分

ZURB 模板包含文件夹 src/styleguide/，其中包含构建样式指南所需的两个文件。与 ZURB 模板中的所有其他内容一样，只需编辑文件，您的更改就会立即编译。

一个是 Markdown 文件，index.md。此文件包含样式指南的内容。

另一个是 Handlebars 模板，template.html。您的样式指南的内容作为 HTML 插入到此模板中。最终文件包含在项目的 dist/ 文件夹中，名为 styleguide.html。

编写内容

观看视频中的此部分

样式指南分为多个部分。通常，代码库中的每个组件（例如按钮、面板、模态框、表单控件等）都有其自己的部分。

使用 Markdown 标题为每个部分添加标题，标题是单个井号

# Buttons

Lorem ipsum dolor sit amet, **consectetur adipisicing** elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

要创建新部分，请添加四个换行符和一个新标题

# Buttons

Lorem ipsum dolor sit amet, **consectetur adipisicing** elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.



# Forms

Lorem ipsum dolor sit amet, `<form>` elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

代码示例

观看视频中的此部分

样式指南应始终包含 HTML 示例，以说明如何构建内容。要在 Markdown 中创建代码块，请在代码前后使用三个反引号将其括起来。您还可以在第一个反引号后设置代码块的语言。样式指南将在最终输出中为您着色语法。

```html
<button class="button" type="button">This is a button.</button>
```

您还需要在代码示例下方显示组件的实时演示，以便开发人员可以在一个地方看到元素的 HTML 以及实时渲染的 HTML。样式指南为此提供了一个快捷方式：不用在 Markdown 中将 html 设置为语言，而是将其设置为 html_example。这将打印一个代码示例和一个使用相同代码的实时演示。

```html_example
<button class="button" type="button">This is a button.</button>
```

输出如下所示

<button class="button" type="button">This is a button.</button>

更改模板

观看视频中的此部分

ZURB 模板包含样式指南的最小样板，但您可以随意自定义它。

样板使用 Foundation 的垂直菜单 - 为每个部分创建一个项目。以下是 Handlebars 代码的外观

<div class="row">
      
  <div class="large-3 medium-4 columns">
    <dl class="vertical tabs" data-tab>
      {{#each pages}}
        <dd{{#if @first}} class="active"{{/if}}><a href="#{{ anchor }}">{{ title }}</a></dd>
      {{/each}}
    </dl>
  </div>

  <div class="large-9 medium-8 columns">
    <div class="tabs-content">
      {{#each pages}}
        <section class="content {{#if @first}}active{{/if}}" id="{{ anchor }}">
          {{ body }}
        </section>
      {{/each}}
    </div>
  </div>

</div>

模板可以访问 pages 变量，该变量是一个包含每个页面数据的数组。使用 {{#each}} 循环访问 pages 时，您可以访问以下变量

title：部分的名称。
anchor：部分的名称，格式化为 URL 锚点。
body：部分的内容。