1. Flat UI Getting started (document translation), flatui

1. Flat UI Getting started (document translation), flatui

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

1. What is Flat UI?

Flat UI is a pretty Boostrap topic. We re-designed many of its components to make them look flat.

Most of these components are easy to use. However, to ensure that some of the components look the same as we wanted, we finally used some JS plug-ins. This means that a little effort is needed to integrate them into your project.

2. How to use the Flat UI?

Because Flat UI is a topic built on the upper layer of Bootstrap, you can use it in your Bootstrap3 project. We didn't modify any line of Bootstrap code, so you can safely use the Flat UI in a development project (unless you cut off its code yourself !) :)

We provide you with CSS and Less resources.

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

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

CSS is simple.

2. If you want to modify/extend the Flat UI in your project, use Less. It is similar to Bootstrap, so you won't find much difference.

The simplest way to start is to use our start-up template (under the/dist/folder directory), where all files are included and available (including JS plug-ins, but they are not initialized. You can initialize them as needed ).

Iii. File structure

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 traverse the list.

Dist /--Compiled Flat UI template. If you like every template and do not want to change the appearance of our components, you 'd better use the original version. This is the easiest way to use the Flat UI.

-- Component instances and instructions

Fonts/-- Lato and the local version of the font icon. When integrating them into your project, make sure that all the font files are copied correctly. You may want to change/add several symbols. If so, open IcoMoon and enter selection. json (in the/fonts/glyphicons/directory), and then edit all the symbols.

Js /--We have tried to make sure that all of our components look "flat ". For this reason, we need to use some JS plug-ins. Most of them are famous, but some are not. The JS-ified components are form components (checkboxes, radios, switches, selects ...), Because they cannot have the same style in all browsers. See integration examples in docs/assets/js/application. js.

Less/-- Is used to locate all our style sheets (without preprocessing ).

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.

Iv. Additional

(Not translated yet)

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

Note:If required, runnpm install -g bowerFirst to install bower.

Development is quick and easy thanks to Grunt. Simply:

• RungruntTo build the project with your updates encoded, or
• Rungrunt serverTo build the project, watch for changes, and provide a local server with source maps and live reload as you hack away.

Note:If required, runnpm installFirst to install grunt with grunt packages.