跳到主要内容

使用Fractal记录您的设计系统

您是否想更多地了解设计系统?那就不要错过高级UI工程师米娜马克姆生成纽约4月28日,她将讨论如何创建Pantsuit,这是为hillaryclinton.com上托管的许多应用程序提供动力的设计系统。在西海岸,在生成旧金山6月9日,斯蒂芬妮·路易斯将分享她在构建Salesforce设计系统时学到的一些经验教训。

到现在为止,我们很多人都很熟悉风格指南。但是有一种新的设计系统文档获得了成功:模式库。两者之间的主要区别是工具文档的主要来源。

样式指南的文档往往来自markdown文件,因此为了显示标记,作者通常被迫复制并粘贴到markdown中。当将多个部件装配在一起时几乎不可能保持这种状态。

另一方面,模式库将我们的组件HTML文件视为一等公民。每个组件都有自己的页面,它显示标记并直接从HTML文件呈现HTML。这可确保HTML文件和文档永远不会失去同步。

模式库通常使用模板语言而不是纯HTML构建。模板可以包含变量和其他逻辑,然后我们可以传递各种数据集,允许显示组件的变体。

可以组合多个模板来创建更复杂的显示,甚至是整页。这些文件非常灵活,甚至可以用于制作!对我们的模式库所做的任何更改都会被我们的网站自动选取,因为所有标记(用于库或用于生产)都源自一组规范模板。

Design systems will be covered at both Generate New York and San Francisco this year

今年Generate New York和San Francisco将涵盖设计系统

输入分形

由Clearleft创建,分形 帮助您构建和记录Web组件库,并将它们集成到您的项目中。在本教程中,我们将仔细研究它的工作原理(下载完成的演示版本)这里)。

Fractal是一个通过NPM安装的Node.js模块。首先,您要全局安装模块,以便生成新项目:

npm install --global @ frctl / fractal

安装此软件包后,创建一个新项目:

分形新项目名称

此命令将启动一个安装指南,引导您完成设置过程。它会询问你项目的名称;组件,文档和公用文件夹的名称;如果你将使用Git进行版本控制。完成这些问题后,Fractal将安装所有必需的模块并按照指定设置文件夹结构。

如果要跳过全局安装并手动创建项目,可以在以下位置找到手动安装说明这里

把它旋转起来

现在您已经完全安装了Fractal项目,可以通过单步执行项目文件夹来实现它Cd项目名称并运行Fractal Sync命令。这将启动本地服务器,监视文件以进行更改并自动启动Browsersync:

分形开始--sync

就像那样,你有一个分形的工作实例。打开您选择的浏览器并导航到HTTP://本地主机:3000看看你的新Fractal项目的开始。为避免要求每个人全局安装Fractal,请在您的网站中创建一个脚本的package.json这称为分形二进制。

“scripts”:{“fractal”:“。/ node_modules / .bin / fractal start --sync”}

现在你可以使用了Npm运行分形无需在全球安装任何东西。

添加组件

现在你已经开始了Fractal项目,是时候添加一些组件了。初学者文件带有一个名为“example”的组件,但我们将摆脱它并从头开始创建一个新组件。

Fractal的最大优点之一是您可以在组件文件夹中组织您喜欢的组件,它会自动模仿模式库导航中的组织。

对于第一个组件,我们将在一个内部创建一个新的主按钮按钮文件夹。为此,请使用模板文件创建组件/按钮/主键/初级button.hbs。 Fractal支持开箱即用的Handlebar模板,因此请使用.hbs文件扩展名:

{{文本}}Button标签内的字符串是一个可变占位符,这使您可以重用模板,为其传递不同的值文本来自数据文件。

要创建数据文件,请使用与Handlebar文件相同的基本名称,但使用不同的名称阳明海运延期。现在初级button.config.yml坐在里面组件/按钮/初级按钮文件夹应如下所示:

Title:主按钮上下文:文本:单击我

所有这些一起创建了您的第一个新组件,主按钮,按钮类别的成员,文本:'Click Me'。

组件变化

Fractal支持相同组件的变体,允许我们使用各种修饰符类或属性显示相同的组件。所以我们假设我们想要选择使用黑暗主题按钮。我们可以创建一个名为的新模板文件主键 - Dark.hbs在我们的原始模板旁边(双破折号表示这些组件变体)。在这个模板中,我们将应用一个我们可以挂钩的修饰符来附加新样式。

现在,当我们编写CSS时,我们可以包含以下选择器来修改此模板并修改样式。

.primary-button [data-theme =“dark”] {}

数据变化

就像我们可以通过创建多个模板文件来定义变体一样,我们也可以在数据中创建变体。我们可以在里面做到这一点初级button.config.yml通过添加变量数组文件。

title:主按钮上下文:text:单击Me variants: -  name:Download context:text:立即下载 -  name:安装上下文:text:立即安装

这将创建名为“下载”和“安装”的新变体,并将不同的文本传递到按钮。一个更实际的例子可能是你使用同样的东西初级button.hbs分形和生产中的模板。在这种情况下,您可以将主题值作为变量传递,而不是为您的黑暗主题创建全新模板,并使用数据变体来显示所有不同的按钮主题。

 title:Primary Button context:text:Click Me theme:light variants: -  name:Dark Theme context:text:Click Me theme:dark

处理其他资产

Fractal还将处理标记和数据以外的文件。您添加到组件文件夹的任何CSS,JavaScript,图像或其他资源都将显示在“资产”选项卡中。你可以指定一个README.md组件的文件,以便您可以编写有关如何使用组件的说明,或链接到文档的其他部分。

下一步

对所有核心组件重复上一个示例,可以创建站点主要构建块的有用目录。但是模式库的真正力量来自于将这些部分组合在一起的能力。一定要看看分形文档通过组合较小的原子元素来创建更大的原子元素,了解如何开始创建更复杂的组件。

Docs文件夹是放置传统风格指南信息和补充说明的好地方。这可能包括入职文档,品牌声音和音调指南,颜色和变量列表等等。它遵循与组件相同的基于文件夹的导航,如果您在主题文件夹中组织文件,您将找到导航分形文档轻而易举。

Fractal还支持更复杂的数据源。如果您需要为模板生成大量数据,或者想要从某些第三方API中提取数据,则可以使用组件name.config.js返回一个JavaScript对象来代替YML文件数据。

最后,Fractal允许您使用许多不同的模板语言。请务必查看其文档中的完整列表。最重要的是,玩得开心!

预订门票生成今天!在纽约你可以向Mina Markham学习,他为希拉里克林顿的总统竞选制定了设计系统,并在旧金山Stephanie Rewis将解释如何在企业范围内为“生活设计系统”构建和构建现代CSS框架。

本文最初发表于网络杂志第285期,在这里买



翻译字数超限