前面几节所讲述的技术实现都不难，就好像响应式设计最初的实现方法也仅仅只是浮动（float）、百分比单位和media query而已，但是，响应式的难点在于如何用新的技术去改善用户体验，以及如何调整传统的工作流程来更好的适应新的技术。所以Jen Simmons才会一脸鄙视而又无奈的对她的听众说：你们以为套一个Bootstrap然后把侧边栏移来移去就算是响应式设计么？

…

Joey：

我叫Joey Gros，是P2创意设计部门的主管。P2的介绍（反正就是说我们很牛，此处略）…

I'm Joey gros , director of creative design at phase 2. phase 2 is a digital agency where…

随着团队和业务的发展，项目会变得越来越大，多个设计师会加入到同一个项目中。这就必然导致设计的分工，每一个设计师都只负责设计一小部分界面，比如，一个搜索页面，或者账户管理页面等。这很可能会导致设计缺乏统一性和协调性，因为每个设计师都有自己的风格，当他们独立的而非系统的解决设计问题的时候，就会发生类似的情况。

…

随着科技的发展，我们进入了无线互联网时代，一方面一大批的传统网站面临着移动优先的挑战，另一方面，移动应用市场还有着无数的APP等着设计师去设计。于是，一直标榜“量身定制”的设计，遇到了前所未有的危机。在移动互联网时代，项目是不断变化不断迭代的，传统的设计/前端流程已经跟不上项目的需求了，成为了瓶颈。

我在上一本书的末尾《…

接着我们将Card组件应用到主题上，我们当然可以继续在node/1页面上来来实现这个步骤，但是，card一般来说都是用来和views搭配起来以列表的形式出现的。因此，这一节我们重新回到首页，看看列表怎么做。

需要指出的是，在第一篇的最后几篇内容，我们讲了内容的覆写，这其中就包括内容列表的覆写，以及views的使用，因此，…

在我们开始为Drupal映射PL中的模板之前，我们首先要做一个准备工作。

在第一篇第24节中我们已经讲过，当你为系统安装或者创建一个主题的时候，系统就会为这个主题文件夹中的templates文件夹创建一个名字空间路径（namespaced path）来指向这个文件夹。因此在include模板的时候，…

Pattern Lab（以下简称PL）虽然有为Drupal专门开发的版本，但是，它的定位依然不是一个Drupal的模块，而是一个独立于Drupal的前端工具。

使用PL的目的，是利用PL为Drupal主题建立前端组件库。我们放弃传统的主题工作流程，而把所有的前端资源，包括HTML（也就是Twig模板…

Card可以由一个图片和一个标题组合而成，因此，很显然，它属于Molecules这个级别。

在/source/_patterns/01-molecules文件夹中创建一个新文件夹“01-card”，并在其中创建card.twig文件，内容如下：

关于PatternLab，在官网上你可以找到详细的英文文档。以下我们只对一些重点进行讲解。

PatternLab有很多不同版本，我们要安装的是专门为Drupal开发的版本。

1. 在终端中先CD到你的主题文件夹，然后运行以下命令：

组件化的做法在历史上早已有之，最早是福特汽车的流水线，这个大家应该都知道，把汽车的不同部件放在不同的流水线上生产，最后统一组装——这样做使得成本控制、质量控制、生产效率都得到了极大的改善。比较近的则是大芬村的油画作坊，不要小看这么一个农民村，据说全世界80%的油画都是从这里卖出去的，他们使用的方法也差不多，就是几个画工一起画一幅画，每人只负责自己的一小块，…

原子设计（Atomic Design）理论进一步系统化的描述了页面元素之间的相互关系。Brad Frost在他的书《原子设计》中，引用了原子图、化学式甚至元素周期表来阐述他的原子设计理论。

以下是一个简短的介绍：

原子是构成所有事物最基本的单位（这是一篇关于前端设计的文章，所以请不要过于纠结这个论断的科学性）。…