Getting started · Flat UI Free

# Getting started

### What is Flat UI?

Flat UI is a beautiful theme for Bootstrap. We redesigned many of it's components to look flat in every pixel.

However, to make form and some other elements look exactly how we want we ended up using JS plugins which means it requires a little more efforts integrating them into your project.

### How to Use It?

Since it is built on top of Bootstrap as a theme you can use it on your project with Bootstrap 3. We did not modify any line of Bootstrap so you will be safe using Flat UI in your ongoing project (unless you hacked it :)

We provide you with CSS and Less sources.
1. Using CSS is as easy as dropping `css/flat-ui.css` to your project folder and including it in your template/html page: `<link href="css/flat-ui.css" rel="stylesheet">`

2. Use Less if you want to modify/extend Flat UI in your project. We built it Bootstrap way so you won't find big difference.

The easiest way to start is by using our start-up template where all files are already included and ready to be used (JS plugins are included, but not initialized for no need).

### File Structure

Once purchased, unzip the compressed archive to see the structure:

      flat-ui/
      ├── bootstrap/
      ├── css/
          ├── demo.css
          ├── docs.css
          └── flat-ui.css
      ├── fonts/
      ├── images/
      ├── js/
      └── less/
          ├── demo.less
          ├── docs.less
          ├── variables.less
          ├── flat-ui.less
          ├── fonts.less
          ├── icon-font.less
          ├── mixins.less
          ├── scaffolding.less
          ├── spaces.less
          └── modules/

Let's go from top to the bottom of this list.

bootstrap/ — as you can guess this is a folder where all original Bootstrap files are (untouched). Before using our theme please make sure you didn't modify anything that can break compatibility: paddings, margins, etc.
Note: you can modify `variables.less` safely.

css/ — compiled Flat UI CSS. If you like everything and don't want to change the look of our components it is better to use CSS version. This is an easiest way to start using Flat UI.

fonts/ — yes, this is an icon font. When integrating make sure you copied all font files correctly. You might want to change/add glyphs. If so, open IcoMoon and import `icomoon-session.json` there to make all glyhps editable. You can also watch a video screencast on how to add your custom glyphs.

images/ — unfortunately we should use them in few cases. The rest is in the glyphs.

js/ — we tried hard to make our components all look true Flat. To do so we used JS plugins. Most of them are well known, some of them not. The most JS-ified part is form components: checkboxes, radios, switches, selects since it is not currently possible to style them identically in all browsers. Open `application.js` for integration examples.

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

- `variables.less` is where all variables are.
- `flat-ui.less` links everything into one single bundle.
- `demo.less` is where we do magic.
- `docs.less` where all our stylesheets for documentation.
- `icon-font.less` makes all icon glyphs work. Converted by IcoMoon.
- `fonts.less` is where all custom fonts.
- `mixins.less` helps automating things. Feel free to add yours here.
- `scaffolding.less` is where you can find basic styles for body, anchors and other elements.
- `modules/` is where all components are. If you want to add yours create module-name.less here. Name it as a class name if possible.

### New components

- `checkbox-and-radio.less` Custom checkboxes and radios.
- `iconbar.less` Icon bar (another navigation type).
- `select.less` Custom selects.
- `switch.less` Custom switch.
- `tagsinput.less` Tags input field.
- `ui-datepicker.less` Datepicker widget.
- `ui-slider.less` Range slider.
- `ui-spinner.less` Text input with increment/decrement.
- `input-icons.less` Icons for text-based form fields.

### Components restyled

Components documentation.

- `buttons.less`
- `caret.less`
- `dropdown.less`
- `forms.less.less`
- `navbar.less`
- `pager.less`
- `pagination.less`
- `progress-bars.less`
- `tooltip.less`
- `type.less`