Is it meant to be default to full on flat-ui? First impression is that the buttons are now less apparent interface items and it'll take more careful layout planning to make a quick bootstrap effective. Thoughts?
More than that, they have a really strange linear gradient on Firefox for Android. My flight is about to take off, so I can't check on desktop Firefox or submit a bug report right now. :(
Is it just me or do the new buttons not really fit with everything else. They look very flat. But most other components have shadows and still look like old bootstrap
Yea the new buttons just don't feel right. In the case of checkbox (button toolbar style) it is quite hard to tell which one is selected. Maybe they should aim for a more Rdio/Dropbox style solution. Mostly flat except for buttons and input elements.
Yeah the old buttons looked like buttons, it was obvious they could be clicked. These ones look more like an outlined header or something. The disabled ones don't really look disabled if they are not next to a non disabled button either. Aesthetically I think the current version is much better. Personally not a huge fan of everything going to this 'flat' / metro look but it seems to have really caught on.
This goes even further than the flat/gradients debate and will also be useful for people who'd like to deeply customize bootstrap.
Customizing Bootstrap has always been a pain (and I'm not the only one to think this, in the words of @mdo : those who want to use Bootstrap as a bootstrap kind of get the short end of the stick), I'm very happy to see that they're looking to make this easier.
Would be cool if the gradients and 'shiny' stuff was in a separate file so it could easily be removed for those who want a flatter look. In 2 it's scattered around the codebase.
This was the first time I've seen 3.0 and I really love the flat clean look. I skimmed through the linked page but couldn't find a specific statement about what they're going to be doing with this.
The thing I like about the flatness is it's even more clear that Bootstrap is a framework for you to build your own sites faster, and it's up to you to really customize it for your brand.
It's interesting that so many of the comments here (and often, those made about Bootstrap in general) focus on the aesthetic of a few form elements and not the utilities that come with the framework. Understandable, I guess, as they're the most obvious when you load up the page!
I've been playing with the 3.0.0-wip branch for a little while, and I think that there are a couple of really cool features that should be noted above the cosmetic - the single, fluid grid; font icons by default; and a mobile-first design.
I've only been using bootstrap for a week, but I instantly noticed that the grid elements were separated not with a left margin, but with both left and right padding. This is going to be fantastic, and shows their responsive first thinking.
Weird that the Grid section is buried in the CSS section where it's the most important. See, I like that Foundation starts by explaining directly how the grid system works. That columns need to be in rows, etc... Overall Bootstrap's documentation is better, but it lacks this Grid System first approach.
Still no border-sizing:border-box. Which makes me still root for Foundation.
Buuut, there is now a better nesting (Foundation-like) where there is no need to write row-fluid. Which is good.
Why does padding make it more responsive than using margins? I've considered using padded grids as well, but was discouraged because it would lead to more markup if you don't want background images/color to bleed into your gutters.
If this is the issue I think it is ( https://github.com/twitter/bootstrap/issues/4550 ), it is unfortunately not only for this beta v3, it is a big problem with the current version of Bootstrap as well.
I would consider it quite crucial. When using Bootstraps responsive features, (which are clearly a selling point) you'd expect something as trivial as a popup-menu to actually work on other than desktop devices.
That lists almost all organizational changes, with fairly few benefits to the users (though quite a few to the organization, which it helpful for it’s continued existence). However reading the comments here it does seem like there are some nice upgrades for the users as well.
Looking at the grid i noticed the 1-column divs change size. e.g. 41px - 42px - 41px - 42px - etc. When resizing in smaller displays it behaves different: 25 - 25 - 24 - 25 - 25 - 25- 24 - etc. Was this always the case in bootstrap? I don't really understand the reason for this. It seems odd.
I suspect that will be because the primary grid is now based on percentage values rather than fixed pixel values. When you're splitting a grid into columns using percentage widths, often the browser has to make a choice between rounding up or down to the closest pixel value for display.
The fluid grid has long been a part of Bootstrap, but until now has generally been secondary to the fixed 12-column grid, which used strict pixel values.
Except instead of making a "flying first" car from scratch you start with your existing car as a prototype to build your first "flying first" car that you plan to give away for free and open source it.
Then all the of flying community come out of the woodwork to cry bloody murder it isn't flying yet when you just strapped on some wings and aren't finished. Then you start to wonder if it's worth sharing both the process and the product in the first place when you have to deal with all the kids out there who cry as if their lollipop was stolen.
Not sure if I like this at all. I think they need to call it
Bootstrap 3: flat and fat!
It just seems like a huge step back to me. It's not even an elegant "flat" design; it's like they scrapped everything and decided to make all classes (even buttons for God's sake) DIVs of different colors. The new navbar, for example, is literally a gray DIV with rounded edges. I use Bootstrap on my web app because I care about design, but I don't care so much about learning fancy CSS; Bootstrap takes care of making things look subtly 3D, shaded, animated, etc., and that's what I'm looking for. I can make flat DIVs myself, thank you very much.
Use bootstrap, but customize the design to fit your brand. Bootstrap is a framework for building your own CSS on top of. The less opinionated it becomes, the better, since it'll make it easier to adapt the framework for your design.
This is the key to Bootstrap (or similar css frameworks). It's not intended to be a theme. If you want to just have the css/html ready for you to do some documentation or a project that has no need for any visual differentiation, then go ahead and use vanilla.
When used to build something that should be visibly unique, the visual design and appeal is something that should be created aside from bootstrap, maybe with the grid in mind, and delivered as mockups or pattern guides.
Come on yes it is (was) intended to be a theme , that's why it is so successfull. Grid frameworks existed well before bootstrap , and most developers did not use them.
Grid frameworks like 960gs never became as popular as Bootstrap because Boostrap is as much about formatting content (including forms and UI elements) as it is about the responsive grid layout.
I suppose you could say it comes with a theme, but anyone who cares enough to complain about the theme should also be motivated enough to customize it.
Yeah, but I'm a broke high school senior (1-man team), so I'm sort of forced to take advantage of free stuff like Bootstrap and the free year of Amazon EC2.
Bootstrap is definitely useful if you're just tinkering - it makes a minimum viable product look sort of legit ;)
But I would certainly invest in specialized developers to make a lighter-weight, in-house UI if I were really serious about a website.
If you really care about your customers instead of your product, and they are more than happy with the "professional" Bootstrap UI, you have no reason to mess with it.
What is always good to have is a designer or at least a developer with an eye for aesthetics, to use the Bootstrap elements in an elegant way. Otherwise, what would you "hack" about HTML/CSS? Either reimplementing Bootstrap, or playing with the latest and greatest that won't work in anything else but the latest Chrome (see the IE6/7 discussion).
There is something I keep pointing out when inevitably the conversation turns this way: Bootstrap (and Foundation) are UI widget libraries, not just prototyping helpers. They are the missing rich widget set that browsers should provide by default if they were proper application runtimes and not the patched together mess they have grown into. A good comparison would be Sencha ExtJS, but for markup instead of full JavaScript: you have layout elements (the grid), a set of reusable controls, and some helpers (typography, etc).
A lot of web applications -- line-of-business but also consumer-oriented -- should NOT be visibly unique, and styling your own buttons not only is a big waste of time, but also reduces usability. Look at the WinForms/Cocoa/GTK environments to see the value of a single visual language in action (including their respective UI guides that help with a consistent experience). The popularity of Bootstrap tells you the need is still there -- for both the millions of developers who need to get the job done without reinventing too many wheels on top of broken hypertext, and for the users who appreciate not having to figure out a UI for the millionth time (just ask your boss/customer what they think of your boring Bootstrap app, they probably love it).
>I can make flat DIVs myself, thank you very much.
What about the scaffolding, the grid system and sane typographic rhythm? What about the glyphicons and out of the box mobile awesomeness?
Bootstrap is more than 3D buttons and box shadows, perhaps they are moving away from that to focus on the utilities that make the framework great, and not for the shiny buttons.
You're right, but I never use the grid stuff anyway; I only want to invest time in learning about something if it's not framework/vendor-locked, so to speak, so I'd rather just use the elements and do the scaffolding myself.
If you literally only want the buttons, then you should use something like this: http://blog.koalite.com/bbg/ to create the css for your buttons and avoid a whole lot of overhead including the entire framework's css just to get the buttons.
>I care about design, but I don't care so much about learning fancy CSS
might just be me, but I don't think you care too much about design if you rely on standard bootstrap for style. Not that I don't understand the appeal of having something that looks good out of the box.
Proprietary elements in Angular are called directives. You define them and choose how to render them, what data to pass to them and linked functions to call after rendering. Everything is taken care of, it's not like the browser is going to freakout and not know what to do.
Much in the same way Ruby on Rails made every site work exactly the same. It's a framework to provide a foundational starting point that is already consistent rather than trying to build a consistent style guide and toolset from scratch every time.
Bootstrap is nothing but a foundation, and while many sites simply take one of the examples and run with it -- which is a perfectly fine approach if you simply want to put some information out there in an accessible format -- many others use it simply as a structural foundation. I've worked with CSS for years and am quite honestly tired of the BS (primarily the hilarious endless recreation of the layout of the archaic table element -- somehow it became verboten and we've been trying to re-make it with CSS for years) and simply starting with the grid layout of bootstrap is a great start.
165 comments
[ 2.1 ms ] story [ 281 ms ] threadhttp://rc.getbootstrap.com/components/#badges
https://github.com/twitter/bootstrap/pull/6342#issuecomment-...
Customizing Bootstrap has always been a pain (and I'm not the only one to think this, in the words of @mdo : those who want to use Bootstrap as a bootstrap kind of get the short end of the stick), I'm very happy to see that they're looking to make this easier.
I've been playing with the 3.0.0-wip branch for a little while, and I think that there are a couple of really cool features that should be noted above the cosmetic - the single, fluid grid; font icons by default; and a mobile-first design.
I've only been using bootstrap for a week, but I instantly noticed that the grid elements were separated not with a left margin, but with both left and right padding. This is going to be fantastic, and shows their responsive first thinking.
Still no border-sizing:border-box. Which makes me still root for Foundation.
Buuut, there is now a better nesting (Foundation-like) where there is no need to write row-fluid. Which is good.
You might be looking at the 2.3.1 (master) branch, which didn't use border-box :).
I would consider it quite crucial. When using Bootstraps responsive features, (which are clearly a selling point) you'd expect something as trivial as a popup-menu to actually work on other than desktop devices.
http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/
https://github.com/twitter/bootstrap/pull/6342
The fluid grid has long been a part of Bootstrap, but until now has generally been secondary to the fixed 12-column grid, which used strict pixel values.
Then all the of flying community come out of the woodwork to cry bloody murder it isn't flying yet when you just strapped on some wings and aren't finished. Then you start to wonder if it's worth sharing both the process and the product in the first place when you have to deal with all the kids out there who cry as if their lollipop was stolen.
Bootstrap 3: flat and fat!
It just seems like a huge step back to me. It's not even an elegant "flat" design; it's like they scrapped everything and decided to make all classes (even buttons for God's sake) DIVs of different colors. The new navbar, for example, is literally a gray DIV with rounded edges. I use Bootstrap on my web app because I care about design, but I don't care so much about learning fancy CSS; Bootstrap takes care of making things look subtly 3D, shaded, animated, etc., and that's what I'm looking for. I can make flat DIVs myself, thank you very much.
When used to build something that should be visibly unique, the visual design and appeal is something that should be created aside from bootstrap, maybe with the grid in mind, and delivered as mockups or pattern guides.
I suppose you could say it comes with a theme, but anyone who cares enough to complain about the theme should also be motivated enough to customize it.
Bootstrap is definitely useful if you're just tinkering - it makes a minimum viable product look sort of legit ;)
But I would certainly invest in specialized developers to make a lighter-weight, in-house UI if I were really serious about a website.
What is always good to have is a designer or at least a developer with an eye for aesthetics, to use the Bootstrap elements in an elegant way. Otherwise, what would you "hack" about HTML/CSS? Either reimplementing Bootstrap, or playing with the latest and greatest that won't work in anything else but the latest Chrome (see the IE6/7 discussion).
A lot of web applications -- line-of-business but also consumer-oriented -- should NOT be visibly unique, and styling your own buttons not only is a big waste of time, but also reduces usability. Look at the WinForms/Cocoa/GTK environments to see the value of a single visual language in action (including their respective UI guides that help with a consistent experience). The popularity of Bootstrap tells you the need is still there -- for both the millions of developers who need to get the job done without reinventing too many wheels on top of broken hypertext, and for the users who appreciate not having to figure out a UI for the millionth time (just ask your boss/customer what they think of your boring Bootstrap app, they probably love it).
What about the scaffolding, the grid system and sane typographic rhythm? What about the glyphicons and out of the box mobile awesomeness?
Bootstrap is more than 3D buttons and box shadows, perhaps they are moving away from that to focus on the utilities that make the framework great, and not for the shiny buttons.
Glyphicons are probably my favorite part, though.
might just be me, but I don't think you care too much about design if you rely on standard bootstrap for style. Not that I don't understand the appeal of having something that looks good out of the box.
A paradox.
Maybe the motivation behind this change is to make the navbar look a bit less twitter-y out of the box?
I like both frameworks but is this a trend we should worry about?
Proprietary elements in Angular are called directives. You define them and choose how to render them, what data to pass to them and linked functions to call after rendering. Everything is taken care of, it's not like the browser is going to freakout and not know what to do.
http://www.backwardcompatible.net/164-twitter-bootstrap-3-bu...
Also, considering the nature of Bootstrap, the UI design is always optional.