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).
Once purchased, unzip the compressed archive to see the structure:
flat-ui/ ├── bootstrap/ ├── css/ ├── demo.css └── flat-ui.css ├── fonts/ ├── images/ ├── js/ └── less/ ├── demo.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
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
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
less/ — where all our stylesheets are (not preprocessed).
variables.lessis where all variables are.
flat-ui.lesslinks everything into one single bundle.
demo.lessis where we do magic.
icon-font.lessmakes all icon glyphs work. Converted by IcoMoon.
fonts.lessis where all custom fonts.
mixins.lesshelps automating things. Feel free to add yours here.
scaffolding.lessis 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.
bottom.lessBottom menus and footer.
checkbox-and-radio.lessCustom checkboxes and radios.
dialog.lessUsed for system messages.
iconbar.lessIcon bar (another navigation type).
tagsinput.lessTags input field.
ui-spinner.lessText input with increment/decrement.
input-icons.lessIcons for text-based form fields.