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

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

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

composer在Drupal的开发生态圈中也扮演着很重要的作用，很多工具、插件、甚至模块和主题的安装都需要使用它，因此，如果要深入使用Drupal，composer是必备的工具。

Composer的官网上有详细的介绍。这里是中文翻译版本。

下面的安装步骤是在MAC上进行的。如果你使用的是windows，参见这里。…

Pattern Lab是帮助我们实现前端组件化开发流程的一个前端工具，以下简称PL，顾名思义，它可以帮助我们建立前端模块库（组件库），并且，保持组件之间有着原子设计理论中的相互关系，因为它本身就是原子设计理论的提出者Brad Frost和他的同事一起开发的，这也是我们专门用一节的内容讲原子设计的原因。

需要说明的两点是：

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

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

以下是一个简短的介绍：

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

关于CSS的架构、编写方式，比较重要的四个分别是：BEM，OOCSS，SMACSS和Atomic Design。如果你还不知道他们是什么，请自行学习。以下的简介仅仅起到入门的作用。

BEM，即Block、Element、Modifier，它把页面上的元素看成一个一个的Block，组成block的是Element，…

随着Drupal8的发布，核心中新加入了两个新的基主题，一个是Stable一个是Classy，其中Stable基主题为系统前端提供尽可能少的HTML标签和类名，CLassy则是适当的增加了更多一些的类名。这一点我们在第一篇第18节中已经提到过了。总而言之他们的任务是：改变之前Drupal6和7时代基主题毫无顾忌的在页面上打印尽可能多的标签和类名的现象。（…

在上一节中我们演示了使用gulp来编译sass文件，接下来，我们来介绍一下sass。如果你还不会sass，是时候补课了，如果已经熟悉，可以跳过。

sass是一个用来快速编写css文件的语言。经过编译之后的sass文件就是我们通常所说的样式表css。

sass的好处我就不多说了，如果你是一个前端，css已经熟练了，…

在第一篇中我们已经提过几种不同的在页面上加载css和js文件的方法。这一节再介绍一种，使用预处理函数来加载它们，即：

其中，THEME是主题的名称，HOOK是模板钩子，模板名的第一组单词。

比如，如果你想在维护页面上加载一个特定的JS文件，维护页面的钩子是”…

在第一篇中我们对模板建议已经有过介绍了，这一节中我们会讲得更深入一些。

查看模板建议最快的方法是开启theme debug模式，然后在页面上查看元素。你可以在源代码中看到类似下面的代码：