BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework

  • By bootflat
  • Last update: Dec 25, 2022
  • Comments: 15
__________               __    _____.__          __
\______   \ ____   _____/  |__/ ____\  | _____ _/  |_
 |    |  _//  _ \ /  _ \   __\   __\|  | \__  \\   __\
 |    |   (  <_> |  <_> )  |  |  |  |  |__/ __ \|  |
 |______  /\____/ \____/|__|  |__|  |____(____  /__|
        \/                                    \/

What is Bootflat?

Bower version NPM version Build Status

BOOTFLAT is an open source Flat UI KIT based on Bootstrap 3.3.0 CSS framework. It provides a faster, easier and less repetitive way for web developers to create elegant web apps.

Bootflat is built on the foundations of Bootstrap, visioned in a stunning flat design. Bootstrap itself is a trusted, reliable and proven tool for developers. Built with Sass 3.4.9.

Bootflat is compatible with the following browsers: IE8, IE9, IE10, IE11, Firefox, Safari, Opera, Chrome.

Thanks for supporting our framework, and enjoy!

Preview

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.

Bootflat UI Kit

Features:

1. Bootstrap 3.3.0

Bootflat is built on Bootstrap 3.3.0: the sleek, intuitive, and powerful mobile-first front-end framework for faster and easier web development.

2. HTML5 & CSS3

Bootflat's components are built with HTML5 and CSS3. The pages use header, nav and section to build the layout. Bootflat also comes with several splendid color schemes built-in, and allows for easy customization.

3. Lightweight

Bootflat uses lightweight high-function plugins for maximum performance, keeping CSS and JS file sizes down.

4. Mobile first

Bootflat is fully responsive, built for mobile-first in mind. It provides off screen navigation, and almost all the widgets are compatible with all screen sizes.

Quick start

  • 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

The source files are in the bootflat/ folder. You can just grab the bootflat/css/, bootflat/scss/,bootflat/js/ and bootflat/img/ folders and you'll be good to go.

Test bootflat

Flat button ">


    
        Minimal Bootflat example
        
        
    

    
        

Test bootflat

Flat button

Table of contents:

Changelog:

2014/11/4 version 2.0.4 support bootstrap 3.3.0

2014/9/3 version 2.0.4 add widget: TimeLine

2014/8/26 add color picker, you can make a flat design with it

2014/7/9 version 2.0.3 support bootstrap 3.2.0 and Sass 3.3.9, add wigets: Calendar, Pricing

2014/6/5 version 2.0.2 add wigets: Toggle, Selecter, Stepper

2014/4/3 version 2.0.1 support bootstrap 3.1.1

2014/3/6 version 2.0.0 support bootstrap 3.0.1

Community

LICENSE

Bootflat is licensed under the MIT Open Source license. For more information, please see the LICENSE file in this repository.

Github

https://github.com/bootflat/bootflat.github.io

Comments(15)

  • 1

    Missing form styles?

    I can't get my form styles to work, so I had a look into the _form.scss file, and found that a lot of styles were missing, i.e. .form-group.

    Compare it to https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_forms.scss

    Are you supposed to include the normal bootstrap.css as well? Seems to fix the form styling, atleast.

  • 2

    For easy installation - what one line is added to head tag and folder paths and ...

    i know i must be missing something basic so please forgive me ... suffice it to say i'm confused as to how to get Bootflat working with a site that is using Bootstrap 3 ...

    e.g., in the Bootflat getting started page - http://bootflat.github.io/getting-started.html - it says "Upload all Bootflat files and paste one line of code at the bottom of your head tag. That’s it!" ... yet neglects to say what that one line of code should be ... let alone where to upload corresponding Bootflat files and correct folder path(s) to upload in a given Bootstrap site ...

    accordingly, i'm at a loss as to how to incorporate Bootflat into my Bootstrap 3 site ...

    e.g., i have domain.com that is using Bootstrap 3 nicely ... it has sub folder of css with bootstrap.min.css in that folder ... thus do i add bootflat.min.css to that folder and then add head call out to that css file ..??.. and if so, how can i start to leverage color swatches like mint and/or other Bootflat css elements ..??..

    thanks in advance for your attention to this ... very beautiful and would love to leverage but i'm old fashion download - zip - unzip - upload to theme directory - and tweak from there kind of (child theme) person thus a bit confused by all the latest greatest with oocss, less, git, npm, bower, yada yada options ...

    accordingly, any Bootflat integration pointers you can share are greatly appreciated ... cordially, chuck scott

  • 3

    Bower Install failed using latest Version

    Installation from bower failed.

    ./bower.json

      "bootflat": "~2.0"
    },
    ...
    

    Command:

    bower install 
    

    Output:

    bower bootflat#~2.0         not-cached git://github.com/flathemes/bootflat.git#~2.0
    bower bootflat#~2.0            resolve git://github.com/flathemes/bootflat.git#~2.0
    bower bootflat#~2.0       ENORESTARGET No tag found that was able to satisfy ~2.0
    
    Additional error details:                                                                                                                                                                       
    No versions found in git://github.com/flathemes/bootflat.git
    
  • 4

    Allow button-default-hover to be overridden.

    The button-default-hover variable is currently not being used. It would be great to be able to override the hover state of the default button independently of the normal button.

  • 5

    Prepros App scss compiling error

    Hi,

    just wanted you to know scss can't compile with Prepros App. It shows error:

    Syntax error: Invalid CSS after " @at-root &": expected "{", was "-link {"
    "-link" may only be used at the beginning of a compound selector. on line 61 of bootflat/_button.scss from line 10 of bootflat.scss Use --trace for backtrace.

  • 6

    Shasum error when installing via npm 1.4.3

    Ran into trouble running "npm install bootflat"

    Node version v0.10.26 npm version 1.4.3

    npm ERR! Error: shasum check failed for /home/intr0/tmp/npm-11960-Pk9CsRqw/1398117320932-0.7942743087187409/tmp.tgz
    npm ERR! Expected: d74a27eb3251221944657808ea21579fc7fbc4c8
    npm ERR! Actual:   61e8a6aeed60b7288a012aa8cc5c2eebac137b03
    npm ERR! From:     https://registry.npmjs.org/bootflat/-/bootflat-2.0.1.tgz
    npm ERR!     at /usr/local/lib/node_modules/npm/node_modules/sha/index.js:38:8
    npm ERR!     at ReadStream.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/sha/index.js:85:7)
    npm ERR!     at ReadStream.EventEmitter.emit (events.js:117:20)
    npm ERR!     at _stream_readable.js:920:16
    npm ERR!     at process._tickCallback (node.js:415:13)
    npm ERR! If you need help, you may report this *entire* log,
    npm ERR! including the npm and node versions, at:
    npm ERR!     <http://github.com/npm/npm/issues>
    
    npm ERR! System Linux 3.11-2-amd64
    npm ERR! command "/usr/local/bin/node" "/usr/local/bin/npm" "install" "bootflat"
    npm ERR! cwd /home/intr0/Applications/node-v0.10.26
    npm ERR! node -v v0.10.26
    npm ERR! npm -v 1.4.3
    npm ERR! 
    npm ERR! Additional logging details can be found in:
    npm ERR!     /home/intr0/Applications/node-v0.10.26/npm-debug.log
    npm ERR! not ok code 0
    
  • 7

    How to install bootflat?

    I have bootstrap3-sass installed. My main.scss looks like this:

    @import "components/font-awesome/scss/font-awesome"; 
    @import "components/bootflatv2/bootflat/css/bootflat.css";
    @import "components/sass-bootstrap/lib/bootstrap";
    @import "./_custom-varables";
    @import "./custom-mixins";
    @import "./non-responsive";
    @import "./typeahead-bs3";
    @import "./sidebar";
    @import "./review-form";
    @import "./animations";
    

    I wasn't able to make project work with bootflat.scss, so I've decided to import css instead. Bootsrap rules override bootflat rules. I'm a little confused on how to install bootflat... Do I still need bootrap?

  • 8

    Add IE11 as a supported browser

    I checked browser compatibility for Bootflat in Windows 8.1 and with IE 11 using BrowserStack and the site rendered fine. See here for screenshot: http://awesomescreenshot.com/0562j4ni1f

    Afterwards, I edited the pages which referred to browser compatibility and added IE 11.

    Cheers screen shot 2014-03-22 at 5 56 47 pm

  • 9

    navbar toogle menu in responsive mode don´t work

    Also i was checking in your demo, not working ( the toggle is there but don´t open 2014-03-17_09h11_16

    Using Firefox for windows 7 last version, also testes in chrome and safari, not working also.

  • 10

    No progress bar animation in bootflat.css

    Maybe I'm just missing something but I tried making the striped, animated progress bar shown on the homepage but instead got a boring, monochrome one with the text "80% (danger)". I looked at the source on the site and it looks like it's not even using bootflat.css but site.css and indeed, bootflat.css doesn't have any keyframing.

    Should I be using the site's CSS instead?

  • 11

    changed http to https

    Since there's no need for http links I've converted the working http links to https. This also fixes mixed content errors on https://bootflat.github.io.

  • 12

    Bootstrap 4 support

    Hey, I just found this library and it looks very nice. I would like to ask if there's any plan to support Bootstrap 4 now that's officially released and if you would be interested in collaborating on doing so.

  • 13

    Not able to perform npm install bootflat

    Here is the error:

    npm ERR! Windows_NT 10.0.15063
    npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "bootflat"
    npm ERR! node v6.11.3
    npm ERR! npm  v3.10.10
    npm ERR! code ENOSELF
    
    npm ERR! Refusing to install bootflat as a dependency of itself
    npm ERR!
    npm ERR! If you need help, you may report this error at:
    npm ERR!     <https://github.com/npm/npm/issues>
    
    npm ERR! Please include the following file with any support request:
    npm ERR!     C:\Users\lenovo-pc\Desktop\bootflat\npm-debug.log
    
    C:\Users\lenovo-pc\Desktop\bootflat>npm install bootflat
    npm ERR! Windows_NT 10.0.15063
    npm ERR! argv "C:\\Program Files\\nodejs\\node.exe" "C:\\Program Files\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "bootflat"
    npm ERR! node v6.11.3
    npm ERR! npm  v3.10.10
    npm ERR! code ENOSELF
    
    npm ERR! Refusing to install bootflat as a dependency of itself
    npm ERR!
    npm ERR! If you need help, you may report this error at:
    npm ERR!     <https://github.com/npm/npm/issues>
    
    npm ERR! Please include the following file with any support request:
    npm ERR!     C:\Users\lenovo-pc\Desktop\bootflat\npm-debug.log
    

    Kindly help me.

  • 14

    Bower warnings/errors in install

    Please notice the [Error] lines, it seems easy changes (about lowercase, description and main)

    [Executing] /usr/local/bin/bower install 
    [Progress] bower bootflatv2#*          not-cached https://github.com/bootflat/bootflat.github.io.git#*
    [Progress] bower bootflatv2#*             resolve https://github.com/bootflat/bootflat.github.io.git#*
    [Progress] bower bootflatv2#*            checkout v2.0.4
    [Error] bower bootflatv2#*        invalid-meta The "name" is recommended to be lowercase, can contain digits, dots, dashes
    bower bootflatv2#*        invalid-meta The "description" is too long, the limit is 140 characters
    [Error] bower bootflatv2#*        invalid-meta The "main" field cannot contain globs (example: "*.js")
    bower bootflatv2#*        invalid-meta The "main" field cannot contain globs (example: "*.js")
    bower bootflatv2#*        invalid-meta The "main" field cannot contain globs (example: "*.js")
    [Error] bower bootflatv2#*        invalid-meta The "main" field cannot contain globs (example: "*.js")
    bower bootflatv2#*        invalid-meta The "main" field cannot contain globs (example: "*.js")
    [Progress] bower bootflatv2#*            resolved https://github.com/bootflat/bootflat.github.io.git#2.0.4
    [Progress] bower bootflatv2#*             install bootflatv2#2.0.4
    [Progress] 
    bootflatv2#2.0.4 bower_components/bootflatv2
    
  • 15

    Typo in _tab.scss

    "$tab-font-color-acitve" instead of "$tab-font-color-active"

    bootflat.github.io/bootflat/scss/bootflat/_tab.scss

    Line 8 declaration, line 52 only usage