Flat-UI 是一款基于Bootstrap扁平风格的UI工具包，个人觉得风格比较美观，简洁，控件齐全，加之扁平化趋势，故用在了花图影铺项目中。有免费版和Pro版（$39）可供选择，Pro版多了PSD原件，也用不到，选择免费就可以。
众所周知，前端的项目一直以来都是拷贝HTML，CSS，JS到工程下直接引用就完事了，花图影铺之前就是这么做的，但这种做法已经非常过时了，自己做了修改后将无法再与官方的新版合并，而且有些细微的调整涉及到很多个地方要修改。对于Bootstrap这种巨复杂的设计，要定制化就几乎是不可能的事了。为了解决这些问题，前端开始有了新的玩法，从开发到测试再到构建都需要配套跟上。而Flat-UI 就是采用Grunt来进行自动化构建，用Bower来管理JS依赖，用Less来与编译CSS，等等等等。简单说下是如何构建Flat-UI的。
Git clone下来的Flat-UI 包含了以下一些重要东西：
bower.json
这个是bower要用到的依赖声明文件，可以看到里面依赖了jQuery，bower会自动下载指定版本的jQuery到bower_components目录之下，以备后用。全局安装bower：npm install -g bower，新项目也可以用bower init来生成。
package.json
工程说明文件，包括工程名，作者，版本，Grunt依赖包等一些信息。如果一个新的项目，可以用grunt init打开一个向导一步一步填写。
Gruntfile.js
这个是Grunt执行脚本，会从上面的文件中读取值，里面定义了一些处理事件，比如清理之前构建，测试，压缩CSS，JS，生成文档，复制等等，甚至可以起一个静态服务器来调试。无比强大，类似于Maven pom文件。
以上文件在Flat-UI工程目录中基本上不用修改，只需要在当前目录下执行bower install 下载依赖js包，grunt install 下载grunt工具，再执行grunt dist 就能在dist/目录下获得最新的可发布版本了，将该目录文件复制到web工程中引用就好了。
关于less目录就包含了Flat-UI 所有CSS配置地方，主要修改的就是这里了，比如改变导航背景颜色等等。其中按模块归类的非常好，一眼就能看出该修改哪里，variables.less 定义了所用到的颜色，全局样式，排版，小图标，表格等等。修改起来非常容易，尤其还有一些联动的取色，通过一个基准色，计算出偏亮或者偏暗值，而不需要一个一个去查色板。修改完后只需要grunt dist 就能生成好CSS。
Flat-UI 不仅是一个优秀的UI工具包，同时也是一个学习前后端分离构建的好例子，当然这只是针对我这以后端为主的开发者而言。
参考：https://github.com/designmodo/Flat-UI
本文链接地址：https://dorole.com/1536/