11 ms·

Bootstrap 3 preview

306 points by winkerVSbecks 14y ago

cheneytsai 14y ago
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?
iM8t 14y ago
I actually like the changes. Now everyone will have to do a bit of style editing before using this. So we won't see so many identical sites.
escaped_hn 14y ago
I don't really like the new buttons. Other than that good job.
Kiro 14y ago
The buttons look like they are disabled.
- callahad 14y ago
  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. :(
  - duncans 14y ago
    Hey everybody, callahad is on a plane!
tzury 14y ago
Those new badges are a real nice addition http://rc.getbootstrap.com/components/#badges http://rc.getbootstrap.com/components/#badges
- MJR 14y ago
  Are you referring to the addition of active nav states? The rest has been around for a while: http://twitter.github.com/bootstrap/components.html#labels-badges http://twitter.github.com/bootstrap/components.html#labels-b...
- haydenchambers 14y ago
  whats the difference ? http://twitter.github.com/bootstrap/components.html#labels-badges http://twitter.github.com/bootstrap/components.html#labels-b...
zekenie 14y ago
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
- winkerVSbecks 14y ago
  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.
- baby 14y ago
  They actually don't look like buttons at all, which defeat the purpose of a button.
- arb99 14y ago
  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.
  - sigkill 14y ago
    The "Download Bootstrap Source" button in grey looks disabled.
benoitg 14y ago
For everyone complaining about the flatness, it looks like it's only temporary. https://github.com/twitter/bootstrap/pull/6342#issuecomment-12332378 https://github.com/twitter/bootstrap/pull/6342#issuecomment-...
- cwilson 14y ago
  Happy to see even though the removal temporary, they are looking into a way to easily remove styles for those who enjoy the flatness.
  - benoitg 14y ago
    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.
- tonyblundell 14y ago
  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.
- justindocanto 14y ago
  So glad I saw this. Thanks for posting that. I would have been very sad if they went flat.
- geuis 14y ago
  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.
- yesimahuman 14y ago
  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.
meunier 14y ago
Segmented dropdown groups are broken for me in chrome. The drop down is floating underneath the button.
gavinballard 14y ago
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.
- baby 14y ago
  Well there is no Scaffolding section so it's hard to know what changed beside the aesthetic.
  - rkuykendall-com 14y ago
    This is the new scaffolding section: http://rc.getbootstrap.com/css/#grid-system http://rc.getbootstrap.com/css/#grid-system 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.
    - baby 14y ago
      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.
      - gavinballard 14y ago
        I believe Bootstrap 3 does in fact use border-box - hence the padded grids and a major driver behind the drop in support for IE7.
deleted 14y ago
[deleted]
woah 14y ago
Fyi, top nav menu doesn't work on nexus 7
- smonff 14y ago
  Don't support Nexus4 either...
  - valinor4 14y ago
    It works on my LG Nexus 4.
- enoj 14y ago
  If this is the issue I think it is ( https://github.com/twitter/bootstrap/issues/4550 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.
ankit84 14y ago
One thing I liked most is 'Responsive utilities', no device specific coding. If you want show sidebar on desktop, drop .visible-desktop.
- tterrace 14y ago
  You can use that now in 2.x: http://twitter.github.com/bootstrap/scaffolding.html#responsive http://twitter.github.com/bootstrap/scaffolding.html#respons...
baby 14y ago
I don't get why they went full flat. It was way more attractive before.
zenocon 14y ago
why don't they just incorporate font awesome?
- philfreo 14y ago
  They're using Glyphicons which also has a font
hannibalhorn 14y ago
If anyone is looking for a basic summary of "What's new", the best I found was their blog post about plans for v3: http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/ http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/
- nmcfarl 14y ago
  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.
- welder 14y ago
  Here's the most comprehensive list of changes I've found. The pull request for Bootstrap 3 on github: https://github.com/twitter/bootstrap/pull/6342 https://github.com/twitter/bootstrap/pull/6342
  - hannibalhorn 14y ago
    That's a much more informative list, thanks!
- jcolemorr11 14y ago
  Thanks man. Great straightforward list.
mourique 14y ago
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.
- gavinballard 14y ago
  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.
throwawayG9 14y ago
Modal is still a disaster.
- tonyblundell 14y ago
  Why?
mratzloff 14y ago
Mobile first? There are a ton of broken examples on my iPhone (grids, inline elements, etc.).
- manojlds 14y ago
  That's why it is in preview and not released?
  - mratzloff 14y ago
    I'm previewing my new flying car. It doesn't fly yet but it drives great on the road.
    - HNSucksAss 14y ago
      Http://terrafugia.com
    - rschmitty 14y ago
      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.
alexvr 14y ago
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.
- nsmartt 14y ago
  According to http://news.ycombinator.com/item?id=5351887 http://news.ycombinator.com/item?id=5351887, the flatness is temporary.
- Kudos 14y ago
  The more people stop using Bootstrap as a complete design the happier I will be.
  - lucisferre 14y ago
    What would you suggest they use? Why does your happiness depend on this?
    - psychometry 14y ago
      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.
      - eflowers 14y ago
        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.
laureny 14y ago
So Bootstrap uses proprietary HTML elements, like Angular? I like both frameworks but is this a trend we should worry about?
- tterrace 14y ago
  I didn't see any proprietary elements, which ones do you mean?
- Kudos 14y ago
  Which elements would those be? I can see custom attributes for the javascript plugins and in that context it's completely fine.
- winkerVSbecks 14y ago
  What's the problem with Angular's choice? 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.
pistacchioso 14y ago
I still fail to understand this. What's its purpose? To make all web pages look the same?
- jaredmcateer 14y ago
  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.
- jschuur 14y ago
  One purpose is to allow less design inclined developers to rapidly produce a decent looking prototype that people can play around with.
- corresation 14y ago
  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.
babuskov 14y ago
I like the way tables are handled, it looks so easy now. However, there are still bugs. Screenshots here: http://www.backwardcompatible.net/164-twitter-bootstrap-3-bugs http://www.backwardcompatible.net/164-twitter-bootstrap-3-bu...
aioprisan 14y ago
the download link is broken
gdonelli 14y ago
Can we make the flat UI optional?
- jasonlotito 14y ago
  https://github.com/twitter/bootstrap/pull/6342#issuecomment-12332378 https://github.com/twitter/bootstrap/pull/6342#issuecomment-... Gradients and other embellishments have temporarily been removed while I focus on other things. It has nothing to do with skeuomorphism or anything like that. Also, considering the nature of Bootstrap, the UI design is always optional.
gdonelli 14y ago
Can we make the flat UI optional?
andyl 14y ago
Mobile first - Yeah! Can anyone compare/constrast the mobilefirst-ness of Bootstrap3 and Zurb4 ?? Why would I use one vs the other??
- MatthewPhillips 14y ago
  That's a good question that I'd like to see answered. It seems to me that mobile-first is used as a buzzword here. Unless they are literally inventing features for the mobile layout and then finding a way to make them work on desktop -- for example if the navigation bar accordion thing was there before the full desktop navigation bar.
  - jcomis 14y ago
    Not sure what you mean by this. Mobile first just means everything is designed starting from a mobile view. It's not a "feature" like some sort UI item, it's a style of design thinking with the goal of ensuring the mobile context is absolutely as simple as it can be. It's not a buzzword since this is how they approached this version.
    - MatthewPhillips 14y ago
      So what specifically was designed with a mobile view first in Bootstrap 3? I'm not being argumentative, I just want to know.
      - jcomis 14y ago
        Just check out the css, everything starts with the 480 media query and builds on top of that. CSS is added to the base mobile CSS (which is incredibly simple) to work as the width goes up. Check v2, it's (almost) completely the other way around. Again, it's not a specific thing, it's everything.
camus 14y ago
Is it me or do they use greyish text on white background that makes the whole thing hard to read ? i'd like to understand , what the hell is that low contrast trend and how does it make the text more readable ? Designer should quit it. Are they stupid or what ? Also this flat trend make the design very poor , but maybe that's the intended effect.
- larrydavid 14y ago
  I think you need to relax. If the design is so poor then customize it. Or even better, submit a pull request that includes your own brilliant design skills.
- crisnoble 14y ago
  >Also this flat trend make the design very poor. Bootstrap is not just a UI framework.
- jasonlotito 14y ago
  https://github.com/twitter/bootstrap/pull/6342#issuecomment-12332378 https://github.com/twitter/bootstrap/pull/6342#issuecomment-... Gradients and other embellishments have temporarily been removed while I focus on other things. It has nothing to do with skeuomorphism or anything like that.
president 14y ago
What's with the whitish glow on button text?
- brennanm 14y ago
  It's a dropshadow on the text which makes the button text look embossed when there is a gradient on the buttons. There will be gradients on the buttons. https://github.com/twitter/bootstrap/pull/6342#issuecomment-12332378 https://github.com/twitter/bootstrap/pull/6342#issuecomment-...
- colmtuite 14y ago
  This is down to poor typographic styling. It can be removed with two lines of CSS: -webkit-font-smoothing: antialiased; font-weight: bold;
terrellm 14y ago
The Responsive Utilities section is interesting with new classes such as .visible-phone and .hidden-phone (also tablet and desktop) but I find in my app that my customers want to see all of the columns even if it means a little bit of scrolling. Zurb takes an interesting approach with their responsive tables (http://www.zurb.com/playground/responsive-tables http://www.zurb.com/playground/responsive-tables).
- mgkimsal 14y ago
  bootstrap 2 (and 1 IIRC) have .visible-/.hidden- classes already - is there something new?
  - djbender 14y ago
    yeah those classes are not new.
  - terrellm 14y ago
    You are right... my mistake. I was looking on a different page of the old bootstrap site.
zerop 14y ago
I see some of bootsnipp's ready made recipes are added in this version.
zachdonovan 14y ago
is the table of contents ordering out of whack for everyone? when I scroll down the page, the right hand table of contents jumps typography->grid system->code->tables, even though the menu is laid out as typography->code->grid system->tables...
prisonguard 14y ago
with some sass knowledge you are better of starting off with a couple of mixins and building from bottom up as compared to loading a fat css file you probably won't use 80pc of its rules. Normalize css[1] Bourbon[2] for utilities Neat[3] for the grid, Typeplate[4] for a nice type base. If you still need bootstrap style elements, you can get individual mixins and styles from one the bootstrap-sass projects[5] [1] https://github.com/necolas/normalize.css/ https://github.com/necolas/normalize.css/ [2] http://bourbon.io http://bourbon.io [3] http://neat.bourbon.io http://neat.bourbon.io [4] http://typeplate.com http://typeplate.com [5] https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass edit: typo
gavingmiller 14y ago
A big heads up for anyone thinking of switching. Bootstrap 3 "Drops IE7/FF3x support entirely." ref: http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/ http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/
- lowboy 14y ago
  A big heads up to those people who still support ie7, that is. Google and Facebook dropped support a while ago, and ie7's usage share is around 0.6-2.0% globally. http://clicky.com/marketshare/global/web-browsers/versions/ http://clicky.com/marketshare/global/web-browsers/versions/ http://gs.statcounter.com/#browser_version_partially_combined-na-monthly-201202-201302 http://gs.statcounter.com/#browser_version_partially_combine...
  - lukifer 14y ago
    IE7 doesn't cause nearly the same scale of problems that IE6 did; I don't think 1% is small enough to justify ignoring it entirely. (I suppose it depends on whether it degrades gracefully or becomes unusable.)
    - bcks 14y ago
      Indeed, I'm starting a responsive site design project that will have a large target audience in China... where some 20% of users are still on IE6. Looks like I'll be testing both Bootstrap and Foundation.
      - adlpz 14y ago
        Heh, good luck doing responsive on IE6 without going crazy!
  - camus 14y ago
    I hope you understand that global usage is totally irrelevant, when as a web developer you need to target a specific audience. If your audience is public businesses ie7 shares whill not be just 1% of your target. If you care only about people using browsers at home,then you are not doing your job.
pgsch 14y ago
Will be nice to have a "border-less" class for tables...
kylebrown 14y ago
How is the touch support now? I was trying to use bootstrap "radio buttons" the other day, flailed about for several hours (touchend handlers worked for regular buttons, but not the radio buttons), and they still aren't working on an iPad.
arianvanp 14y ago
Meh. too flat
- jasonlotito 14y ago
  > Seriously, fuck off with the flat UI already! I can't express it in any more politely Apparently you can. Regardless: ull/6342#issuecomment-12332378 Gradients and other embellishments have temporarily been removed while I focus on other things. It has nothing to do with skeuomorphism or anything like that.
- bokchoy 14y ago
  I hear you can style the buttons yourself using css!
waleedka 14y ago
For comparison, also check Foundation 4.0, launched about 10 days ago. Foundation seems to be slightly ahead (as in, already launched) in moving to newer technologies (mobile-first, border-sizing:border-box, ..etc). http://www.zurb.com/article/1173/foundation-4-is-here-the-smartest-foundat http://www.zurb.com/article/1173/foundation-4-is-here-the-sm...
- Goopplesoft 14y ago
  >Foundation seems to be slightly ahead in moving to newer technologies (mobile-first, border-sizing:border-box, ..etc). Check out "Layout and grid system" section here: https://github.com/twitter/bootstrap/pull/6342 https://github.com/twitter/bootstrap/pull/6342, it specifically mentions border-sizing: border-box is being used and in the top in bold it says "Bootstrap 3 will be mobile-first"
  - waleedka 14y ago
    Bootstrap 3 is not launched yet and Foundation 4 is. That's what I meant by "slightly ahead".
drewmclellan 14y ago
The issue Bootstrap still has is that the parts that make use of JavaScript completely rely on JavaScript. If you're on a flakey data connection, for example, and JavaScript doesn't load parts of the page simply break. The tab component is a good example of this - turn off JavaScript in your browser and you'll see that it still looks like tabs (thanks to CSS) but you just can't access anything part from the first tab. Technically, this isn't a hard problem to solve. Have JavaScript add the HTML class that triggers the CSS rules to make the content look like tabs. If JavaScript fails, no part of the page ever gets hidden. It would be great to see Bootstrap embrace progressive enhancement properly. With more devices of different capabilities accessing the web over networks of varying quality all the time, it becomes more important than ever to build robustly and not just for the best-case scenario.
- Diamons 14y ago
  I disagree. As a web designer/developer your job is to make sure your site looks proper. If someone chooses to disable javascript, they know that they are missing out. It's their personal choice to embrace an inferior web experience, and I don't think it's fair to have to compensate for them as well.
  - lukifer 14y ago
    ...except that JS can also fail due to network lag or simple programming errors (like a trailing JSON comma in IE). Ideally, sites should remain as functional as possible if JS or CSS fail to load. (Admittedly, a great many large websites fail this test.)
    - criley 14y ago
      Requiring a refresh is not outlandish. If they failed to load the content due to network error, they will already be used to that kind of flaky connection and the refreshes it requires. Specifically building your app to attempt to handle the "bad data connection" use case that users already are familiar with in the context of the internet seems like bad programming. Why provide a usable but substandard experience when those users would get a superior experience after a simple refresh? As for the "turned it off crowd": in terms of web apps, who cares? If you've disabled Javascript, you're not looking to use web apps -- period. Javascript is required to use web apps for anything other than fancy form posting... Of course, every site's audience is different, and you should prioritize your development for your audience.
nateweiss 14y ago
Endless props, thanks, and respect to the Bootstrap team. They do an amazing job, sometimes with less-than-amazing levels of gratitude in return.
w3chybrid 14y ago
For god's sake, just learn some CSS already.
mikegirouard 14y ago
Something that always bothered me about Bootstrap is that the examples don't make full use of HTML5, although… Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. The two examples that immediately come to mind are NAVs[1] and progress bars[2]; HTML5 already defines these elements. Why reinvent the wheel? [1]: http://rc.getbootstrap.com/components/#navs http://rc.getbootstrap.com/components/#navs [2]: http://rc.getbootstrap.com/components/#progress http://rc.getbootstrap.com/components/#progress
- subsection1h 14y ago
  When I evaluated the use of HTML5 section elements last year, including the nav element, screen readers didn't support them.[1] Also, there wasn't any benefit to using HTML5 section elements. A book named The Truth About HTML5[2] provides additional reasons not to use HTML section elements. I've yet to read about any benefits to using HTML5 section elements. [1] http://www.accessibleculture.org/articles/2011/10/jaws-ie-and-headings-in-html5/ http://www.accessibleculture.org/articles/2011/10/jaws-ie-an... [2] http://www.truthabouthtml5.com/ http://www.truthabouthtml5.com/
rip747 14y ago
i really wish they wouldn't lock form into being horizontal or inline by putting a class on the form tag itself, but rather by using the fieldset tag. The whole reason is because sometime when you are doing a large form, some sections just flow better as an inline rather then a horizontal and vica-versa. I submitted a ticket about this a while back, but it must have been overruled.
derwiki 14y ago
I like the addition of the .btn-block class -- I'll definitely be using that for mobile optimization!
lennexz 14y ago
Doesnt look too good on opera mini
offdrey 14y ago
I don't get this flat look, it reminds me of Windows 8. Is it a new trand in web design?
notdonspaulding 14y ago
The description at the start of the pull request for this work-in-progress branch is worth a read for understanding the motivations behind most of the changes. https://github.com/twitter/bootstrap/pull/6342 https://github.com/twitter/bootstrap/pull/6342 It may also help to keep in mind that this is a preview. Bootstrap 3 isn't done yet.

306 points by winkerVSbecks 14y ago

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?

iM8t 14y ago

I actually like the changes. Now everyone will have to do a bit of style editing before using this. So we won't see so many identical sites.

escaped_hn 14y ago

I don't really like the new buttons. Other than that good job.

Kiro 14y ago

The buttons look like they are disabled.

callahad 14y ago
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. :(
- duncans 14y ago
  Hey everybody, callahad is on a plane!

tzury 14y ago

Those new badges are a real nice addition http://rc.getbootstrap.com/components/#badges http://rc.getbootstrap.com/components/#badges

MJR 14y ago
Are you referring to the addition of active nav states? The rest has been around for a while: http://twitter.github.com/bootstrap/components.html#labels-badges http://twitter.github.com/bootstrap/components.html#labels-b...
haydenchambers 14y ago
whats the difference ? http://twitter.github.com/bootstrap/components.html#labels-badges http://twitter.github.com/bootstrap/components.html#labels-b...

zekenie 14y ago

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

winkerVSbecks 14y ago
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.
baby 14y ago
They actually don't look like buttons at all, which defeat the purpose of a button.
arb99 14y ago
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.
- sigkill 14y ago
  The "Download Bootstrap Source" button in grey looks disabled.

benoitg 14y ago

For everyone complaining about the flatness, it looks like it's only temporary. https://github.com/twitter/bootstrap/pull/6342#issuecomment-12332378 https://github.com/twitter/bootstrap/pull/6342#issuecomment-...

cwilson 14y ago
Happy to see even though the removal temporary, they are looking into a way to easily remove styles for those who enjoy the flatness.
- benoitg 14y ago
  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.
tonyblundell 14y ago
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.
justindocanto 14y ago
So glad I saw this. Thanks for posting that. I would have been very sad if they went flat.
geuis 14y ago
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.
yesimahuman 14y ago
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.

meunier 14y ago

Segmented dropdown groups are broken for me in chrome. The drop down is floating underneath the button.

gavinballard 14y ago

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.

baby 14y ago
Well there is no Scaffolding section so it's hard to know what changed beside the aesthetic.
- rkuykendall-com 14y ago
  This is the new scaffolding section: http://rc.getbootstrap.com/css/#grid-system http://rc.getbootstrap.com/css/#grid-system 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.
  - baby 14y ago
    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.
    - gavinballard 14y ago
      I believe Bootstrap 3 does in fact use border-box - hence the padded grids and a major driver behind the drop in support for IE7.

deleted 14y ago

[deleted]

woah 14y ago

Fyi, top nav menu doesn't work on nexus 7

smonff 14y ago
Don't support Nexus4 either...
- valinor4 14y ago
  It works on my LG Nexus 4.
enoj 14y ago
If this is the issue I think it is ( https://github.com/twitter/bootstrap/issues/4550 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.

ankit84 14y ago

One thing I liked most is 'Responsive utilities', no device specific coding. If you want show sidebar on desktop, drop .visible-desktop.

tterrace 14y ago
You can use that now in 2.x: http://twitter.github.com/bootstrap/scaffolding.html#responsive http://twitter.github.com/bootstrap/scaffolding.html#respons...

baby 14y ago

I don't get why they went full flat. It was way more attractive before.

zenocon 14y ago

why don't they just incorporate font awesome?

philfreo 14y ago
They're using Glyphicons which also has a font

hannibalhorn 14y ago

If anyone is looking for a basic summary of "What's new", the best I found was their blog post about plans for v3: http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/ http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/

nmcfarl 14y ago
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.
welder 14y ago
Here's the most comprehensive list of changes I've found. The pull request for Bootstrap 3 on github: https://github.com/twitter/bootstrap/pull/6342 https://github.com/twitter/bootstrap/pull/6342
- hannibalhorn 14y ago
  That's a much more informative list, thanks!
jcolemorr11 14y ago
Thanks man. Great straightforward list.

mourique 14y ago

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.

gavinballard 14y ago
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.

throwawayG9 14y ago

Modal is still a disaster.

tonyblundell 14y ago
Why?

mratzloff 14y ago

Mobile first? There are a ton of broken examples on my iPhone (grids, inline elements, etc.).

manojlds 14y ago
That's why it is in preview and not released?
- mratzloff 14y ago
  I'm previewing my new flying car. It doesn't fly yet but it drives great on the road.
  - HNSucksAss 14y ago
    Http://terrafugia.com
  - rschmitty 14y ago
    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.

alexvr 14y ago

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.

nsmartt 14y ago
According to http://news.ycombinator.com/item?id=5351887 http://news.ycombinator.com/item?id=5351887, the flatness is temporary.
Kudos 14y ago
The more people stop using Bootstrap as a complete design the happier I will be.
- lucisferre 14y ago
  What would you suggest they use? Why does your happiness depend on this?
  - psychometry 14y ago
    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.
    - eflowers 14y ago
      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.

laureny 14y ago

So Bootstrap uses proprietary HTML elements, like Angular? I like both frameworks but is this a trend we should worry about?

tterrace 14y ago
I didn't see any proprietary elements, which ones do you mean?
Kudos 14y ago
Which elements would those be? I can see custom attributes for the javascript plugins and in that context it's completely fine.
winkerVSbecks 14y ago
What's the problem with Angular's choice? 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.

pistacchioso 14y ago

I still fail to understand this. What's its purpose? To make all web pages look the same?

jaredmcateer 14y ago
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.
jschuur 14y ago
One purpose is to allow less design inclined developers to rapidly produce a decent looking prototype that people can play around with.
corresation 14y ago
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.

babuskov 14y ago

I like the way tables are handled, it looks so easy now. However, there are still bugs. Screenshots here: http://www.backwardcompatible.net/164-twitter-bootstrap-3-bugs http://www.backwardcompatible.net/164-twitter-bootstrap-3-bu...

aioprisan 14y ago

the download link is broken

gdonelli 14y ago

Can we make the flat UI optional?

jasonlotito 14y ago
https://github.com/twitter/bootstrap/pull/6342#issuecomment-12332378 https://github.com/twitter/bootstrap/pull/6342#issuecomment-... Gradients and other embellishments have temporarily been removed while I focus on other things. It has nothing to do with skeuomorphism or anything like that. Also, considering the nature of Bootstrap, the UI design is always optional.

gdonelli 14y ago

Can we make the flat UI optional?

andyl 14y ago

Mobile first - Yeah! Can anyone compare/constrast the mobilefirst-ness of Bootstrap3 and Zurb4 ?? Why would I use one vs the other??

MatthewPhillips 14y ago
That's a good question that I'd like to see answered. It seems to me that mobile-first is used as a buzzword here. Unless they are literally inventing features for the mobile layout and then finding a way to make them work on desktop -- for example if the navigation bar accordion thing was there before the full desktop navigation bar.
- jcomis 14y ago
  Not sure what you mean by this. Mobile first just means everything is designed starting from a mobile view. It's not a "feature" like some sort UI item, it's a style of design thinking with the goal of ensuring the mobile context is absolutely as simple as it can be. It's not a buzzword since this is how they approached this version.
  - MatthewPhillips 14y ago
    So what specifically was designed with a mobile view first in Bootstrap 3? I'm not being argumentative, I just want to know.
    - jcomis 14y ago
      Just check out the css, everything starts with the 480 media query and builds on top of that. CSS is added to the base mobile CSS (which is incredibly simple) to work as the width goes up. Check v2, it's (almost) completely the other way around. Again, it's not a specific thing, it's everything.

camus 14y ago

Is it me or do they use greyish text on white background that makes the whole thing hard to read ? i'd like to understand , what the hell is that low contrast trend and how does it make the text more readable ? Designer should quit it. Are they stupid or what ? Also this flat trend make the design very poor , but maybe that's the intended effect.

larrydavid 14y ago
I think you need to relax. If the design is so poor then customize it. Or even better, submit a pull request that includes your own brilliant design skills.
crisnoble 14y ago
>Also this flat trend make the design very poor. Bootstrap is not just a UI framework.
jasonlotito 14y ago
https://github.com/twitter/bootstrap/pull/6342#issuecomment-12332378 https://github.com/twitter/bootstrap/pull/6342#issuecomment-... Gradients and other embellishments have temporarily been removed while I focus on other things. It has nothing to do with skeuomorphism or anything like that.

president 14y ago

What's with the whitish glow on button text?

brennanm 14y ago
It's a dropshadow on the text which makes the button text look embossed when there is a gradient on the buttons. There will be gradients on the buttons. https://github.com/twitter/bootstrap/pull/6342#issuecomment-12332378 https://github.com/twitter/bootstrap/pull/6342#issuecomment-...
colmtuite 14y ago
This is down to poor typographic styling. It can be removed with two lines of CSS: -webkit-font-smoothing: antialiased; font-weight: bold;

terrellm 14y ago

The Responsive Utilities section is interesting with new classes such as .visible-phone and .hidden-phone (also tablet and desktop) but I find in my app that my customers want to see all of the columns even if it means a little bit of scrolling. Zurb takes an interesting approach with their responsive tables (http://www.zurb.com/playground/responsive-tables http://www.zurb.com/playground/responsive-tables).

mgkimsal 14y ago
bootstrap 2 (and 1 IIRC) have .visible-/.hidden- classes already - is there something new?
- djbender 14y ago
  yeah those classes are not new.
- terrellm 14y ago
  You are right... my mistake. I was looking on a different page of the old bootstrap site.

zerop 14y ago

I see some of bootsnipp's ready made recipes are added in this version.

zachdonovan 14y ago

is the table of contents ordering out of whack for everyone? when I scroll down the page, the right hand table of contents jumps typography->grid system->code->tables, even though the menu is laid out as typography->code->grid system->tables...

prisonguard 14y ago

with some sass knowledge you are better of starting off with a couple of mixins and building from bottom up as compared to loading a fat css file you probably won't use 80pc of its rules. Normalize css[1] Bourbon[2] for utilities Neat[3] for the grid, Typeplate[4] for a nice type base. If you still need bootstrap style elements, you can get individual mixins and styles from one the bootstrap-sass projects[5] [1] https://github.com/necolas/normalize.css/ https://github.com/necolas/normalize.css/ [2] http://bourbon.io http://bourbon.io [3] http://neat.bourbon.io http://neat.bourbon.io [4] http://typeplate.com http://typeplate.com [5] https://github.com/thomas-mcdonald/bootstrap-sass https://github.com/thomas-mcdonald/bootstrap-sass edit: typo

gavingmiller 14y ago

A big heads up for anyone thinking of switching. Bootstrap 3 "Drops IE7/FF3x support entirely." ref: http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/ http://blog.getbootstrap.com/2012/12/10/bootstrap-3-plans/

lowboy 14y ago
A big heads up to those people who still support ie7, that is. Google and Facebook dropped support a while ago, and ie7's usage share is around 0.6-2.0% globally. http://clicky.com/marketshare/global/web-browsers/versions/ http://clicky.com/marketshare/global/web-browsers/versions/ http://gs.statcounter.com/#browser_version_partially_combined-na-monthly-201202-201302 http://gs.statcounter.com/#browser_version_partially_combine...
- lukifer 14y ago
  IE7 doesn't cause nearly the same scale of problems that IE6 did; I don't think 1% is small enough to justify ignoring it entirely. (I suppose it depends on whether it degrades gracefully or becomes unusable.)
  - bcks 14y ago
    Indeed, I'm starting a responsive site design project that will have a large target audience in China... where some 20% of users are still on IE6. Looks like I'll be testing both Bootstrap and Foundation.
    - adlpz 14y ago
      Heh, good luck doing responsive on IE6 without going crazy!
- camus 14y ago
  I hope you understand that global usage is totally irrelevant, when as a web developer you need to target a specific audience. If your audience is public businesses ie7 shares whill not be just 1% of your target. If you care only about people using browsers at home,then you are not doing your job.

pgsch 14y ago

Will be nice to have a "border-less" class for tables...

kylebrown 14y ago

How is the touch support now? I was trying to use bootstrap "radio buttons" the other day, flailed about for several hours (touchend handlers worked for regular buttons, but not the radio buttons), and they still aren't working on an iPad.

arianvanp 14y ago

Meh. too flat

jasonlotito 14y ago
> Seriously, fuck off with the flat UI already! I can't express it in any more politely Apparently you can. Regardless: ull/6342#issuecomment-12332378 Gradients and other embellishments have temporarily been removed while I focus on other things. It has nothing to do with skeuomorphism or anything like that.
bokchoy 14y ago
I hear you can style the buttons yourself using css!

waleedka 14y ago

For comparison, also check Foundation 4.0, launched about 10 days ago. Foundation seems to be slightly ahead (as in, already launched) in moving to newer technologies (mobile-first, border-sizing:border-box, ..etc). http://www.zurb.com/article/1173/foundation-4-is-here-the-smartest-foundat http://www.zurb.com/article/1173/foundation-4-is-here-the-sm...

Goopplesoft 14y ago
>Foundation seems to be slightly ahead in moving to newer technologies (mobile-first, border-sizing:border-box, ..etc). Check out "Layout and grid system" section here: https://github.com/twitter/bootstrap/pull/6342 https://github.com/twitter/bootstrap/pull/6342, it specifically mentions border-sizing: border-box is being used and in the top in bold it says "Bootstrap 3 will be mobile-first"
- waleedka 14y ago
  Bootstrap 3 is not launched yet and Foundation 4 is. That's what I meant by "slightly ahead".

drewmclellan 14y ago

The issue Bootstrap still has is that the parts that make use of JavaScript completely rely on JavaScript. If you're on a flakey data connection, for example, and JavaScript doesn't load parts of the page simply break. The tab component is a good example of this - turn off JavaScript in your browser and you'll see that it still looks like tabs (thanks to CSS) but you just can't access anything part from the first tab. Technically, this isn't a hard problem to solve. Have JavaScript add the HTML class that triggers the CSS rules to make the content look like tabs. If JavaScript fails, no part of the page ever gets hidden. It would be great to see Bootstrap embrace progressive enhancement properly. With more devices of different capabilities accessing the web over networks of varying quality all the time, it becomes more important than ever to build robustly and not just for the best-case scenario.

Diamons 14y ago
I disagree. As a web designer/developer your job is to make sure your site looks proper. If someone chooses to disable javascript, they know that they are missing out. It's their personal choice to embrace an inferior web experience, and I don't think it's fair to have to compensate for them as well.
- lukifer 14y ago
  ...except that JS can also fail due to network lag or simple programming errors (like a trailing JSON comma in IE). Ideally, sites should remain as functional as possible if JS or CSS fail to load. (Admittedly, a great many large websites fail this test.)
  - criley 14y ago
    Requiring a refresh is not outlandish. If they failed to load the content due to network error, they will already be used to that kind of flaky connection and the refreshes it requires. Specifically building your app to attempt to handle the "bad data connection" use case that users already are familiar with in the context of the internet seems like bad programming. Why provide a usable but substandard experience when those users would get a superior experience after a simple refresh? As for the "turned it off crowd": in terms of web apps, who cares? If you've disabled Javascript, you're not looking to use web apps -- period. Javascript is required to use web apps for anything other than fancy form posting... Of course, every site's audience is different, and you should prioritize your development for your audience.

nateweiss 14y ago

Endless props, thanks, and respect to the Bootstrap team. They do an amazing job, sometimes with less-than-amazing levels of gratitude in return.

w3chybrid 14y ago

For god's sake, just learn some CSS already.

mikegirouard 14y ago

Something that always bothered me about Bootstrap is that the examples don't make full use of HTML5, although… Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Include it at the beginning of all your projects. The two examples that immediately come to mind are NAVs[1] and progress bars[2]; HTML5 already defines these elements. Why reinvent the wheel? [1]: http://rc.getbootstrap.com/components/#navs http://rc.getbootstrap.com/components/#navs [2]: http://rc.getbootstrap.com/components/#progress http://rc.getbootstrap.com/components/#progress

subsection1h 14y ago
When I evaluated the use of HTML5 section elements last year, including the nav element, screen readers didn't support them.[1] Also, there wasn't any benefit to using HTML5 section elements. A book named The Truth About HTML5[2] provides additional reasons not to use HTML section elements. I've yet to read about any benefits to using HTML5 section elements. [1] http://www.accessibleculture.org/articles/2011/10/jaws-ie-and-headings-in-html5/ http://www.accessibleculture.org/articles/2011/10/jaws-ie-an... [2] http://www.truthabouthtml5.com/ http://www.truthabouthtml5.com/

rip747 14y ago

i really wish they wouldn't lock form into being horizontal or inline by putting a class on the form tag itself, but rather by using the fieldset tag. The whole reason is because sometime when you are doing a large form, some sections just flow better as an inline rather then a horizontal and vica-versa. I submitted a ticket about this a while back, but it must have been overruled.

derwiki 14y ago

I like the addition of the .btn-block class -- I'll definitely be using that for mobile optimization!

lennexz 14y ago

Doesnt look too good on opera mini

offdrey 14y ago

I don't get this flat look, it reminds me of Windows 8. Is it a new trand in web design?

notdonspaulding 14y ago

The description at the start of the pull request for this work-in-progress branch is worth a read for understanding the motivations behind most of the changes. https://github.com/twitter/bootstrap/pull/6342 https://github.com/twitter/bootstrap/pull/6342 It may also help to keep in mind that this is a preview. Bootstrap 3 isn't done yet.