This is the second in a series of posts about the work I’m currently doing on the Perch CMS user Interface. You can read the first article introducing the issues we face here.

这是有关我目前在Perch CMS用户界面上正在进行的工作的系列文章中的第二篇。 您可以阅读第一篇文章，介绍我们在这里面临的问题 。

The existing Perch UI has developed organically over the last few years. Our reference has been the original and updated UI designs created for us by Nathan Pitman. Rebuilding the interface gave us the chance to think about the process of working on the UI and what we could do better in the future.

在过去的几年中，现有的Perch用户界面已经有机发展。 我们参考的是Nathan Pitman为我们创建的原始和更新的UI设计。 重建界面使我们有机会考虑使用UI的过程以及将来可以做的更好的事情。

我们的目标 (Our goals)

In addition to creating a more usable, more responsive interface for Perch we were keen to create for ourselves better way of working to improve and enhance the interface in the future. Currently the only reference to the UI is Perch itself and some flat designs. Working on the UI involves making changes directly to the core product, in this case fairly sweeping changes. Changing markup can require changing Field Types and helpers within Perch, trying to do that directly in the product leads us to tweak what is there rather than consider what might be ideal and then figure out how to change it in the product. It also makes it hard for me to work on the front-end, without also needing to run back-end changes via Drew. As I’m often working on the road, that kind of collaboration makes work slow to a crawl.

除了为Perch创建更有用，更响应的界面外，我们还渴望为自己创造更好的工作方式，以在将来改进和增强该界面。 当前，对UI的唯一参考是Perch本身和一些平面设计。 在UI上进行工作涉及直接对核心产品进行更改，在这种情况下，是相当广泛的更改。 更改标记可能需要更改Perch中的字段类型和助手，尝试直接在产品中做到这一点会使我们调整那里的内容，而不是考虑什么是理想的，然后找出如何在产品中进行更改。 这也使我很难在前端工作，而无需通过Drew运行后端更改。 因为我经常在旅途中工作，所以这种协作会使工作变得缓慢。

I wanted to be able to document our decisions somewhere. A key goal for me is to be able to link up any resource I have used to make a decision about something – in order that we can refer back to that in future and check it is still regarded as best practice.

我希望能够在某个地方记录我们的决定。 对我而言，一个关键目标是能够链接我用来决定某件事的任何资源，以便我们将来可以参考并检查它仍然被视为最佳实践。

There is another group of users who need to understand how the Perch UI goes together – anyone who is developing an add-on using the Perch API. Currently they have to inspect our elements to figure out which classes to apply to their elements to make the add-on look like the rest of Perch. I felt that creating a reference to the UI would be really helpful to these users too – they could just look up the HTML that would create the smarter, use our classes for the various buttons and input fields far more easily and consistently.

还有另一组用户需要了解Perch UI的工作方式-那些正在使用Perch API开发附加组件的用户。 当前，他们必须检查我们的元素，以找出将哪些类应用于其元素，以使附加组件看起来像Perch的其余部分。 我觉得创建对UI的引用也确实对这些用户有帮助-他们可以查找可以创建更聪明的HTML ，更轻松，一致地将我们的类用于各种按钮和输入字段。

我们需要一个模式库 (We needed a pattern library)

I spend quite a bit of time at conferences, and so I’ve been lucky enough to hear people like Brad Frost talk about style guides and pattern libraries. I was quick to decide that this would be a great way forward for Perch. A pattern library that was separate to the product would make it much easier for me to work on CSS and markup.

我在会议上花了很多时间，因此我很幸运地听到像Brad Frost这样的人谈论样式指南和样式库。 我很快决定这对Perch来说是一个很好的前进之路。 与产品分离的模式库将使我更轻松地处理CSS和标记。

My first thought was just to build this in HTML and CSS. Ultimately that is the output format, so why not just build a set of HTML pages representing each element in the interface? I started down that path, however what I very quickly realised is that there is a lot of duplication in an interface like the Perch UI. I was copying and pasting elements from one page to another, then I would realise I needed to change the mark-up around a form input and have to search and replace though all my forms to update it.

我的第一个想法只是在HTML和CSS中构建它。 最终，这就是输出格式，那么为什么不建立代表界面中每个元素的HTML页面呢？ 我开始走这条路，但是我很快意识到，在像Perch UI这样的界面中有很多重复项。 我将元素从一个页面复制并粘贴到另一页面，然后我意识到我需要围绕表单输入更改标记，并且必须搜索并替换所有表单以更新它。

