README

IT@OSU（俄亥俄州立大学的OCIO/ODEE）网站和应用程序的模式库。它使用Pattern Lab Standard Edition for Twig，并融合了Foundation v6中的许多元素，包括XY Grid。

要求

安装和本地开发设置

克隆此仓库
导航到仓库目录
运行 composer install
运行 npm install
运行 npm run gulp

Gulp 默认任务

Gulp 默认任务包括初始 PL 网站生成、必要的重新生成、CSS 和 JS 编译以及监视任务。输入 ^c 停止任务。

为该项目做出贡献

不要直接提交到 develop 或 master 分支。所有贡献都应通过拉取请求添加。我们将使用 git-flow 分支模型。这需要在您的机器上一次性设置设置。并在本地仓库上初始化一次。在仓库的根目录中运行 git flow init 并在初始化过程中接受所有默认设置。

请确保从仓库的问题队列进行工作。如果您打算处理尚未存在的问题，请创建一个并将它分配给自己。

对功能和避免范围蔓延要具体。例如，如果您正在创建一个新模式，请尽量不要对该模式不相关的更改。

开始一个新功能

从 develop 分支运行 git flow feature start [featurename]。此操作将根据 'develop' 创建一个新的功能分支并将其切换到该分支。发布您的本地分支。在此分支上完成所有工作，进行必要的多次提交。如果您创建分支以来 develop 分支上有任何新更改，请确保将其合并并测试后再完成您的功能。

完成一个功能

不要通过 git flow 自己完成一个功能。当您完成一个功能后，通过 github 网页界面从您的功能分支创建一个拉取请求。请确保在拉取请求描述中引用相应的 issue，并使用受支持的关键字。例如：closes #99，当拉取请求被合并时将关闭问题 #99。

当拉取请求被接受时，仓库管理员将完成功能。您然后可以删除本地版本的功能分支。

如果拉取请求未被接受且需要更多工作，您可以从分支继续工作。拉取请求将保持打开状态。更新后，您可以请求再次审查。

创建、标记和分配问题

在您识别出错误、任务、功能请求或其他问题时，请将它们添加到问题队列，并适当地标记它们。如果一项任务需要特定人员完成，请将其分配给他们，否则请将其留为未分配。

其他贡献方式

如果您不熟悉构建图案，或者有想法但不知道如何构建，请创建一个问题，并提供原型或其他信息以帮助开发者构建图案。
识别缺失的图案、缺失的文档、风格改进、无障碍性担忧、错误或其他问题，并将适当的项目添加到问题队列中。

处理图案

导航到components/_patterns。所有工作都应在此处进行。每个图案都包含在各自的目录中。

如何添加新图案

导航到components/_patterns/[category]
创建一个以您图案名称命名的目录（无空格）
每个图案的所有代码应存储在图案目录中。以下列为例，使用文件夹名称作为基本文件名

pattern-name.twig
pattern-name.yml（可选，但用于占位符内容）
_pattern-name.scss（特定于图案的样式）
pattern-name.js（可选，如果需要特定组件的js）
pattern-name.md（可选，但在风格指南中显示有关组件的附加信息很有用）

每个目录按字母顺序排序。要重新排序图案，只需在前面添加数字。您可以选择将图案组织到子目录中以创建子类型。

注意：添加新文件夹可能需要您重新启动任务运行器（gulp）。

嵌套图案

当适用时，最好从较小的图案构建图案。例如，“site-footer”图案由“address-block”和“social-media-links”图案组成。

请参阅：components/_patterns/03-organisms/site-footer/_site-footer.twig以获取用法示例。

另请参阅Emulsify的文档以获取更多信息：何时使用include、extends和embed。

待定--包含、扩展和嵌入的原生示例。

如何创建示例内容

示例内容通过图案的.yml文件创建。任何包含在相应.twig文件中的变量应在.yml文件中分配。

注意：示例内容不嵌套在图案的.twig文件中。例如，此内容还必须包含在site-footer.yml文件中，因为“address-block”嵌套在“site-footer”中。

以下为address-block.yml内容示例。

footer_color:
  white
site_name:
  Name of Website
address_1:
  100 Mount Hall
address_2:
 1050 Carmack Road
city:
  Columbus
state:
  OH
zip:
  43210
phone:
  614-292-8800
fax:
  614-292-8860
contact_email:
  odee@osu.edu

除了特定于图案的数据外，样本数据还可以在风格指南的根级别中分配在/components/_data/data.yml文件中。图案级别的数据将覆盖此文件中的数据。

如何创建伪图案

伪图案用于创建现有图案的变体。这有助于显示多种颜色变体、内容变体、站点特定变体、备用状态等...

波浪号（~）用于指定伪图案。所有伪图案应存储在原始图案目录中。

例如，masthead~white.yml是masthead.yml的伪图案，它们在masthead目录中共享所有资源。伪图案.yml文件应仅包含覆盖原始图案的数据。在此示例中，仅将masthead_color主题设置变量包含在masthead~white.yml中，其值为white。

除了有助于编写scss样式变体外，伪图案还可以帮助测试twig模板中的逻辑。

图案组织

图案根据逐渐变得更加复杂的类别进行划分。这基于Atomic Design Methodology。

全局混入

辅助类

尽可能使用BEM方法论

关于BEM的精彩介绍：BEM会让你快乐
以下是全部细节：方法论 / BEM
现在我们不必对此过于严格，但让我们尽力而为。
在低级（原子、分子）模式中提供接受修饰符作为变量的选项。请参阅 components/_patterns/01-atoms/00-text/04-paragraph/paragraph.twig 以了解如何操作的一个好例子。

Twig资源

官方文档

Foundation的使用和资源

最初将Foundation添加到这个项目中是因为它的XY网格，但我们发现它在其他领域也很有用，并将逐渐将更多方面整合到这个项目中。

在创建新的模式之前，请检查 Foundation的文档以确定是否有内置组件可以作为起点。

沿着相同的思路，在为模式添加样式时，请首先查看 _settings.scss 以确定是否可以在该文件中更改默认值，然后再在您的模式中添加额外的CSS规则。

有一些项目您始终可以依赖Foundation。它们如下

XY网格
断点
rem-calc()函数

由于各种原因，例如已存在的遗留代码、自定义设计实现或其他原因，我们明确不使用Foundation的某些方面。以下是一些模式

主菜单
面包屑
分页器（正在考虑可能的转换）
图片（正在考虑可能的转换）
突出显示（正在考虑可能的转换）
卡片（正在考虑可能的转换）
间距标准（正在考虑可能的转换）

it-osu-web / it-osu-pl

维护者

详细信息