PrimusUI

Primus名字取自于《变形金刚》中的元始天尊。

现在网上有许多开源的UI库，覆盖面很全，可满足很多场景。

就因为大而全，有时候修改些小地方可能都会比较费劲。

实际开发中如果有一套自己可以驾驭的UI库，不但能节省很多开发时间，

而且可以随心所欲的根据不同场景修改不同代码。

为此，我借鉴了很多网上的开源库，整理修改了这套简单的代码集合，希望对大家的开发会有帮助。

这个简单的UI库，每段CSS少则几十行，多则也就一百多行。

在线demo：

项目主页：点击查看

在线文档：点击查看

准备知识

1、CSS开发使用了现在时髦的SASS，CSS预处理器。

2、代码构建工具使用了Gulp，增强工作流程。先要安装NodeJS，在项目中有一个package.json文件，里面记录了依赖包，在当前目录中输入“npm install”可进行包的安装。（国内用户由于网络问题，需要借助淘宝的 cnpm。）如果初次接触，可以参考教程《自动化构建工具gulp》

3、文档是由Jekyll编译而成， Jekyll是一个静态网站生成器。如果初次接触，可以参考一下教程《用jekyll制作网站》

4、借助flexible.js，通过计算html中的font-size（用于计算rem），设置viewport的放大倍数，来实现移动自适应。UI库中除了字体、边框宽度等，大部分是使用rem作为单位，可以引入（PostCSS插件中的 “postcss-px2rem”），自动计算。

5、浏览器属性兼容是个烦人的事，通过引入PostCSS内的插件 “autoprefixer”，可自动匹配前缀。第4和第5条的配置写在gulpfile.js中。

目录结构

PrimusUI
└─ ─ ─ ─ assets UI库展示页面中使用到的图片等
└─ ─ ─ ─ css SASS编译出来的CSS代码
└─ ─ ─ ─ docs  UI库文档说明，由工具Jekyll编译出来
└─ ─ ─ ─ font  自定义字体
└─ ─ ─ ─ js  JavaScript文件
└─ ─ ─ ─ sass  CSS预处理文件
└─ ─ ─ ─ site  Jekyll源文件
└─ ─ gulpfile.js Gulp配置文件
└─ ─ package.json  Gulp需要的依赖包
└─ ─ open.bat  windows批处理，用于在当前目录中打开dos窗口
└─ ─ *.html  UI库各模块展示页面

CSS特点

1、响应式布局，大量使用rem、弹性属性、百分比属性，可适应移动端多种屏幕。

2、normalize.scss：在流行的重置样式“normalize.css” 的基础上，做出更适合移动端的样式调整。

3、typeface.scss：列举了多种场景的字体颜色与大小，字截断，移动端常用的箭头标记。

4、icon.scss：可在第三方iconfont 库，按需下载现成的图标，也可在此网站中上传svg文件，自动制成特定图标。

5、grid.scss：多样化的网格实现，网格中包括先进的弹性设置(预设了12种宽度)、百分比设置(预设了24种宽度)，左偏移，左移动，右移动(也是24种)。与PC端的固定宽度不同，移动端屏幕各异，所以不能将每个元素的宽度定死。而弹性宽度或百分比在设置后可自动计算数值。相比较于传统的float布局，弹性布局更容易控制，尤其是在对齐方式中设置中。