I was also having to encode chunks of markup in order to be able to display reference markup on the page, and change all of this every time I changed the markup of any element. I could very quickly tell that even if I got through the initial rebuild of the UI in this way, keeping this up to date was going to be a huge hassle, and probably wouldn’t happen.

我还必须对标记块进行编码，以便能够在页面上显示参考标记，并且每次更改任何元素的标记时都要更改所有这些标记。 我可以很快说出，即使我以这种方式完成了UI的初始重建，保持最新状态也将是一个巨大的麻烦，而且可能不会发生。

工作模式库优先 (Working pattern library first)

I realised that what we need was a way of working with our pattern library that encouraged us to work pattern library first. Where the starting point of redesigning any element was the pattern library, and not Perch itself. That way the Pattern Library would become the source of truth about any element, not something we tried to remember to keep up to date.

我意识到我们需要的是一种与模式库一起使用的方法，这种方法鼓励我们首先使用模式库。 重新设计任何元素的起点是模式库，而不是Perch本身。 这样，模式库将成为任何元素的真实来源，而不是我们试图记住的最新信息。

While I could use Gulp or another tool to write scripts that would build the CSS to be imported into Perch, working directly in HTML was never going to be an efficient or enjoyable way to work. It was never going to encourage a pattern library first method of working, as it would be quicker and easier to work directly in Perch.

虽然我可以使用Gulp或其他工具编写脚本来构建将要导入Perch的CSS ，但是直接在HTML中工作从来都不是一种有效或令人愉悦的工作方式。 永远不会鼓励使用模式库的第一种工作方法，因为直接在Perch中工作会更快，更容易。

查找模式库工具 (Finding a pattern library tool)

As an industry we just love our tools, so I knew there would be existing things out there. I had a look at Pattern Lab and the Node version and poked around the tools and resources mentioned on styleguides.io. However many of these tools were very focussed on creating pattern libraries and style guides for websites. In our case we were creating a pattern library for an application, and it felt that in most of the tools I downloaded or looked at the demo for I would be fighting against the website focus while building our library.

作为一个行业，我们只是喜欢我们的工具，所以我知道那里将会有现成的东西。 我看了Pattern Lab和Node版本，并围绕styleguides.io上提到的工具和资源进行了探讨 。 但是，这些工具中有许多非常着重于为网站创建模式库和样式指南。 在我们的案例中，我们正在为一个应用程序创建一个模式库，并且感觉到，在我下载或查看的大多数工具中，我在构建我们的库时都会与网站焦点冲突。

While thinking about this I saw a tweet mentioning a tool called Fractal. It’s the pattern library tool used by our friends over at Clearleft, and developed by Mark Perkins. The mentions on Twitter sounded very positive in terms of the issues I had already identified with existing tools. Positive enough for us to test it out. Within a few hours we were certain we had found the best tool for this particular job.

在考虑这一点时，我看到一条推文提到了一个名为Fractal的工具。 这是我们的朋友在Clearleft使用的模式库工具，由Mark Perkins开发。 就我已经使用现有工具确定的问题而言，Twitter上的提及听起来非常积极。 足以让我们测试一下。 在几个小时内，我们确定我们已经找到了适合该特定工作的最佳工具。

爱分形的理由 (Reasons to love Fractal)

The key thing about Fractal for me is the fact that it doesn’t make many assumptions about the sort of thing you want a pattern library for. It doesn’t seem to care if you are creating a brochure site, or an application mostly consisting of different forms and widgets.

对我而言，Fractal的关键在于，它并没有对您想要模式库进行某种假设的许多假设。 似乎并不在乎是要创建小册子网站，还是要创建主要由不同形式和小部件组成的应用程序。

It leaves the naming of components up to you – we have chosen to go with the naming that Brad Frost uses – atoms, molecules and organisms – however we could have named our patterns anything that we liked.

组件的命名由您自己决定 –我们选择了Brad Frost所使用的命名–原子，分子和有机体–但是我们可以将我们喜欢的样式命名为任何样式。

Fractal is file based. This makes it very easy to move patterns around in the file structure, rename things or break things down into smaller components as needed. As we started to work with it we quickly found that our initial stab at organisation needed some work, this was no problem, we simply rearranged the files and committed the new structure into git. Being file based makes it easy to collaborate using git, and use the commit messages to see what each of us has been changing in the library.

