Getting Started with Bootflat Framework

An overview of Bootflat, why we built it, how to use it, and what you should know along the way.

Getting started With Bootflat is easy. Whether you are a master of Sass, building a new app, we've got you covered.

Overview

Why is this important? Bootstrap is a reliable and proven tool for developers, validated in the field. It reminds us of Superman, a friend you can trust completely with a serious project.

OOCSS Approach
Object-based coding method encourages code reuse and creates faster and more efficient style sheets, which are easier to add to and maintain.
Bootstrap 3.3.0 Support
Now Bootflat is supporting Bootstrap 3.3.0 as well.
Configurable Color Scheme
You can change any or all of the colors if you wish. Bootflat is easy to configure and match to your brand's color scheme.
Easy Installation
Upload all Bootflat files and paste one line of code at the bottom of your head tag. That’s it!
Bootflat UI Kit Free Download
Bootflat UI Kit is PSD User Interface Pack including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.
Bootflat Flat UI Color Picker
Bootflat Flat UI Color Picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs.

Download

Download the latest official release of Bootflat and get started!

  • Version 2.0.4
  • Released July 09 2014

Download Bootflat Framework (v2.0.4)

Install

  • Clone the repo: git clone https://github.com/bootflat/bootflat.github.io.git
  • Install with npm npm install bootflat
  • Install with bower bower install Bootflat

What's included

Within the download you'll find the following directories and files, logically grouping common assets and providing both compiled and minified variations.

Once downloaded, unzip the compressed folder to see the structure of (the compiled) Bootflat. You'll see something like this:

bootflat/
├── css/
│   ├── bootflat.css
│   ├── bootflat.css.map
│   └── bootflat.min.css
├── js/
│   ├── icheck.min.js
│   ├── jquery.fs.selecter.min.js
│   └── jquery.fs.stepper.min.js
├── fonts/
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   └── glyphicons-halflings-regular.woff
├── sass/
│   ├── bootflat.scss
│   └── bootflat/
│       ├── accordion.scss
│       ├── alert.scss
│       ├── breadcrumb.scss
│       ├── button.scss
│       ├── button_group.scss
│       ├── calendar.scss
│       ├── checkbox_radio.scss
│       ├── dropdown.scss
│       ├── footer.scss
│       ├── form.scss
│       ├── global.scss
│       ├── jumbotron.scss
│       ├── label_badge.scss
│       ├── list.scss
│       ├── media_list.scss
│       ├── modal.scss
│       ├── navbar.scss
│       ├── pager.scss
│       ├── pagination.scss
│       ├── panel.scss
│       ├── pill.scss
│       ├── popover.scss
│       ├── pricing.scss
│       ├── progress.scss
│       ├── selecter.scss
│       ├── stepper.scss
│       ├── tab.scss
│       ├── thumbnail.scss
│       ├── timeline.scss
│       ├── toggle.scss
│       ├── tooltip.scss
│       ├── typography.scss
│       └── well.scss
└── img/
    └── check_flat/
        ├── default.png
        └── default.psd

CSS/SASS

The CSS can stand on its own, but it is also built to be enhanced by the developer. For simplicity you can always just add in your own CSS and override default properties. And for even more power and flexibility, the core is written with Sass 3.4.9 and includes easily customized variables and mixins. We feel we’ve left the CSS in a state which can be easily extended to get your own look and feel.

Browser Support

As such, our browser support tends to be whatever Web View API is available to native on a given platform. For Bootflat v2.0.4, that means UIWebView for E8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.

Bootflat UI Kit

For the designers, we offer a free PSD file for you, it including a set of beautiful and pure components, which you can use to create startup projects, websites or iOS/Android Apps.

Download Bootflat UI Kit (v2.0.0)

Bootflat Flat UI Color Picker

Bootflat Flat UI Color Picker is a project digging the Flat Color Picker which gives you the perfect colors for flat designs.

Licensing

Bootflat is an open source framework released under a permisive MIT license. This means you can use Bootflat in your own personal or commercial projects for free. MIT is the same license used by such popular projects as jQuery and Ruby on Rails.