Pattern Lab 与 Angular “混合得不好”吗?

2024-01-01

作为一名正在寻找与开发人员合作的更好方式的交互设计师,我尝试向我当前的客户介绍 Pattern Lab。然而,前端框架的首席开发人员却对此表示反对。他的论点的主要要点:

我们的工具包具有复杂的组件,除了 HTML/CSS 之外,还需要 JavaScript 或 JS 库。这不会与模式实验室中的 Mustache 或 Handlebars 模板很好地混合。因此,我们使用 Angular JS,它是我们编写组件的框架。

我试图寻找讨论该主题的文章。有nothing https://stackoverflow.com/questions/tagged/patternlab.io+angularjs据我所知,这里是这样。在外面,我只发现了一些帖子(example http://www.bigeng.io/the-living-style-guide-pattern-lab/),但除了一个解析问题之外,没有任何专门讨论 Pattern Lab 与 Angular(缺乏)兼容性的主题。solved https://github.com/pattern-lab/patternlab-php/issues/209两年前。

作为一名非程序员,我没有必要的影响力来影响我的开发人员同行。如果有实践经验的人能详细说明一下就好了。


使用 Pattern Lab 创建的可重复使用的模式有绝不依赖于 Mustache,因此您的开发人员可以放心,模式实验室不会引入任何会延续到其代码中的依赖项。

事实上,无论是否使用 Pattern Lab 构建,样式指南的全部要点是构建一个独立于语言的样式模式库(HTML 标记和 CSS),开发人员可以在他们的应用程序中重用这些库,无论他们是否选择构建它们在 AngularJS、ReactJS、简单的旧服务器端代码隐藏或其他内容中。

模式实验室只是维护样式指南的前端开发人员或设计师的一个方便工具。它生成一个静态风格指南网站,展示不同的模式。该网站将成为项目开发人员使用这些模式的工具。正如 AngularJS 可以在任何静态站点中使用一样,它当然也可以在使用 Pattern Lab 生成的静态站点中使用。

Mustache 是 Pattern Lab 用于生成静态网站的工具堆栈的一部分,但没有任何 Mustache 的痕迹或对其的依赖关系会转移到生成的网站中。我为几个 AngularJS 团队提供托管在 Pattern Lab 上的设计模式服务,他们中没有一个人曾经接触过甚至不知道 Mustache。

如果您的开发人员熟悉 Bootstrap 或 Foundation 等前端框架,它们为不同的前端块提供了记录的模式,那么这也是一样的。不同项目的开发人员可以复制 HTML 标记和 CSS 代码,而无需任何其他依赖项。

风格指南应该是任何现代 Web 开发设置的先决条件,因为它是开发人员和设计人员之间智能、高效协作的先决条件,并使快速原型制作变得更快。因此,我认为您应该讨论的是是否应该使用样式指南来进行协作并帮助更有效的协作。如果您对此达成一致,Pattern Lab 就是开发一个明智的选择。

这里很好地介绍了如何使用样式指南,以及可以用来构建样式指南的不同工具集。模式实验室列在样式指南平台部分下:https://www.smashingmagazine.com/2015/04/an-in-deep-overview-of-living-style-guide-tools/ https://www.smashingmagazine.com/2015/04/an-in-depth-overview-of-living-style-guide-tools/

