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.