[buro9]

I've found a few problems from using Bootstrap 3:

1) By going mobile first, browsers such as IE8 which don't implement media queries now require you to add in an extra 15KB of CSS to fix it ( https://code.google.com/p/css3-mediaqueries-js/ ) , whereas all smart phones support media queries already.

2) By having glyphicons as fonts rather than sprites, we gain the ability to precisely size, place and colour the icon, but have now broken accessibility as the vision impaired or those choosing to have their browser use user specified fonts now get random characters displayed.

And that is it... the only 2 issues from a site currently in production and with users.

I should note that there are some really good bits, the extra support for mixins for example. I also personally also love that the new grid is now fluid and responsive by default. I like the declarative nature of col-lg-* and col-sm-* (though think a col-md-* should exist for fine-tuning layout tablets).

The biggest hurdle in coming from 2 to 3 is really the grid changes, the move to fluid, the changing of the class names. There are some minor changes to class names for buttons, forms, text colours, etc... but nothing that requires too much thought to deal with when upgrading.

[jgj]

1) You can use respond.js[1] if you don't need complicated media queries. It's much smaller than 15k

2) Icon Fonts should make use of the Unicode Private Use Areas[2]. Screen readers should not attempt to make sense of these code points, and you can add title tags to enhance accessibility.

[1] https://github.com/scottjehl/Respond [2] https://en.wikipedia.org/wiki/Private_Use_%28Unicode%29

[buro9]

Thanks for Respond, I'll give it a try.

On #2, that might fix screenreaders but it still looks ugly if a user chooses their own font: https://f.cloud.github.com/assets/1126981/506313/554bfab4-bd...

What we're likely to do is to create SVG icons and use those. with .png fallback... much like how Zurb are doing so: http://zurb.com/playground/social-webicons