Flat UI简介

Flat UI简介

 一、简介

Flat UI是基于Bootstrap之上进行二次开发的扁平化前端框架，他提供了动感、时尚的风格色调搭配，简洁、炫丽的功能组件，同时还提供了更为平滑的js交互动画，可以称得上前端扁平化设计框架的优秀代表之一

二、如何评价Bootstrap和Flat UI

先来说Bootstrap吧。Bootstrap是基于HTML5和CSS3开发的，对于非前端人员来说可以非常方便的构建一个漂亮的网站界面。但是纵观所有基于Bootstrap
构建的网站，你会发现所有的网站风格都差不太多。我们可以通过（Bootstrap优站精选）来看一些它的网站实例。

总得来说，Bootstrap是我们这些非前端程序员一个非常称手的前端工具。我曾经用过Bootstrap为客户开发过一套考试平台界面，当时我的手头没有找到合适的美工来帮助我。当时我利用一天的时间去看它的文档，然后就投入到我的应用中。我没有特别深入的去研究它，因为我的理念是够用就OK。

我的评价是：简单，方便，非前端程序员的好帮手。

再说来说说Flat UI，“Flat UI是基于Bootstrap做的Metro化改造，由Designmodo提供。Flat UI包含了很多Bootstrap提供的组件，但是外观更加漂亮。在此强烈推荐！”这是Bootstrap官方对Flat UI定义。Flat UI它有自已的一套CSS,JS,图标，字体等等一些素材。Flat UI可以做出扁平化站点的风格，因为前几年扁平化风格很火。我对Flat UI不作评价，因为没用过。

最后说一下，我认为如果把Bootstrap研究的通一点的话，自已也可以基于Bootstrap开一个自已风格的样式。

三、开始文档

下载链接：http://www.bootcss.com/p/flat-ui/

一、什么是Flat UI？

    Flat UI 是一种漂亮的Boostrap主题。我们重新设计了它的很多组件，使得其看起来扁平化。

    其中的大部分组件，都是用起来很简单的。但是，为了确保其中一些组件外观和我们想要的一样，我们最终使用了一些JS插件。这意味着，需要一点努力来将它们整合到你的项目中去。

二、如何使用Flat UI？

     由于Flat UI是建立在Bootstrap上层的一个主题，你可以在你的Bootstrap3项目中使用它。我们没有修改任何一行Bootstrap代码，因此你能在正在开发的项目中安全地使用Flat UI（除非你自己砍掉了它的代码！）:)

    我们为你提供了CSS和Less资源。

　　1.将flat-ui.css放入到你的工程文件夹中，并且在你的模板/html页面中包含它：

<link href="dist/css/flat-ui.css" rel="stylesheet">

使用CSS就是这样简单。　　

　　2.如果你想在你的项目中修改/扩展Flat UI，就用的上Less。它的搭建和Bootstrap类似，你不会发现太大的差异。

    最简单的开始方法是使用我们的start-up模板（在/dist/folder目录下），所有的文件在其中已经被包含并可以使用（包含了JS插件，但没有初始化，你可在需要的时候初始化它们）。

三、文件结构

Flat UI具有以下结构：

flat-ui/
├── dist/
|   ├── css/
|   |   ├── vendors/
│   |   ├── flat-ui.css
│   |   └── flat-ui.min.css
|   ├── js/
|   |   ├── vendors/
│   |   ├── flat-ui.js
│   |   └── flat-ui.min.js
|   ├── fonts/
|   |   ├── lato/
|   |   └── glyphicons/
|   |        ├── flat-ui-icons-regular.eot
|   |        ├── flat-ui-icons-regular.svg
|   |        ├── flat-ui-icons-regular.ttf
|   |        ├── flat-ui-icons-regular.woff
|   |        └── selection.json
|   ├── img/
|   └── index.html
├── docs/
|   ├── examples/
|   ├── components.html
|   ├── getting-started.html
|   └── template.html
├── fonts/
├── img/
├── js/
└── less/
    ├── mixins/
    ├── modules/
    ├── flat-ui.less
    ├── mixins.less
    └── variables.less

让我们来遍历一下该列表。

dist/——编译过的Flat UI模板。如果你喜欢每一个模板，并且不想改变我们组件的外观，最好使用原版。这是使用Flat UI最简单的方式。

——组件实例和说明文档

fonts/——Lato和字体图标的本地版本。当整合它们到你的项目时，得确保正确地复制了所有的字体文件。你也许想改变/添加几个符号，如果是这样的话，打开IcoMoon进入selection.json（在/fonts/glyphicons/目录中），然后编辑所有的符号。

js/——我们已经努力尝试确保我们所有的组件看起来真正“扁平化”。为此我们得使用一些JS插件。它们中的大多数很出名的，但也有一些不是。最JS-ified的组件是表单组件（checkboxes, radios, switches, selects…），因为它们在所有浏览器中的风格不可能一样。参考docs/assets/js/application.js中的例子整合。

less/——是用来定位我们所有样式表（没有预处理）。

modules/ is where the components themselves are.
mixins/ useful utilities.
flat-ui.less links everything into one single bundle.
mixins.less helps automate things.
variables.less is where all the default variables are.