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.
Home Page: http://bootflat.github.io
License: MIT License
I tried to add bootflat to my project but it can not be compiled with compass 0.12.3.
error app/styles/style.scss (Line 8 of
app/bower_components/bootflatv2/bootflat/scss/bootflat/_global.scss: Invalid CSS after
"... true ": expected selector or at-rule, was "!global;")
In my project I use grunt and grunt-contrib-compass
I am able to read all the other alert boxes on your demo page except this one, consider making the text lighter than the background.
Consider a text color like #FAC8C7, rgb(250, 200, 199), hsl(1, 84%, 88%)
Dear friend,
On my phone browser, I tried to click on a select tag, it will not popup the options. It works on desktop though.
Thanks
Sunny
According to this question on SO how to change color swatches of bootflat,
I'm using the latest Bootflat version (2.0.1) and Bootstrap (3.1.1) and my table font-size is 16px instead of 14px.
Do you know what cause this problem?
This is what my HTML looks like:
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link href="/packages/bootflat/css/bootflat.css" rel="stylesheet" type="text/css" />
<link href="/packages/crm.css" rel="stylesheet" type="text/css" />
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,800,700,400italic,600italic,700italic,800italic,300italic" rel="stylesheet" type="text/css">
</head>
<body>
<div role="navigation" class="navbar navbar-inverse navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header">
<button data-target="#bs-example-navbar-collapse-1" data-toggle="collapse" class="navbar-toggle" type="button">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="#" class="navbar-brand">CRM</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li><a href="http://www.crm.tst/contacts">Contacten</a></li>
</ul>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="panel panel-default">
<div class="panel-heading">Contacten</div>
<table class="table">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<td>2</td>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<td>3</td>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script type="text/javascript" src="/packages/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</body>
</html>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
hi,
how can i remove the rounded corners and make bootflat square style like in the previous versions?
i couldn't figure it out
thank you
Hello,
Default Gutter Width is set to 30px .. how i can set it to 20px for whole template, please advice.
Regards,
Umar
SPAN isn't a requirement for the .active element in a .breadcrumb, but your .breadcrumb-arrow requires one.
I've selected all, for clarity.
Refreshed, restarted browser, cleared cache – to no effect.
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.
Hi,
I have a problem when I want to add a table in a tab-pane of your tabs-left example
When I put off the class "table" and add width="60%" I have this result...and I lost css table informations
Have you any explanation of this problem ?
Thanks
Pierre
The site lacks a favicon. I think the bootflat logo would work fine.
The following selectors:
are placed only in the file site.min.css. When you try to use this selectors only with the file site.css nothing happens.
As you can see from the attached image, the labels and buttons are quite cramped and nested on top of each other poorly in a smaller window.
What is the command to recompile the Bootflat with a new color scheme?
I added the following lines to my code in the according places:
<link rel="stylesheet" href="https://bootflat.github.io/bootflat/css/bootflat.min.css">
<script src="https://bootflat.github.io/bootflat/js/icheck.min.js"></script>
<script src="https://bootflat.github.io/bootflat/js/jquery.fs.selecter.min.js"></script>
<script src="https://bootflat.github.io/bootflat/js/jquery.fs.stepper.min.js"></script>
But when I try to use the checkbox <input class="icheckbox_flat" type="checkbox" name="quux[1]"> it shows the "normal" one, not flat.
On my root, I have the folder bootflat > img > check_flat > default.png
Not a bug or anything, but wanted to mention this.
$button-shaodw: ..Should be:
$button-shadow: ..Hi,
I really like your design, thanks for sharing your work.
I would like to add a comment though: dropdowns on tabs don't like assorted with the tab.
It looks like dropdowns are cut as they don't have the same width than the tab, and the color is quite different too. I know that in bootstrap, dropdowns don't have necessarily the same width than the tab but with the combination of the width difference and the colours contrast makes it to look odd (at least to me :)).
It's most likely a matter of taste but I would like to know if other folks feel the same.
Anyway, I don't want to offend you, I really appreciate your work, thanks again for sharing.
Hello there,
I was trying to use the html select tag. I have a drop down more than 10 options, the drop down went up instead went down, although the select is at the top of the page, there is not enough space above the select, so I can't see some of the options. There is plenty room below the select. Please see the screen shot.
I am wondering if there is something I missed. thanks.
Sunny
Hello, we've created free sketch version of Bootflat and it would be cool if you could add download link to this along with PSD version.
Project: https://github.com/teracy-official/bootflat-ui-kit.sketch
Download link: https://github.com/teracy-official/bootflat-ui-kit.sketch/archive/master.zip
Are there step by step instructions somewhere to get the various color swatches in css files?
A previous issue stated to follow the 'Quick Start Instructions' and then change the colors in _global.scss. I see a number of swatches in there though, where is the 'primary' listed?
Thanks!
Hello, I found only minified version of javascript file of bootflat. Can you provide me or tell how to get un-minified version js file of this?
Hello, Is this framework support RTL for Arabic Language, please advice .. and if it does not support how can i do that?
Retina support is not included by default? (Your homepage does not serve retina images...)
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
Like Bootstrap has in its README.
Bootstrap isn't Twitter's product from v3. Please replace "Twitter's Bootstrap" with "Bootstrap" in readme, docs and repository description.
I really like bootflat, but my css compiling process is kind of tied to LESS at the moment. Is a LESS based version planned or is anybody else interested in collaborating on one?
this is an odd one but wonder if anyone has any ideas.
With Lato from google fonts in chrome
<link href='http://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
and
font-family: 'Lato', sans-serif;
in the css. A vertical border shows on rollover for the links.
Any thoughts?
For now you redesign bootstrap and it's looks amazing, going to use it for sure but would you extend the components to things that you want or stay with bootstrap components?
*sorry about my english
The thumbnails (puppies & kittens in documentation) seem to need the same length of text - if not the responsive layout breaks (see image) - if there a way to avoid this? even fixing the height of the thumbnail divs?
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?
Hello,
Does anyone have the various color swatches compiled into different CSS files available for download without having to recompile the SASS?
Thanks
In my chrome browser (version 33) the icons are hidden at page load.
Has anybody the same problem?
My chrome updated by itself recently and some columns ( like col-md-3 ) has a break line after each 5 item . Also bxslider does not work as before now :(
Is there any solution ?
Also i was checking in your demo, not working ( the toggle is there but don´t open
Using Firefox for windows 7 last version, also testes in chrome and safari, not working also.
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.
Might I suggest a proper documentation in using your framework just like bootstrap and foundation, I think it will be easier for us developers to use your framework when you have better documentation. Thank you!
Good job. Please add composer support. thanks
Theoretically, Bootflat is based on Bootstrap 3.3, however, this is not true, just check the Bootstrap.min.js file, and latest fixes for css styles, and you'll see that it has not been fully updated to Bootstrap 3.3, I think the README file (and website) should say "based on Bootstrap 3.2.0 CSS framework" until it will be updated to v. 3.3.0.
Hey,
using Sass 3.2.14, compilation fails due to the "!global" variable modifier in bootflat/_global.scss (node-sass v0.8.3 fails, too):
Syntax error: Invalid CSS after "... () ": expected selector or at-rule, was "!global;"
on line 3 of bootflat/_global.scss
from line 19 of bootflat.scss
should that be replaced with !default, compilation fails at:
Syntax error: Invalid CSS after " @at-root #{": expected expression (e.g. 1px, bold), was "&}-link {"
on line 61 of bootflat/_button.scss
from line 23 of bootflat.scss
Grunt build is not working due to missing .jshintrc file.
Hello,
I cant find "selector" inside PSD. Please check it once and let me know if i am missing something.
Please add version.
The logo and the columns are not responsive.
The _Modal_ as seen on http://bootflat.github.io/documentation.html is not responsive. This is how it looks in a window under 1200px:
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
.list-group-item warning has color #ffbf21, background-color #ffce54. This is almost impossible to read.
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.