进阶篇19. Pattern Lab介绍

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

需要说明的两点是:

  1. PL并不是组件化开发唯一能使用的工具,另一个可以选择的工具是由zen主题的作者John Albin开发的KSS,还有其他一些工具,一时间想不起来名字,我就不提了。这些以后有机会再讲。
  2. PL并不是只能实现原子设计理论中的组件关系,你也可以用它来实现SMACSS或者OOCSS,只是大家都本着“拿来用,怎么方面怎么用”的心态,直接用它默认的方式罢了。

你可以在PL官网的demo页面看到它的界面。

顶部黑色菜单栏的左侧是按照原子设计理论划分的组件类别,依次为:原子、分子、有机体、模板、页面和全部。点击前面五个会显示下拉菜单,让你选择进一步的子项目。或者点击“全部/All”来浏览所有的组件。如图:

pl

菜单栏的右侧的齿轮点击后有几个选项,第一个是显示/隐藏所有组件的模板文件代码,也就是HTML代码。官网Demo展示的是MUSTACHE模板引擎,而我们为了配合Drupal8会使用TWIG引擎。右侧的其他几个按钮则是用来改变视口的,如图:

pattern lab

通过改变视口,可以查看元素在不同尺寸的屏幕上的显示效果,这是响应式设计的基本动作。读者可自行尝试。这两个功能是为了方便团队成员能很方便的查看组件的代码和效果。

整个Demo页面展示的就是使用PL生成的组件库,同时,他也是一个living style guide,翻译成中文就是“实时更新的风格指南”。

我们需要使用composer来安装PL,因此我们首先要安装好composer。下一节会讲如何安装composer,熟练掌握的读者可以跳过。

Pattern lab的主要文件夹

PL安装好之后,在安装目录中会有几个文件和文件夹,这里只挑选几个重点讲一下:

  • config文件夹的config.yml文件是PL的配置文件,你可以修改其中的参数来控制PL,详情请参考官网文档
  • public文件夹用来存储PL经过编译之后输出的最终代码和资源,用于显示在组件库的页面上,也用于为Drupal主题提供前端资源和模板。
  • source文件中是所有的源代码。这个文件夹中最重要的子文件夹是patterns文件夹(带下划线)。这里面有按照原子设计理论划分的:原子、分子、有机体、模板和页面相对应的分类文件夹,每一个分类文件夹中又包含着不同的组件文件夹,如果你是新安装的PL,组件文件夹还等待着你的创建。但是,作者一再强调的是,PL并不强迫你一定要遵循原子设计的理论,你可以轻松换成任何一种你喜欢的前端组件化理论。

本书共83小节:

评论 (写第一个评论)