LuLu UI pure版中文文档 » 命名与设计

Fork Me

命名与设计

本文档的对应的主题是LuLu UI的Pure主题,Pure是纯粹的意思,因为这一主题的LuLu UI不依赖任何第三方框架,全部使用原生JavaScript编写,在React和Vue项目中也能使用,所以命名为“pure”。

LuLu UI Pure主题适用于PC,兼顾Mobile端的UI组件库,非常适合面向外部用户的网站开发。

为何叫LuLu?

  1. 叠词,谁不爱。
  2. 首次应用LuLu的项目组中有三位前端小伙伴名字中有'lu',all for you!
  3. LuLu多用于女性名字,正好和组件气质相符,柔软,感性。

    形象气质如下:

    LuLu UI形象照

如何正确拼写LuLu UI?

LuLu UI,就这样子。

为什么使用LuLu Pure主题?

已迭代多年

LuLu UI始于2015年,已成功支持多个千万PV大型项目,迭代优化多年,较成熟。

上手简单

会简单HTML和JS就可以上手了,不像一些流行框架,需要较多的学习成本。

直接引入CSS和JS文件资源就可以使用,不需要安装配置等一堆操作。

没有任何需要外链的图片资源,资源占用极小。

体验和细节很棒

体验和细节很棒,包括:

1. 代码质量高

使用Eslint对格式进行严格控制,同时有比较详细的注释,API命名和变量命名等至始至终风格一致,方便理解、修改与学习。

2. Retina支持

所有UI组件都是支持retina显示的。主要应用了CSS生成技术,以及SVG的处理。

且每个组件的小图标独立使用,不耦合,完全内联,没有额外http请求。

.icon {
  background: url("data:image/svg+xml;%3Csvg...");
}
3. 交互细腻

渐进增强使用CSS3 animationtransition,以较低成本增强组件交互体验。同时,兼顾hover延迟,弹框背景锁定,组件可视区域控制等很多细节处理。

无障碍访问支持

支持Aria屏幕阅读设备无障碍访问以及键盘无障碍访问。

设计理念

面向设计开发

关于面向设计开发可参见这里:“面向设计的半封装web组件开发”。

面向设计最大的特点在于能够对设计进行最完美的还原,可以很好地展现设计品质。有别于现有组件,然后再制约设计的设计策略。

所以,LuLu UI是没有版本的概念的,只有一条核心线自己往前走。当新项目过来需要使用的时候,完全拷贝LuLu UI到项目开发目录中,然后根据当前项目的设计风格,对HTML和JS进行结构上的调整,是放心大胆的调整。

因此,LuLu UI组件不是传统的大而全,而是走极简轻便灵活方向,表现为模块低耦合,层级扁平;API非常少,尤其一些基本组件,直接就没有API。

LuLu UI没有版本概念,只有主题,目前有morden、peak, pure和edge四个主题,寓意为“现代”、“巅峰”、“纯粹”和“边缘”。

modern版本兼容到IE7(依赖jQuery),peak版本兼容到IE8(依赖jQuery),pure版本兼容到IE9(原生JS),edge版本为前沿版本,不兼容IE。

基于HTML开发

相对于其他UI框架,LuLu UI技术栈更偏向HTML和CSS,以便更友好地还原设计和增强体验。

具体而言,LuLu UI基于HTML开发,实现前端开发分离,具体可参考“顺势而为,HTML发展与UI组件设计进化”。

换句话说,开发的时候,只需要关心原生的HTML控件就可以,组件什么的不用在意。例如,时间选择,当我们选择或修改日期,就直接当组件不存在,处理原生input就好了:

input.addEventListener('change', function() {});

想要修改日期范围,很简单,直接改变原生的属性值就好了:

input.setAttribute('min', '2019-09-05');
input.setAttribute('max', '2029-09-05');

组件自动就会同步,就跟原生的时间选择组件感觉一样!

所谓UI组件,本来就应该只负责UI,跟业务没有瓜葛才对。

LuLu中的很多UI组件都是采用这样的设计思想。

本页贡献者:

zhangxinxu