Flat UI 基于 Bootstrap 的扁平化 UI 框架

Question

Flat UI 是一个扁平化 UI 框架，基于 Bootstrap 简约、舒适、响应式前端开发框架，主要的功能是为了简化 Web 开发的流程，包含多个组件可供使用。

Flat UI Free 是一套精美的扁平风格 UI 工具包，基于 Twitter Bootstrap 实现。这套界面工具包包含许多基本的和复杂的 UI 部件，例如按钮，输入框，组合按钮，复选框，单选按钮，标签，菜单，进度条和滑块，导航元素等等。

彩色时尚的图标，可以很容易的进行修改并在各种各样的项目中使用，因为它们都包含原始的分层文件。符号也包含 PSD，HTML/CSS 和 SVG 三种格式。该套件还包括色样 - 提供了 10 种颜色供选择。Flat UI Free 使用的 Lato 字体也可以免费下载。

在大多数情况下，它是非常简单的使用，但是能够使一些表单元素和其他人看起来完全是我们想要的，我们最终使用一些 JS 插件，这意味着它需要一点努力把它们集成到您的项目。

使用方法

Flat UI 基于 Bootstrap 开发，相当于 Bootstrap 的一个主题风格，我们没有修改 Bootstrap 的任何代码，所以你可以放心大胆的使用，目前的版本基于 Bootstrap 3.x 版本，其他版本可能会出现一些不可预知的问题。

我们为您提供 CSS 和 Less 的源码。

1、安装文件

将 flat-ui.css 移动到你的项目中，然后在网页顶部引入 flat-ui.css 文件：

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

2、如果你想修改/扩展你的项目中的 UI。它是建立在 Bootstrap 之上，所以你不会发现一个很大的区别。

开始的最简单的方法是使用我们的启动模板（/dist 文件夹）里的所有文件已包括准备使用（JS 插件都包括在内，但没有初始化。您将根据需要初始化它们。

项目结构

在下载你会发现下面的目录和文件的逻辑分组，共同资产和提供编译后的变化。你会看到这样的东西：

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/
| ├── glyphicons/
| └── lato/
├── img/
├── js/
└── less/
 ├── mixins/
 ├── modules/
 ├── flat-ui.less
 ├── mixins.less
 └── variables.less

让我们看看这个清单：

dist

已经编译好的 Flat UI 模板文件。如果你喜欢一切，你不想改变我们的组件的外观，最好使用版本。这是最简单的方法开始使用平面 UI，包含了组件的实例与文档。

fonts

里面是放置的一些字体图标，如果你不满意这些图标的样式，你完全可以自定义，当整合到您的项目，确保您复制所有的字体文件正确。你可能想改变/添加一些字形。如果是这样的话，打开 IcoMoon 和 import 的选择 selection.json（在 fonts/glyphicons/ 文件夹） 有使所有符号编辑。

js/ — we have tried hard to make all our components look truly "flat." In order to do so we have used some JS plugins. Most of them are well known, while some of them are not. The most JS-ified components are the form components (checkboxes, radios, switches, selects…), since it is not currently possible to style them identically in all browsers. Look at docs/assets/js/application.js for integration examples.

less/ — is where all our stylesheets are located (not preprocessed).

• 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.

Dependencies

External dependencies are managed quickly and easily with Bower . Simply:

1. Add a dependency to bower.json .
2. Run bower install .
3. Add references within your HTML, and you are all set.

Note: If required, run npm install -g bower first to install bower.

Development is quick and easy thanks to Grunt . Simply:

• Run grunt to build the project with your updates included, or
• Run grunt server to build the project, watch for changes, and provide a local server with source maps and live reload as you hack away.

Note: If required, run npm install first to install grunt with grunt packages.

Github 地址： https://github.com/designmodo/Flat-UI