Looks quite nice - I really like the new theme, as it allows you to go for a gradient look but appears much less intrusive than Bootstrap 2's theme, in addition to being optional.
Opening the mobile menu still lags a lot on my phone (Galaxy S3, stock browser). Why don't they use CSS animations for it instead? I was really hoping it would have been fixed in v3. Love the rest though.
> "With v3, we've gone flat. Don't call it a trend—it's all about customization, folks."
I hope everyone catches that part of the post. It's very important, I think, based on the previous HN thread comments.
I've been quite surprised at how many people are in an uproar about v3 being flat. People have been saying things like "it's a dumb trend", "horrible UX", "so ugly", etc. For a skeleton starter template like this, flat is good. Having the design flat encourages you to build on it or theme it to your OWN style so all of the sites using Bootstrap don't end up looking the same (like they have in past versions). It was also annoying in past versions when you had to declare no gradients, or reverse engineer things to lose the "default theme". Making it flat now allows you to build up, where past versions made you go backwards first, then build the theme the way you wanted. I hope more people realize that rational now they have specifically called it out.
With that said, well done everyone that helped on the project! Great work! :)
And for people who are still concerned (and even though this is mentioned directly in the post - some people won't necessarily read it). There is a theme provided, which I personally think improves on Bootstrap 2's version.
The subtle color enhancements are nice (nothing like lowering contrast to make things look classier) but the button hovers appear broken.. that was an important bit of sparkle in twbs2 I hope 'twas just an oversight.
The hovers work, but they are so subtle you will barely notice it. I had to get very close to my monitor to notice on colors other than the default greyish white.
> Having the design flat encourages you to build on it or theme it to your OWN style so all of the sites using Bootstrap don't end up looking the same
I don't want to build on it. My customers don't care that it looks like other sites, they just want something that looks professional and is easy to use, something which Bootstrap 2 does way better than I could do alone, and for which I am eternally grateful.
My customers range from a little to really non technical, so I think that "making them think" about what might be a button and what might be a label is a regression.
So if I want to upgrade, it's not just "encouragement" to customize, it's a necessity, and I consider it added work since I did not have to do it with the previous version of Bootstrap.
Hopefully, the theme mentioned in the article will suit my needs.
> With that said, well done everyone that helped on the project! Great work! :)
I can agree with that! I am very thankful for Bootstrap.
I completely understand what you are saying, and they have already solved your problem. You can still easily grab the V2 theme to lay on top of V3 to generate all those pre-done styles. The beauty is that it's no longer forced in V3 for people that do want to build up, like it was in V2. It's a win-win! ;)
It was kind of them to make the extra effort though, for those of us who are happier with the older look and feel. Just a bit more like actual buttons, and it'd be perfect.
The gradients are more subtle in that theme. You could always stick with v2 if that works for you and your users. It's a starter template so it's not something that you must upgrade (unless you need support but I'm sure v2 is pretty solid by now).
The theme mentioned in the article seems to be keeping around the "faux-3D" concept of the look and feel with Bootstrap 2.x and below. So I think you're in the clear. Incidentally, you shouldn't need to worry about upgrading because it seems as though even with this "flat" approach, Bootstrap is still relatively easy to look at and defines borders/sections relatively obviously.
I'm personally a big fan of the opens-as-you-scroll sidebar navigation. Really cool for single-page apps!
I don't think Bootstrap was ever meant to be a UI "theme" in and of itself and developers, like yourself, who use it (and sell it) like that don't understand what they're doing.
Well then, get a theme. That's the point of something that's meant to be a framework. You're not the only person using it and it's easier for you to download a theme than it is for people that don't use it as-is to reverse engineer the whole thing.
The first is infinitely more confusing to the eye. There's no heirarchy; I don't know where to look. The second is clean while still giving me a sense of where I need to go to accomplish what I'd like to accomplish.
The low-contrast trend is really being shown here. I don't get why it's so popular. We've got left navigation with grey text on a grey background, no borders, no underlines indicating that they are link. The top bar is purple, with a purple hero board just below it. It's low-contrast city... and I have no idea where my eye should go.
I'm no web designer, just a developer with a casual interest.
Can you explain what this low-contrast thing is all about? Why would anyone think this was a good idea, except perhaps for UI elements that were explicitly disabled.
I can't speak for every designer, and it is possible that the shift is entirely a visual trend based on rebelling from the past trends.
My justification for keeping the interface low contrast is to emphasize content. Keep in mind that getbootstrap.com is designed for web designers and developers—most of whom will be familiar with traditional web design. Menus are in obvious places and don't need to be called out.
Take the alternative to the extreme: if we need color to show us clickable elements should we have flashing underlines? Gifs that move arrows back and forth?
I can certainly see that. Do you count "main body text" as 'content' in your designs?
I can imagine myself working with a web design until I was sick of seeing lorem ipsum. This might lead me to under-value 'content' from the perspective of the reader. You think such a phenomenon happens with web designers?
Or could it be that Apple did some kind of brainwave analysis on rats (or users :-) and determined that low-contrast was better for some purpose, then the design community just cargoculted it?
> I can certainly see that. Do you count "main body text" as 'content' in your designs?
I make an effort to never use placeholder text that doesn't at least closely resemble the real (or intended) content. This might just be me, but I'm pretty sure it's common amongst better designers: building something around fake data is much harder than building something 'real'.
> You think such a phenomenon happens with web designers?
Absolutely.
> brainwave analysis on rats (or users :-)
If Art and HCI are on opposing ends of a spectrum of interface design I've always been a bit closer to art—so my experience with testing ends at formal user interviews and guerrilla-coffee-shop tests. It's not a stretch to imagine the big tech companies doing brainwave analysis (and I'd be thrilled to participate at any level, it's seriously cool stuff).
> design community just cargoculted it?
Like any community, designers react to the trends of their peers, but a competent designer can defend pretty much any decision, which makes it hard to tell the difference between 'doing something familiar but wrong' and 'following trends that are right'.
Both pages show the exact same content with relatively small positioning changes. For me, however, the new version is definitely more pleasant to look at.
That being said, Bootstrap is supposed to be a starting point, not the final style. Going flat means less work for us developers when we start styling their components.
I agree with this completely. Before v.3 I was forced to turn to Designmodo's Flat UI just so I could do simple things like changing the color of the navbar without also tackling a million different gradients and effects (granted I'm not a designer or developer).
Personally, I'm glad they're not making web pages look like tombstones out of the box with that center-justified layout. I think the left-aligned new redesign is much sleeker.
I think the header and main button could contrast more with the rest of the page, but otherwise think the current landing page is much better. And by "contrast" I don't necessarily mean color-wise.
The old page is pretty gross, IMO. If the current page is like an auditorium so quiet you're straining to hear something then the old page is like an auditorium where everyone is jabbering away. On the old design I see contrast in weight, size, alignment, and color, and that's just above the fold.
Exactly. I also do not care for the flat stuff most of the time. The old design was much clearer and more defined. But the entire idea of starting with minimal base that you build up from is by far worth the trade off for me. I don't expect bootstrap to design my site for me anyway.
That's great, there are a couple of sass ports for 2 and it was time consuming evaluating them so an officially blessed port would be great.
For those of us integrating it with web app where we use semantic class names that we want to map to template styles, it would help if there were sass versions that create no concrete styles, just mixins and placeholder styles, so that we can extend our classes with bootstrap ones without inheriting styles on elements where we don't want the bootstrap style. e.g. I wanted the .nav-tabs style but already had my own .nav styling.
Do you have any plans to make it possible to extend from bootstrap in this way?
I might try this when I get home - I'm new to Ruby/RoR and I had a hell of a time getting the twitter-bootstrap-rails gem and it's dependencies installed on my windows machine and just went with Foundation.
I've been working with the release candidates for a while for my Shopify-based Bootstrap theme (http://bootstrapforshopify.com/), and while it's been a bit of a tough ride sometimes (with pretty significant changes from release to release), I'm really impressed with what v3 brings to the table.
Hopefully, the way the new styles are laid out will encourage more people to treat Bootstrap as a starting point rather than the end game for layout and styling (although it's a pretty good starting point in of itself).
Edit: And, of course, massive thanks to Mark and Jacob (plus the ever-increasing community) for all of the work they've put in over the last two years :).
Yeah, sorry about those changes in the RCs. Really we used the wrong label and are sorry about that. All in all though, everything with those pre-releases worked out really well. Just a naming thing :).
I appreciate the apology. I updated a site on the assumption that RC1 was a release candidate and not a work in progress. Now I need to update the site again. Ugh.
I generally prefer using Major.minor.1 or Major.minor.2 of a new version (as many more bugs get fixed in those versions, after the stable version is used in production environment) or the last major version with all bug fixes.
I feel like most people using bootstrap don't really care about supporting IE 6-7. If you're really serious about supporting these browser there are two main reasons :
- you want people from the companies who are forcing them to use IE, to be able to view the website as intended (and I'm sure they can understand that it doesn't look as good as on the latest version of Firefox)
- you want people in China to have the best experience on your website.
Then I believe you should look at other solutions.
Really? I have had a look at bootswatch.com using IE8 and a lot of the stuff (certainly columns, drop-dows, and navbars) doesn't work at all. I just get javascript errors. I would contend that if you want something that works in IE8 then avoid this like the plague. Unless someone can tell me differently.
You're right, in my personal testing it does appear to be about 2x faster.
The big perf wins:
* Fewer box shadows
* Fewer gradients
* Fewer semitransparent borders (a big performance problem, especially in chrome - I've seen > 10x performance slowdowns when using rgba borders & border-radius: 0 - see Chrome's tracker [1])
I'm not at all a big fan of Bootstrap 3's new look, but the change to border-box alone is a great reason to use it. Applying custom styles to buttons and inputs in Bootstrap 2 is a huge pain due to box-sizing: content-box.
"Yo Bootstrap, I'm really happy for you, I'll let you finish, but Foundation has one of the best frameworks of all time. One of the best frameworks of all time!" ;-)
I found myself backing out of using Foundation after downloading their latest version and trying to use a couple of their javascript components. Lots of bugs and generally fugly workarounds needed for the most basic things.
I was also quite surprised that the javascript components seemed to take a step backwards in design and documentation from Foundation 3 to 4. Not sure why that is.
If you scroll to the bottom of the page the sidebar will eventually scroll down and show them. Still an error though, and the irony, given the context, makes it a bit comical.
It probably wasn't tested with this old of a version of chrome/webkit. Works fine for me (I'm on Chrome 28.0) at that resolution. Assuming the browser version is the issue, I don't really see it as being a problem that bootstrap needs to address. Versions of chrome older than 22 account for 1.3% of the browser market share, and since bootstrap has dropped support for IE7 (0.7% MS) and FF3.6, it isn't surprising that they aren't targeting this.
This is the main problem I've found with fixed position, large height nav. Unless you engineer a way for the nav to be responsive and scroll separately from the page (which, BTW, is a bad UX) the bottom will get cut off.
Here's a question: what's the difference between this icon font, and font awesome, which for a time looked to be the 'go to' way of doing icons? I have no horse in that race, and they both look good to me.
I just tried to swap in the new font-based glyphicon icons over the top of the old image based ones.
First of all it's not a clean swap, because the class name structure has changed. Secondly, the font glyphs seem to have totally random positioning, so depending on how you use them you'll need to tweak the css for each one (or certainly groups of them) so they align properly with the text/button/whatever.
I reverted, and dropped in Font Awesome. It was as simple as changing one line of css if you use the CDN, done. No tweaking required, and there's load more to choose from.
I also have found Font Awesome to be an easy and comprehensive solution (mmmm that huge icon selection, dang!). I honestly don't understand, why hasn't FA been folded into Bootstrap? Is it some licensing thing?
Odd error on Safari 6.0.5 here. Where you should have three column layouts in the example page you get a single column list type layout. (Not a designer.)
I've disabled both adblock and clicktoflash plugins.
yup me to.. they changed the css a lot.. have to check one by one.. :(..
But output outsome. Rc1 ->rc2 -> 3.0.. my menu 3 drill down work again.Rc2 not work.
I've never heard of bootswatch. I could see many people using this. One thing bothers me on your page though. The header text is fixed with no background so it ends up jumbled with the other text: http://cl.ly/image/3D133Y1E1V2P
FWIW, migrating from a RC downloaded 2 days ago to this final release broke some stuff, most notably related to glyphicons CSS - so if you plan on upgrading, just be aware that it might not be seamless.
odd bug- i just switched from rc 2 to the official release- now the page shifts slightly left when modals open, and back when they close. What is going on?
130 comments
[ 3.7 ms ] story [ 253 ms ] threadThanks to all contributors for the hard work!
Better documentation is also a huge plus.
I hope everyone catches that part of the post. It's very important, I think, based on the previous HN thread comments.
I've been quite surprised at how many people are in an uproar about v3 being flat. People have been saying things like "it's a dumb trend", "horrible UX", "so ugly", etc. For a skeleton starter template like this, flat is good. Having the design flat encourages you to build on it or theme it to your OWN style so all of the sites using Bootstrap don't end up looking the same (like they have in past versions). It was also annoying in past versions when you had to declare no gradients, or reverse engineer things to lose the "default theme". Making it flat now allows you to build up, where past versions made you go backwards first, then build the theme the way you wanted. I hope more people realize that rational now they have specifically called it out.
With that said, well done everyone that helped on the project! Great work! :)
And agreed on your points. I'm looking forward to no longer having to override superfluous elements for the sake of customization.
http://getbootstrap.com/examples/theme/
I don't want to build on it. My customers don't care that it looks like other sites, they just want something that looks professional and is easy to use, something which Bootstrap 2 does way better than I could do alone, and for which I am eternally grateful.
My customers range from a little to really non technical, so I think that "making them think" about what might be a button and what might be a label is a regression.
So if I want to upgrade, it's not just "encouragement" to customize, it's a necessity, and I consider it added work since I did not have to do it with the previous version of Bootstrap.
Hopefully, the theme mentioned in the article will suit my needs.
> With that said, well done everyone that helped on the project! Great work! :)
I can agree with that! I am very thankful for Bootstrap.
As tsurantino said in another comment, see here: http://getbootstrap.com/examples/theme/
http://getbootstrap.com/2.3.2/base-css.html#buttons compared to http://getbootstrap.com/examples/theme/
It was kind of them to make the extra effort though, for those of us who are happier with the older look and feel. Just a bit more like actual buttons, and it'd be perfect.
I'm personally a big fan of the opens-as-you-scroll sidebar navigation. Really cool for single-page apps!
http://getbootstrap.com/examples/theme/
And v3 will come with a v2 template.
Well then, get a theme. That's the point of something that's meant to be a framework. You're not the only person using it and it's easier for you to download a theme than it is for people that don't use it as-is to reverse engineer the whole thing.
http://getbootstrap.com/ http://getbootstrap.com/2.3.2/
The first is infinitely more confusing to the eye. There's no heirarchy; I don't know where to look. The second is clean while still giving me a sense of where I need to go to accomplish what I'd like to accomplish.
http://getbootstrap.com/getting-started/
http://getbootstrap.com/2.3.2/getting-started.html
Bootstrap 3 looks old and Bootstrap 2 looks new.
Can you explain what this low-contrast thing is all about? Why would anyone think this was a good idea, except perhaps for UI elements that were explicitly disabled.
Concerned web devs are trying to raise awareness about it:
http://contrastrebellion.com/
My justification for keeping the interface low contrast is to emphasize content. Keep in mind that getbootstrap.com is designed for web designers and developers—most of whom will be familiar with traditional web design. Menus are in obvious places and don't need to be called out.
Take the alternative to the extreme: if we need color to show us clickable elements should we have flashing underlines? Gifs that move arrows back and forth?
I can certainly see that. Do you count "main body text" as 'content' in your designs?
I can imagine myself working with a web design until I was sick of seeing lorem ipsum. This might lead me to under-value 'content' from the perspective of the reader. You think such a phenomenon happens with web designers?
Or could it be that Apple did some kind of brainwave analysis on rats (or users :-) and determined that low-contrast was better for some purpose, then the design community just cargoculted it?
I make an effort to never use placeholder text that doesn't at least closely resemble the real (or intended) content. This might just be me, but I'm pretty sure it's common amongst better designers: building something around fake data is much harder than building something 'real'.
> You think such a phenomenon happens with web designers?
Absolutely.
> brainwave analysis on rats (or users :-)
If Art and HCI are on opposing ends of a spectrum of interface design I've always been a bit closer to art—so my experience with testing ends at formal user interviews and guerrilla-coffee-shop tests. It's not a stretch to imagine the big tech companies doing brainwave analysis (and I'd be thrilled to participate at any level, it's seriously cool stuff).
> design community just cargoculted it?
Like any community, designers react to the trends of their peers, but a competent designer can defend pretty much any decision, which makes it hard to tell the difference between 'doing something familiar but wrong' and 'following trends that are right'.
That being said, Bootstrap is supposed to be a starting point, not the final style. Going flat means less work for us developers when we start styling their components.
I'd be curious how you'd react to something like this http://cl.ly/image/3A3O3Y2w2Y3i vs. http://cl.ly/image/40431N2q470M
The old page is pretty gross, IMO. If the current page is like an auditorium so quiet you're straining to hear something then the old page is like an auditorium where everyone is jabbering away. On the old design I see contrast in weight, size, alignment, and color, and that's just above the fold.
For those of us integrating it with web app where we use semantic class names that we want to map to template styles, it would help if there were sass versions that create no concrete styles, just mixins and placeholder styles, so that we can extend our classes with bootstrap ones without inheriting styles on elements where we don't want the bootstrap style. e.g. I wanted the .nav-tabs style but already had my own .nav styling.
Do you have any plans to make it possible to extend from bootstrap in this way?
Hopefully, the way the new styles are laid out will encourage more people to treat Bootstrap as a starting point rather than the end game for layout and styling (although it's a pretty good starting point in of itself).
Edit: And, of course, massive thanks to Mark and Jacob (plus the ever-increasing community) for all of the work they've put in over the last two years :).
And thank you! <3
I generally prefer using Major.minor.1 or Major.minor.2 of a new version (as many more bugs get fixed in those versions, after the stable version is used in production environment) or the last major version with all bug fixes.
> box-sizing: border-box
I never understood why they didn't use it.
Edit for typo
- you want people from the companies who are forcing them to use IE, to be able to view the website as intended (and I'm sure they can understand that it doesn't look as good as on the latest version of Firefox)
- you want people in China to have the best experience on your website.
Then I believe you should look at other solutions.
http://www.youtube.com/watch?v=Z1IqzeA3XXg
The big perf wins:
* Fewer box shadows
* Fewer gradients
* Fewer semitransparent borders (a big performance problem, especially in chrome - I've seen > 10x performance slowdowns when using rgba borders & border-radius: 0 - see Chrome's tracker [1])
* Simpler rules (fewer styles to cascade)
1. https://code.google.com/p/chromium/issues/detail?id=170882
The default look is to make customization easier. So if you download the theme Bootstrap still looks the same.
If anyone else is interested in checking out the foundation framework, here's the link to save you a google: http://foundation.zurb.com/
I just removed it, and went back to Bootstrap.
I like Foundation for the forms and the grid syntax
but bootstrap has a better default theme and has font awesome for so many icons.
[1] http://www.w3schools.com/browsers/browsers_chrome.asp
I'm using Font Awesome on one of my Bootstrap 3 based sites because it has more icons.
First of all it's not a clean swap, because the class name structure has changed. Secondly, the font glyphs seem to have totally random positioning, so depending on how you use them you'll need to tweak the css for each one (or certainly groups of them) so they align properly with the text/button/whatever.
I reverted, and dropped in Font Awesome. It was as simple as changing one line of css if you use the CDN, done. No tweaking required, and there's load more to choose from.
http://bootswatch.com/
fyi I'm using chrome28 on osx 10.8.4
I still really appreciate it, though. If it turns out I really need them, I'd rather start with Bootstrap than have to start from scratch.
https://news.ycombinator.com/item?id=6241294