5 ms·

Bootflat: Open Source Flat UI Kit based on Twitter Bootstrap 3

207 points by jalan 13y ago

BenjaminN 13y ago
How many of those do we need?
- RyanZAG 13y ago
  Law of building - anything easy to make will be made over and over again. Anything difficult to make will be made once and complained about forever.
  - swah 13y ago
    Seems true at first, but then shouldn't text editors be difficult?
    - dm2 13y ago
      What do you mean? There are tons of text editors. Source: https://www.google.com/search?q=text+editor https://www.google.com/search?q=text+editor
- fleetfox 13y ago
  And what exactly are you complaining about?
- camus2 13y ago
  none of them,fortunatly.
oneeyedpigeon 13y ago
.list-group-item warning has color #ffbf21, background-color #ffce54. This is almost impossible to read.
- oneeyedpigeon 13y ago
  Also, I'm not sure SPAN is a requirement for the .active element in a .breadcrumb, but your .breadcrumb-arrow requires one.
  - vanderZwan 13y ago
    I think your constructive criticism has more chance of being heard at the github repo: https://github.com/bootflat/bootflat.github.io https://github.com/bootflat/bootflat.github.io
    - oneeyedpigeon 13y ago
      I toyed with the idea of logging these as issues, but thought they might not quite qualify, and assumed the author would be reading this thread. Maybe I'll go log them there after all ...
daGrevis 13y ago
I'm not an expert, but isn't shadows and rounded corners like anti-flat?
- oneeyedpigeon 13y ago
  Why on earth would rounded corners be anti-flat? Shadows, I give you.
  - daGrevis 13y ago
    I think I read it somewhere. Maybe I was mistaken.
  - Avalaxy 13y ago
    At least it is in Metro.
colinramsay 13y ago
I'm sure there's going to be a lot of nay-saying here but I have to say I think this looks fantastic. I'm trying to reskin https://code.google.com/p/svg-edit/ https://code.google.com/p/svg-edit/ and I wonder if I can use this to bring it a bit more up-to-date.
mcintyre1994 13y ago
Nexus 7, Chrome, portrait, dropdown menus don't expand.
noir_lord 13y ago
This looks very nice. As a primarily backend guy I appreciate all the work people do on this stuff a lot (even if I don't use it I often refer to it for both inspiration and ideas on how to do stuff). Thanks for sharing. EDIT: For example I'm already "borrowing" the colours from the notification dialogs, they look much nicer than the stock ones :).
- swah 13y ago
  Same thing here, though in the moment I'm having a hard time finding U[I|X] solutions/patterns for the webapp I'm designing, which is much harder than a theme (for me). In the sense that "now, this is organized from a database point of view, how do I make users consume and interact with it?"... (Just looking at Facebook blows my mind when you start realizing how many tiny patterns they have for displaying more information on the screen. Things like "Jack and 13 more like your link" w/ click to expand)
  - dm2 13y ago
    http://bootsnipp.com/ http://bootsnipp.com/ is nice, doesn't have everything but can speed up prototyping dramatically.
    - notastartup 13y ago
      that's an awesome site, wonder if there is anything more like it
      - dm2 13y ago
        There are tons of them. Below is a good list of them that has been around for a while, enjoy. http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources http://bootstraphero.com/the-big-badass-list-of-twitter-boot...
  - madeofpalk 13y ago
    For UI/UX inspiration, see: http://patterntap.com http://patterntap.com http://uxarchive.com http://uxarchive.com - Mobile http://pttrns.com http://pttrns.com - Mobile http://zurb.com/responsive http://zurb.com/responsive - Responsive
rjfarley 13y ago
This is a great looking theme, really like it. Nice work.
dm2 13y ago
Another flat CSS theme for bootstrap? How many minutes did that take you? The layout on the site does look nice though. http://flathemes.com/ http://flathemes.com/ is your main website, it has a link to download version 1.0.1 (even though github says version 2.0.0 is the latest), then when I click download it says that I have to Like with Facebook or Twitter to download my "free gift" of your BootFlat theme, that rubs me the wrong way.
- deleted 13y ago
  [deleted]
- wakaflaka 13y ago
  Argh! I hate it when people do things I don't like!!!
