问题标签 [atomic-design]

我目前正在考虑开发一个“静态”网站，只有几页。但是，通过设计，我可以看出会有重复的布局/模式。我正在考虑采用面向数据的方法，使我的 HTML 尽可能可重用。这是一个例子：

索引.html：

然后是我的有机体/topBanner.html：

最后是我的atom/button.html：

我在 _data 下有多个 JSON 文件，它们基本上包含文本。按钮的示例是_data/generic/buttons.json：

或links.json：

因此，这意味着您需要从有机体的顶层传递所有数据，以便其中的每个位都有其数据。这样，该按钮的示例就是 HTML 只定义一次，并且数据绑定到它。对于第二个按钮，topBanner您可以执行以下操作：

索引.html：

在topBanner.html中，将数据重新绑定到专用按钮：

这种方法意味着一切都是数据驱动的，没有 HTML 的重复/“复制/粘贴”，这一切都通过包含工作，您可以应用原子设计模式 ( http://patternlab.io/ )。

想要将按钮的文本从“开始”更改为“让我们开始”吗？转到 data/generic/buttons.json 并在那里进行更改。整个网站现在都更改了文本。

缺点是所有数据都必须从顶层向下传输。可读性可能很差。

我第一次使用 Jekyll，想听听你的意见。像这样的静态网站开发人员有什么好的做法？拥有一个包含更通用button.html的buttonGetStarted.html并将数据从buttonGetStarted.html传递给button.html是否更容易？喜欢：

buttonGetStarted.html：

然后每次我在页面上需要它时都包含buttonGetStarted ？但是，如果我需要一个新的调查按钮，我需要创建另一个 html buttonSurvey.html等等......当然在代码上你会看到一个{% include buttonSurvey.html %}易于阅读和理解的按钮是关于什么的。所以这：

所有按钮只有一个文件按钮，或

每次我需要一个新按钮时都创建一个新的 HTML 文件？

谢谢

F。

原子设计似乎是一种构建用户体验结构的有趣方法。但是一个有机体可以包含其他有机体吗？

我将使用这两个框架（我喜欢）启动一个新项目：

• 拉拉维尔 5
• Vue.js

前端开发人员准备 HTML 的原子设计，由 patternlab.io 生成。

现在我正在研究如何集成 patternlab.io 项目，而不必重写刀片模板中的所有元素。

我发现了一些使用Laravel 扩展结合 Patternlab 和 Laravel 的实现TwigBridge。Laratash

但我有一些想法：

• 在刀片模板中有：逻辑、条件、循环......如果我结合起来patternlab，laravel然后我需要把所有这些都放在 patternlab 项目中。
• 由于使用，vue.js我还需要将这些标签添加到patternlab模板中

所以我认为在 laravel 项目中集成 patternlab.io 模板并不是最好的选择。

我的想法是：

• Frontend DEV 使用 patternlab 创建模板
• Laravel 自动生成并导入在 patternlab 中生成的 CSS 样式表
• 后端开发人员在刀片模板中手动复制patternlab - molecules并添加自己的逻辑
• 如果前端开发人员对 CSS 进行了更改，那很好——我们将毫无问题地运行；在重新运行 laravel gulp 进程以更新 css 文件后，我们有了新的更新。
• 如果前端开发人员对 html 结构进行了一些更改，我们需要手动调整它们。

结合原子设计、Vuejs 和 Laravel 有没有更好的解决方案？您如何在 CMS 中部署原子设计？

我正在使用 Patternlab、Handlebars 和 Gulp 作为原型设计工具。目前我有一个有机体正在尝试将数据传递给循环中的原子。我收到以下错误。

我的代码如下：

和 JSON：

我在其他问题中看到了一些例子，比如这里的循环是嵌套的，所以我不确定我的代码有什么不同/不正确。

使用车把可以以这种方式将刺痛从一个部分传递到另一个部分：

父模板

子模板

那个孩子的孩子

会导致

但是，我想在标签中有一个“父类”名称的占位符，以防另一个块（在此处使用原子设计）想要拉入该元素。如果可以始终使用 {{parentclass}} （而不是每次都必须提出不同的占位符名称），那将是完美的。但是，传递字符串的范围不会停留在第一个孩子，它会一直到最后。

所以

+

+

=

有没有办法将该变量的范围限制为仅传递给直接后代？

我需要使用原子设计创建一个网页。我没有在互联网上获得适当的教程来开始。

请分享一些演示项目，以便我了解如何使用原子设计来实现。

我们以成功的方式遵循原子设计在我们的库中组织我们的 ReactJS 组件。在构建了几十个组件之后，我们开始对如何组织有机体产生根本性的疑问。

我们的目标是建立一个经验法则，以便我们可以构建代码管理工具来正确处理组件，并为我们的团队提供一个标准来选择将新创建的组件放在哪里。

以下是我们采用的规则：

Atoms：是在库中不包含任何其他组件的组件。因此，它不应有任何import来自其他原子组件。

分子：是只能导入原子的组件。因此，如果该组件具有一个import NNN from '../atoms/...'，它将被视为一个分子。分子不能从自身（分子库）导入成分，只能从原子导入。

在有机体中，我们有第一个基本疑问。我将其描述为 3 个选项：

选项 A：

有机体：这些是只能导入分子的成分。所以只import NNN from '../molecules/...'允许在有机体上。如果您必须在同一组件中导入一个分子和一个原子，它将被视为一个有机体。

选项 B：

有机体：这些是只能导入分子或分子和原子的组件。因此，仅允许import NNN from '../molecules/...'或与生物import NNN from '../molecules/...'一起使用。import NNN from '../../atoms/...'

选项 C：

有机体：这些组件只能导入分子或分子和原子或分子和原子和有机体。因此，仅允许生物体上或与一起或一起import NNN from '../molecules/...'与一起。import NNN from '../molecules/...'import NNN from '../../atoms/...'import NNN from '../molecules/...'import NNN from '../../atoms/...'import NNN from '../../molecules/...'

模板：这些组件可以将较低层次结构中的所有组件（原子、分子和有机体）一起导入。如果它导入一个单一的有机体，它就是一个模板。当然，这里可以导入的内容取决于上面的生物选择决定。

Pages：可以导入所有内容，因为它的目标是将内容放在较低层次结构的元素上。

有机体决策将影响层次结构的深度以及库的使用。

似乎原子设计方法将其概念转移到有机体（带有模板和页面）之上，因此有机体应该是较低级别组件的更高聚合器（选项 C），但我们可以创建一个新级别，将所有聚合保持在模板级别，因此模板将不仅仅是页面结构，实际上是组件结构。

这在 ReactJS 库开发方面是否有意义，什么选项最适合开发策略？

开始使用原子设计方法构建新的 UI 库时，我们在尝试将最小的 UI 构建块分类为原子时很快遇到了问题。这里的一个例子可能是一个 React 组件，它可能是<SVGComponent />. 最初被归类为原子——很快就发现它可能不是。就原子设计而言，它不适合作为原子的词汇——它是一个实现细节。因此，一个<Icon />组件可能符合 atom 的设计分类，并且该组件的实现可能由<SVGComponent />. 此类组件还有其他示例，例如<Font/>。

是否有一种通用的说法来描述和分类这些组件以及原子 ui 库以及存在依赖项的位置？一般对此有什么想法吗？

谢谢

我正在创建一个小型组件库，我有一个表格组件，我的任务是使其模块化和通用，以便以后可以修改

现在 Table 本质上是一个容器组件，它可以包含我在库中构建的不同的各种其他小组件。

我想知道什么？

以下方法是将组件传递给其他组件的正确方法吗？如果不是，那么正确的方法或更好的方法是什么？

我在做什么

桌子有很多道具，但 3 个主要道具是：

colName这是一个字符串数组，传递每列的表列名

data是一个数组，其中包含每一行的数组。

dataComponent（如果要将数据显示为普通文本数据，则保持未定义）这是一个组件数组（我在库中定义的那个），用于每一行的特定列

太多关于行列和代码的讨论

现在这里是示例代码：

上面的代码有一个dataComponent传递colName“帐户名称”的组件，该组件由调用的用户头像组件（我作为库的一部分构建）组成MUserIcon，同样可以说它MLink是一个超链接组件。

我们目前正在为我们公司建立一个设计系统，其中一部分是创建一个基于Atomic Design的模式库。我们的前端团队目前正在他们的工作流程中使用React Styled Components。

我们架构的主要标准之一是拥有一个与技术无关的模式库。这意味着使用纯 HTML、CSS 和演示 Javascript 设置模式库。

有没有办法绕过编写所有这些代码两次（所以普通的 HTML/CSS/JS 组件和 React 样式组件）？

有没有人知道（或者最好是一个例子）关于我们如何自动化从模式库（HTML/CSS/JS）中的组件到 React 样式组件的过程，并为潜在的 VUE 或 Angular 敞开大门（或其他）开发人员在他们的框架中使用我们的模式？

本质上，我们正在寻找一个模式库，可以自动将更改推送到我们所有的网站/应用程序。