跳转到主要内容

和“
主题
”有关的内容:

前面几节所讲述的技术实现都不难,就好像响应式设计最初的实现方法也仅仅只是浮动(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的基本思路

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

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

创建card组件

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

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

{# in card.twig #} <div class…

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

Pattern lab的安装

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

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

composer create-project…

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

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

以下是一个简短的介绍:

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