Skip to content
Get packs

Guide · Open source

How to use Flat-UI: install, customise and build pages

Updated · written with AI from the project's own documentation and checked against our catalogue data

Flat-UI is a free theme that restyles Bootstrap's components with a flat, minimal look. This guide explains what is in the package, how to get it onto your machine, and how to start using its compiled CSS and JavaScript in a page. By the end you will know which files to load and where to find the demo and documentation.

Flat UIdesignmodo/Flat-UI · ★ 15.3k · MIT

Quick start

  1. 1Get the code. Clone the repository with git clone, or download the latest release archive.
  2. 2Install dependencies. Run npm install in the project folder. Run bower install too if you use Bower.
  3. 3Open the docs. Read docs/getting-started.html or the hosted getting started page to see what the framework contains.
  4. 4Pick your build. Use flat-ui.* for readable CSS and JS, or flat-ui.min.* for production.
  5. 5Link the files. Add the CSS and JavaScript from dist to your HTML page, following docs/template.html.
  6. 6Build and check the page. Compare your page with the demo and the component examples to confirm the styling.

What is Flat-UI and who is it for?

Flat UI Free is a set of HTML, CSS, LESS and JavaScript files that restyle Bootstrap's components with a flat look. The project describes itself as a beautiful theme for Bootstrap, with many components redesigned to look flat.

It suits developers who already know Bootstrap and want a flatter style, and small teams building simple marketing or landing pages. It is a code-based theme, not a no-code builder.

Get the files: download, clone or Bower

The README lists three quick start options: download the latest release as a zip, clone the repository, or install with Bower. Cloning is the route described for working from source.

  • Download the latest release from the release archive linked in the README.
  • Clone the repo with the command below.
  • Install with Bower using the package name flat-ui.
git clone https://github.com/designmodo/Flat-UI.git

Install dependencies

After cloning, the README says to run npm install and bower install to install dependencies. Node.js and npm are needed for the npm step. The README does not state a required Node.js or npm version, so use a current LTS release and check the getting started page if something fails. Bower is optional and only needed if you use the bower install step.

  • Prerequisites: Node.js and npm (for npm install); Bower (optional, for bower install).
npm install bower install

Understand the folder structure

The download separates source assets from compiled output. The app folder holds styles, scripts and fonts. The dist folder holds the compiled and minified builds, and docs holds the documentation and examples.

For most pages you only need the compiled files from dist: flat-ui.* for normal CSS and JS, and flat-ui.min.* for minified versions. Fonts with icons are included.

  • app/styles: SCSS source including flat-ui.scss and _variables.scss.
  • dist/css and dist/scripts: compiled flat-ui.* and minified flat-ui.min.* files.
  • docs: getting-started.html, components.html, index.html and template.html, plus docs/examples.

Use Flat-UI in your own page

Copy the compiled CSS and JavaScript from the dist folder into your project, then link them from your HTML. The exact paths depend on where you put the files. The README does not give a full template, so the docs/template.html file and the examples folder are the best starting points to copy from.

Open the demo page or the docs locally, or use the public GitHub Pages site, to see each component before you use it.

  • Start from docs/template.html or a file in docs/examples.
  • Check docs/components.html for component markup.
  • Use the minified build for production pages.

Know the limits before you start

The README does not say that Flat-UI is actively expanding. It points to version 2.3.0 as the latest release it links to, so do not expect a large, fast-growing component library. If you need SASS source files, the README points to a third-party port that also supports Flat-UI Pro, rather than providing them directly.

The project's license combines CC BY 3.0 and MIT. The README asks users to link to the Designmodo website, though it says the elements can be used anywhere.

  • Need SASS source? See the third-party port linked in the README.
  • Typeface used: Lato, which the README says is free to download.

What people use it for

  • A developer restyling a Bootstrap-based site with a flatter look.
  • A designer prototyping a site with ready-made component styles.
  • A small team building a simple landing page quickly.
  • Someone who wants a free MIT-licensed starting theme for a static website.

Frequently asked questions

How do I install Flat-UI?

Clone the repository with git clone https://github.com/designmodo/Flat-UI.git, then run npm install in the project folder. You can also download the latest release zip or install with Bower using bower install flat-ui.

Is Flat-UI free to use?

Yes. The README says Flat UI Free is licensed under CC BY 3.0 and the MIT License. It asks users to link to the Designmodo website, but says the elements can be used anywhere.

What do I need to run Flat-UI?

The README lists Node.js and npm for the npm install step, and Bower as optional for bower install. It does not state specific version numbers, so use a current release.

Does Flat-UI support SASS?

The README does not provide SASS source for direct use. It points to a third-party port, Designmodo's Flat-UI ported to SASS with support for Flat-UI Pro, made by @wingrunr21.

What is the difference between Flat-UI and Bootstrap?

Flat-UI is built on Bootstrap and restyles its components with a flat look. Bootstrap is the broader framework, so Flat-UI is the better choice if you want that visual style without designing every component yourself.

What are good alternatives to Flat-UI?

Comparable projects listed for this item are Bootstrap, Tabler, AdminLTE and Halfmoon. Pick Bootstrap if you want the base framework with default styling, or one of the others if you need a different look for dashboards or admin panels.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Flat-UI suits developers and designers who already use Bootstrap and want a free, flat-styled starting theme for simple sites or landing pages. If you need a large, actively growing component library, a no-code builder, or SASS source files directly, look at Bootstrap itself or another comparable project.

Install options & downloads