- oskarth 13y ago
  Stop the hating, please. It has a hugely negative effect on HN in general and on creators specifically. Don't use it if you don't like it. Whenever I come across people who really hate me and my work it takes every ounce of energy to try and ignore them and move on. So hard. --John Resig, creator of jQuery (https://twitter.com/jeresig/status/425483930918060032 https://twitter.com/jeresig/status/425483930918060032)
  - camus2 13y ago
    and you are not ignoring. And yes the flat fad is dead already and this "work" is just a rip off. So one can "hate" it as much as one wants.
  - steerj92 13y ago
    This is such a silly comment. If people can't show their opinions of things, whats the point of even having HN. I didn't realise that everyone had to love everything posted on this site.
    - philmcc 13y ago
      I think it's a question of the tone with which he "didn't love." There's a difference between: "Another flat CSS theme for bootstrap? How many minutes did that take you?" and "There have been a number of flat CSS themes presented on this site, so I find it hard for any one of them to really distinguish themselves. Have you considered [the idea that OP thinks is better or more original or more useful]? --- The reason it's less than ideal to weigh in with such disdain is that it discourages other people for whom creating something like that would be a MASSIVE undertaking. Imagine a beginning designer who doesn't know anything about CSS or graphic design, so, for their initial project, they want to create a flat CSS theme. It's ambitious for them, and they're anxious to start and they log into HN and...oh. Wow. That person just made something better than I could ever make and got BLASTED. What's the point of trying? Comment #2 encourages them and points them towards a better suggestion. Comment #1 adds nothing.
archildress 13y ago
This looks really nice, thanks for creating it. I'm looking to use it for a small redesign project this week, and I had a quick concern - when I load the sample files on my OS X 10.9.2 in Chrome, the text won't show. Once I "inspect element" in Chrome, it pops in. Strange error for sure - just me or anyone else? https://www.dropbox.com/s/kkwjt7prm5a4xuh/Screenshot%202014-03-15%2009.15.45.png https://www.dropbox.com/s/kkwjt7prm5a4xuh/Screenshot%202014-...
- dbond 13y ago
  Theres currently a bug in chrome 33/34 where web fonts won't render until you force a repaint. https://code.google.com/p/chromium/issues/detail?id=336476 https://code.google.com/p/chromium/issues/detail?id=336476
Edmond 13y ago
Love it.
bite 13y ago
I've used bootflat for a previous project, prior to bootstrap 3, but have since switched. It looks great, but it's just a slight modification in colour scheme now, whereas before it was a huge difference. Bootstrap's hosted on a CDN too, which is nice.
- juliob 13y ago
  Hmm, that was a bit confusing. It's not clear what your prepositions "it" are referring to.
deleted 13y ago
[deleted]
- dalek2point3 13y ago
  isnt this what permissive licenses are for?
  - yesimahuman 13y ago
    Yep, they are completely in their right to do so (though the content of the docs site is under Apache 2 so it's a slightly different license). Just wanted to point that out the work might have originated elsewhere.
  - eCa 13y ago
    Yes. Ionicons is released under the MIT license, which (AFAICT though IANAL) does not contain any attribution condition.
    - Blahah 13y ago
      You have to include the original copyright notice. However, because of the Github templates, a lot of people don't fill in the copyright details. So in those cases derivatives are free to not attribute.
      - eCa 13y ago
        Thanks, missed that they failed to follow other parts of the license. That changes things quite a bit..
- dchuk 13y ago
  It looks like they've cloned all of Ionic? What is going on here? http://angulargap.github.io/ http://angulargap.github.io/
  - yesimahuman 13y ago
    Well, and they've re-licensed our content which they aren't legally allowed to do. Whatever, it's not worth my time and I shouldn't have let it get the better of me this morning.
puppetmaster3 13y ago
I think HN has jumped the shark.
AYBABTME 13y ago
Thank God for bootstrap and bootstrap kits. I've got no skills in design and all, but still can make acceptable UIs for my servers by hammering bootstrap all over the place.
steerj92 13y ago
This is not nearly as good as Designmodo's Flat UI. Seems that people are just going to keep making Flat design kits because they are easy.
cheshire137 13y ago
Arrgh, does this not bother anyone else? http://imgur.com/X9kZZ5w http://imgur.com/X9kZZ5w There's more space below the text than there is to the sides or above, because there's a bottom margin on the paragraph within the popover and that gets added to the padding within the popover.

207 points by jalan 13y ago

BenjaminN 13y ago

How many of those do we need?

RyanZAG 13y ago
Law of building - anything easy to make will be made over and over again. Anything difficult to make will be made once and complained about forever.
- swah 13y ago
  Seems true at first, but then shouldn't text editors be difficult?
  - dm2 13y ago
    What do you mean? There are tons of text editors. Source: https://www.google.com/search?q=text+editor https://www.google.com/search?q=text+editor
fleetfox 13y ago
And what exactly are you complaining about?
camus2 13y ago
none of them,fortunatly.

oneeyedpigeon 13y ago

.list-group-item warning has color #ffbf21, background-color #ffce54. This is almost impossible to read.

oneeyedpigeon 13y ago
Also, I'm not sure SPAN is a requirement for the .active element in a .breadcrumb, but your .breadcrumb-arrow requires one.
- vanderZwan 13y ago
  I think your constructive criticism has more chance of being heard at the github repo: https://github.com/bootflat/bootflat.github.io https://github.com/bootflat/bootflat.github.io
  - oneeyedpigeon 13y ago
    I toyed with the idea of logging these as issues, but thought they might not quite qualify, and assumed the author would be reading this thread. Maybe I'll go log them there after all ...

daGrevis 13y ago

I'm not an expert, but isn't shadows and rounded corners like anti-flat?

oneeyedpigeon 13y ago
Why on earth would rounded corners be anti-flat? Shadows, I give you.
- daGrevis 13y ago
  I think I read it somewhere. Maybe I was mistaken.
- Avalaxy 13y ago
  At least it is in Metro.

colinramsay 13y ago

I'm sure there's going to be a lot of nay-saying here but I have to say I think this looks fantastic. I'm trying to reskin https://code.google.com/p/svg-edit/ https://code.google.com/p/svg-edit/ and I wonder if I can use this to bring it a bit more up-to-date.

mcintyre1994 13y ago

Nexus 7, Chrome, portrait, dropdown menus don't expand.

noir_lord 13y ago

This looks very nice. As a primarily backend guy I appreciate all the work people do on this stuff a lot (even if I don't use it I often refer to it for both inspiration and ideas on how to do stuff). Thanks for sharing. EDIT: For example I'm already "borrowing" the colours from the notification dialogs, they look much nicer than the stock ones :).

swah 13y ago
Same thing here, though in the moment I'm having a hard time finding U[I|X] solutions/patterns for the webapp I'm designing, which is much harder than a theme (for me). In the sense that "now, this is organized from a database point of view, how do I make users consume and interact with it?"... (Just looking at Facebook blows my mind when you start realizing how many tiny patterns they have for displaying more information on the screen. Things like "Jack and 13 more like your link" w/ click to expand)
- dm2 13y ago
  http://bootsnipp.com/ http://bootsnipp.com/ is nice, doesn't have everything but can speed up prototyping dramatically.
  - notastartup 13y ago
    that's an awesome site, wonder if there is anything more like it
    - dm2 13y ago
      There are tons of them. Below is a good list of them that has been around for a while, enjoy. http://bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources http://bootstraphero.com/the-big-badass-list-of-twitter-boot...
- madeofpalk 13y ago
  For UI/UX inspiration, see: http://patterntap.com http://patterntap.com http://uxarchive.com http://uxarchive.com - Mobile http://pttrns.com http://pttrns.com - Mobile http://zurb.com/responsive http://zurb.com/responsive - Responsive

rjfarley 13y ago

This is a great looking theme, really like it. Nice work.

dm2 13y ago

Another flat CSS theme for bootstrap? How many minutes did that take you? The layout on the site does look nice though. http://flathemes.com/ http://flathemes.com/ is your main website, it has a link to download version 1.0.1 (even though github says version 2.0.0 is the latest), then when I click download it says that I have to Like with Facebook or Twitter to download my "free gift" of your BootFlat theme, that rubs me the wrong way.

deleted 13y ago
[deleted]
wakaflaka 13y ago
Argh! I hate it when people do things I don't like!!!
oskarth 13y ago
Stop the hating, please. It has a hugely negative effect on HN in general and on creators specifically. Don't use it if you don't like it. Whenever I come across people who really hate me and my work it takes every ounce of energy to try and ignore them and move on. So hard. --John Resig, creator of jQuery (https://twitter.com/jeresig/status/425483930918060032 https://twitter.com/jeresig/status/425483930918060032)
- camus2 13y ago
  and you are not ignoring. And yes the flat fad is dead already and this "work" is just a rip off. So one can "hate" it as much as one wants.
- steerj92 13y ago
  This is such a silly comment. If people can't show their opinions of things, whats the point of even having HN. I didn't realise that everyone had to love everything posted on this site.
  - philmcc 13y ago
    I think it's a question of the tone with which he "didn't love." There's a difference between: "Another flat CSS theme for bootstrap? How many minutes did that take you?" and "There have been a number of flat CSS themes presented on this site, so I find it hard for any one of them to really distinguish themselves. Have you considered [the idea that OP thinks is better or more original or more useful]? --- The reason it's less than ideal to weigh in with such disdain is that it discourages other people for whom creating something like that would be a MASSIVE undertaking. Imagine a beginning designer who doesn't know anything about CSS or graphic design, so, for their initial project, they want to create a flat CSS theme. It's ambitious for them, and they're anxious to start and they log into HN and...oh. Wow. That person just made something better than I could ever make and got BLASTED. What's the point of trying? Comment #2 encourages them and points them towards a better suggestion. Comment #1 adds nothing.

archildress 13y ago

This looks really nice, thanks for creating it. I'm looking to use it for a small redesign project this week, and I had a quick concern - when I load the sample files on my OS X 10.9.2 in Chrome, the text won't show. Once I "inspect element" in Chrome, it pops in. Strange error for sure - just me or anyone else? https://www.dropbox.com/s/kkwjt7prm5a4xuh/Screenshot%202014-03-15%2009.15.45.png https://www.dropbox.com/s/kkwjt7prm5a4xuh/Screenshot%202014-...

dbond 13y ago
Theres currently a bug in chrome 33/34 where web fonts won't render until you force a repaint. https://code.google.com/p/chromium/issues/detail?id=336476 https://code.google.com/p/chromium/issues/detail?id=336476

Edmond 13y ago

Love it.

bite 13y ago

I've used bootflat for a previous project, prior to bootstrap 3, but have since switched. It looks great, but it's just a slight modification in colour scheme now, whereas before it was a huge difference. Bootstrap's hosted on a CDN too, which is nice.

juliob 13y ago
Hmm, that was a bit confusing. It's not clear what your prepositions "it" are referring to.

deleted 13y ago

[deleted]

dalek2point3 13y ago
isnt this what permissive licenses are for?
- yesimahuman 13y ago
  Yep, they are completely in their right to do so (though the content of the docs site is under Apache 2 so it's a slightly different license). Just wanted to point that out the work might have originated elsewhere.
- eCa 13y ago
  Yes. Ionicons is released under the MIT license, which (AFAICT though IANAL) does not contain any attribution condition.
  - Blahah 13y ago
    You have to include the original copyright notice. However, because of the Github templates, a lot of people don't fill in the copyright details. So in those cases derivatives are free to not attribute.
    - eCa 13y ago
      Thanks, missed that they failed to follow other parts of the license. That changes things quite a bit..
dchuk 13y ago
It looks like they've cloned all of Ionic? What is going on here? http://angulargap.github.io/ http://angulargap.github.io/
- yesimahuman 13y ago
  Well, and they've re-licensed our content which they aren't legally allowed to do. Whatever, it's not worth my time and I shouldn't have let it get the better of me this morning.

puppetmaster3 13y ago

I think HN has jumped the shark.

AYBABTME 13y ago

Thank God for bootstrap and bootstrap kits. I've got no skills in design and all, but still can make acceptable UIs for my servers by hammering bootstrap all over the place.

steerj92 13y ago

This is not nearly as good as Designmodo's Flat UI. Seems that people are just going to keep making Flat design kits because they are easy.

cheshire137 13y ago

Arrgh, does this not bother anyone else? http://imgur.com/X9kZZ5w http://imgur.com/X9kZZ5w There's more space below the text than there is to the sides or above, because there's a bottom margin on the paragraph within the popover and that gets added to the padding within the popover.