1. Flat UI Getting started (document translation)

Download Link: http://www.bootcss.com/p/flat-ui/

First, what is the flat UI?

The Flat UI is a beautiful boostrap theme. We redesigned many of its components to make it look flat.

Most of these components are very simple to use. However, to make sure some of these components look the way we want, we end up with some JS plugins. This means that a little effort is needed to integrate them into your project.

Second, how to use the flat UI?

Because the flat UI is a theme built on top of bootstrap, you can use it in your BOOTSTRAP3 project. We haven't modified any line of bootstrap code, so you can safely use the flat UI in the project you're developing (unless you cut out its code yourself!). ）:)

We have provided you with CSS and less resources.

1. Put the flat-ui.css into your project folder and include it in your template/html page:

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

Using CSS is as simple as that.

2. If you want to modify/extend the flat UI in your project, use less. It's built like Bootstrap, and you won't find much of a difference.

The simplest way to get started is to use our start-up template (under the/dist/folder directory), where all the files are already included and ready to use (including the JS plugin, but without initialization, you can initialize them when needed).

III. Structure of the document

The Flat UI has the following structure:

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

Let's go through the list.

dist/-- compiled flat UI template. If you like every template and don't want to change the look of our components, it's best to use the original. This is the simplest way to use the flat UI.

--component instance and description document

fonts/The local version of the--lato and font icons. When consolidating them into your project, be sure to copy all the font files correctly. You may want to change/add a few symbols, and if so, open Icomoon into Selection.json (in the/fonts/glyphicons/directory) and edit all the symbols.

js/-- We've tried to make sure all of our components look really "flat". For this we have to use some JS plugins. Most of them are famous, but some are not. The Js-ified component is the form component (checkboxes, radios, switches, selects ... ), because their style in all browsers is unlikely to be the same. Refer to the example integration in Docs/assets/js/application.js.

less/--is used to locate all of our style sheets (no preprocessing).

Modules/is where the components themselves are.mixins/useful utilities.flat-ui.less links everything to one single bun Dle.mixins.less helps automate things.variables.less is where all the default variables is.

Iv. Additional

(not translated)

External dependencies is 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 is all set.

Note: If required, run first to npm install -g bower 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 first to npm install install the grunt with grunt packages.

1. Flat UI Getting started (document translation)