分形是基于文件的 。 这使得在文件结构中移动模式，重命名事物或根据需要将事物分解为较小的组件非常容易。 当我们开始使用它时，我们很快发现组织的最初工作需要一些工作，这没问题，我们只是重新排列了文件并将新结构提交到git中。 基于文件使使用git进行协作变得容易，并使用提交消息查看我们每个人在库中所做的更改。

Fractal allows us to document decisions alongside the pattern in the Readme. I’ve been collecting information about accessibility and best practice, I can add these links right into the Readme for that pattern. In future we’ll be able to look up details of any decisions – and our Add-on developers will also be able to reference this information and see why a certain HTML element was chosen, or an ARIA role added.

Fractal允许我们在自述文件中与模式一起记录决策 。 我一直在收集有关可访问性和最佳实践的信息，我可以将这些链接直接添加到该模式的自述文件中。 将来，我们将能够查找所有决策的详细信息-并且我们的附加组件开发人员还将能够引用此信息，并了解为什么选择某个HTML元素或添加了ARIA角色。

The issue that I had with repeating the markup of elements is removed when using Fractal as we can reference smaller components in other files. For example if I create an “atom” for a button, and then want to include that button in a toolbar, I include the button atom rather than writing out the HTML in the new pattern. This has meant we have very quickly been able to build up larger pieces of the interface.

使用Fractal 可以消除我在重复元素标记方面遇到的问题，因为我们可以在其他文件中引用较小的组件 。 例如，如果我为按钮创建一个“原子”，然后希望将该按钮包含在工具栏中，那么我将包含按钮原子，而不是在新模式中编写HTML 。 这意味着我们已经能够很快构建更大的界面。

From any pattern we can take a look at the template that generates the pattern, the Sass used to create CSS to style it and the rendered HTML. No more encoding HTML to display it on my HTML style guide pages!

从任何模式中，我们都可以查看生成模式的模板，用于创建CSS样式的Sass以及呈现的HTML 。 不再有编码HTML可以在我的HTML样式指南页面上显示它！

从分形到栖息 (Getting from Fractal to Perch)

It was important to make Fractal our source of truth. Drew created a build process for Perch that builds all CSS within Fractal – and not inside the Perch build scripts. The resulting CSS is then copied into the Perch build. This process ensures that any work on the front-end happens inside the pattern library first. It can’t get out of date with the UI in the product.

使分形成为我们真理的来源很重要。 Drew为Perch创建了一个构建过程，该过程在Fractal中构建了所有CSS ，而不是在Perch构建脚本中。 然后将生成的CSS复制到Perch构建中。 此过程可确保前端上的所有工作首先在模式库中进行。 它与产品中的UI不会过时。

We’re still midway through the process, however the speed at which we’ve been able to create different patterns within Fractal has been eye-opening. An unexpected benefit is how achievable this rebuild feels when working in Fractal. Instead of having the whole interface in front of me making me feel as if I am chipping away at a vast task, all I need to think about is the single component I’m working on. I feel more of a sense of achievement as each item takes shape – we can mark individual elements as “done” and have that feeling of completing tasks each day.

我们仍处于中间阶段，但是我们能够在Fractal中创建不同模式的速度令人大开眼界。 一个意外的好处是，在Fractal中工作时，这种重建感觉有多可实现。 除了让整个界面摆在我面前而不让我感觉自己好像在忙着完成一项繁重的任务外，我所需要考虑的只是我正在处理的单个组件。 当每个项目都成形时，我会更有成就感–我们可以将各个元素标记为“完成”，并拥有每天完成任务的感觉。

Once we have launched the next version of Perch that includes this new UI I feel that we’ve developed a system that will keep our Pattern Library up to date as we make changes, and ensure it remains a great resource for us and for our add-on developers in the future.

一旦我们启动了包含此新UI的下一版本的Perch，我认为我们已经开发出了一个系统，该系统将在进行更改时使我们的模式库保持最新状态，并确保它对我们和我们的添加仍然是一个很好的资源。未来的开发人员。

模式库资源 (Pattern Library Resources)

A short list of resources I found while researching pattern libraries and style guides:

在研究模式库和样式指南时发现的一小部分资源：

• styleguides.io
• Frontend Style Guides
• Getting Started with Pattern Libraries
• Power to the Patterns
• Atomic Design
• On building component libraries
• On Design Systems

• styleguides.io
• 前端样式指南
• 模式库入门
• 模式的力量
• 原子设计
• 关于构建组件库
• 在设计系统上