Flat UI 是一套基于 Twitter Bootstrap 实现的精美的扁平风格 UI 组件包，该组件包中既包含了UI常用组件库，还包含一些自实现的复杂的 UI 部件，例如:开关按钮、滑块等等。
[图片0]2flat ui 教程
flat ui 教程，Git clone下来的Flat-UI 包含了以下一些重要东西:
这个是bower要用到的依赖声明文件，可以看到里面依赖了jQuery，bower会自动下载指定版本的jQuery到bower_components目录之下，以备后用。全局安装bower:npm install -g bower，新项目也可以用bower init来生成。
工程说明文件，包括工程名，作者，版本，Grunt依赖包等一些信息。如果一个新的项目，可以用grunt init打开一个向导一步一步填写。
这个是Grunt执行脚本，会从上面的文件中读取值，里面定义了一些处理事件，比如清理之前构建，测试，压缩CSS，JS，生成文档，复制等等，甚至可以起一个静态服务器来调试。无比强大，类似于Maven pom文件。
以上文件在Flat-UI工程目录中基本上不用修改，只需要在当前目录下执行bower install 下载依赖js包，grunt install 下载grunt工具，再执行grunt dist 就能在dist/目录下获得新的可发布版本了，将该目录文件复制到web工程中引用就好了。
关于less目录就包含了Flat-UI 所有CSS配置地方，主要修改的就是这里了，比如改变导航背景颜色等等。其中按模块归类的非常好，一眼就能看出该修改哪里， 定义了所用到的颜色，全局样式，排版，小图标，表格等等。修改起来非常容易，尤其还有一些联动的取色，通过一个基准色，计算出偏亮或者偏暗值，而不需要一个一个去查色板。修改完后只需要grunt dist 就能生成好CSS。
3flat ui colors
扁平化设计并不局限于某种色彩基调，它可以使用任何色彩。但是大多数的设计师都倾向于使用大胆鲜艳的颜色。那么，如何让扁平化设计在色彩上与众不同呢?
[图片1]4flat ui pro
Flat UI Pro is Designmodo出品，适用于Twitter Bootstrap，含有去全套的PSD文件以方便定制。完全响应式设计。
Flat-UI 是一款基于Bootstrap扁平风格的UI工具包，个人觉得风格比较美观，简洁，控件齐全，加之扁平化趋势，故用在了花图影铺项目中。有免费版和Pro版($39)可供选择，Pro版多了PSD原件，也用不到，选择免费就可以。