希望这可以引发与您的开发人员更好的讨论,如果他们阻止您构建样式指南,他们就会错过。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Pattern Lab 与 Angular “混合得不好”吗? 的相关文章

  • jQuery 插件不能很好地与 Angularjs 配合使用

    我用过jQuery 滑块在我的项目中 我使用 Angular 加载图像 我目前的观点是这样的 div div class slides container a href img width 919 height 326 alt a div
  • 类型错误:无法读取未定义的属性“defaultPrevented”

    当我进行以下测试时 我收到此错误 it should call pauseAnimationInterval if in focus inject function SearchBoxData intervalManager timeout
  • 如何并排放置两个

    我有两个 div 我想要并排放置的元素 如下所示 navigation content 我想要导航 div 根据需要尽可能大 但不能更大 收缩以适应行为 内容 div 然后应该填充剩余的空间 如何在不指定百分比 例如 20 80 的情况下使
  • Twitter 嵌入时间轴小部件

    我继续下载http platform twitter com widgets js http platform twitter com widgets js And the http platform twitter com embed t
  • 为什么“tbody”不设置表格的背景颜色?

    我在用 tbody 作为 CSS 选择器来设置background color在一个表中 我这样做是因为我有多个 tbody 表内的部分 它们具有不同的背景颜色 我的问题是 当使用border radius在细胞上 细胞不尊重backgro
  • CSS:显示:块;与显示:表格;

    之间有区别吗display block and display table 在我看来 它就像包含 dom node 的显示类型table row and table cell节点并不重要 MDN 是这么说的display table 让它表
  • Angular UI Select2,为什么 ng-model 被设置为 JSON 字符串?

    我使用 Angular ui 的 select2 来实现相当简单的下拉菜单 它由位于我的控制器范围内的静态数据数组支持 在我的控制器中 我有一个在下拉列表的 ng change 上调用的函数 以便我可以在值更改时执行一些操作 然而 我发现
  • h2 设置背景颜色和下划线

    我需要帮助解决这个 CSS 问题 我想要风格 h2 元素的背景颜色仅适用于文本 并且还有边框底部 这是预览 我可以自己做这件事 这并不难 但问题是我无法添加额外的元素 比如 span 标签 内 h2 标签 所以我正在寻找一种纯CSS方式来实
  • 滚动时我的身体背景颜色消失

    我希望有人能帮帮忙 我已将 body height 属性设置为 100 当所有内容同时显示在屏幕上时 这很好 然而 当我需要滚动 最小化窗口时 主体颜色消失 只留下我为 HTML 背景设置的颜色 有人知道解决办法吗 html backgro
  • 右下角对齐的更好方法

    有没有更好的方法来对齐单元格右下角的某些内容 我有一个 div 只包含一个背景图像 10px x 10px 我使用以下样式将其放在右下角 我所在的单元格高 40 像素 这样做会导致我失去 div 上方的 30px 我还使用它作为单击的对象
  • 父级嵌入框阴影与子级 div 重叠

    我遇到一个问题 子级 div 与父级框阴影底部重叠 父级有一个 max height w overflow y 滚动 任何帮助都会很棒 https i stack imgur com jQe0r png https i stack imgu
  • 如何更改chart.js中的标签颜色?

    我有一个像这样定义的饼图 var myChart new Chart ctx type doughnut data labels data labels datasets data data values backgroundColor r
  • 排除单个浏览器使用 CSS 类

    我想排除 Internet Explorer 使用特定的 CSS 类 这可能吗 Details 我有一个 css 类 看起来像 input type radio checked input type radio hover box shad
  • 如何理解 Angular JS 中的控制台错误消息?有什么工具吗?

    我是 Angular JS 的新手 我的第一个问题是如何理解 Angular JS 中控制台的错误消息 我编写了这段用于匹配密码的代码片段 它在控制台上抛出错误 但它工作正常 它是有线的 我无法从这些控制台消息中理解任何内容 谁能指出我为什
  • CSS Overflow 属性在 iPad 中不起作用

    我正在为 iPad 设计一些 html 页面 在尝试像 yscroll auto 这样的 css 溢出属性时 iPad 中没有出现滚动条 内容也没有滚动 我在 ipad 模拟器和设备中尝试过 有没有其他方法可以实现这个属性 请帮帮我 提前致
  • iOS 11 浏览器图像错误

    在 iOS 11 中滚动页面时出现以下错误 在 Firefox Safari 和 Chrome 中 在 Android 设备中 不会发生该错误 这些是背景图像 我不知道这是否是导致错误的原因 图 2 显示了图像在 Android 中的用途和
  • Aptana Studio 3 上的预览选项卡在哪里?

    我在 Windows PC 上使用 Aptana Studio 2 并有一个选项卡用于在 IE 上预览页面 另一个选项卡用于在 Firefox 上预览 但我切换到了 Aptana 3 我不知道是没有预览还是我没有找到它 是的 我在 stac
  • 如何在 Bootstrap 3 中指定行高?

    使用 Bootstrap 3 我将 row 类的高度设置为 3 5em 我在行中有几个输入 它们与行的顶部对齐 我想让它们底部对齐 我尝试过垂直对齐 底部的样式 但这似乎不起作用 我想让东西底部对齐的原因是我有一个浮动标签 我在输入字段上方
  • gwt 中的垂直居中

    如何使用垂直面板在 gwt 中垂直居中 或者请告诉我有什么方法可以进行垂直居中 如果你想直接使用VerticalPanel从代码中 您需要使用setVerticalAlignment HasVerticalAlignment ALIGN M
  • 位置:绝对在边框半径内且溢出:隐藏

    我遇到了问题border radius在webkit浏览器中找到了解决方案 网址如下 如何在 Chrome Opera 中使 CSS3 圆角隐藏溢出 https stackoverflow com questions 5736503 how

随机推荐