
Bootstrap 3 is mobile-first - storborg
https://github.com/twitter/bootstrap/pull/6342
======
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...](https://f.cloud.github.com/assets/1126981/506313/554bfab4-bd4a-11e2-87ff-5701205870e8.png)

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>

------
numbsafari
Forget about "mobile-first", this is probably the best part of Bootstrap 3:

 _Refactor components to be more mixin-friendly._

Honestly, Bootstrap will really benefit from being easier to fit into your own
markup, rather than forcing your markup to fit Bootstrap. I mean: that's what
CSS is kinda all about.

~~~
dmix
Agreed. This is why I abandoned Bootstrap for Zurb Foundation. I found
Foundation to be much more flexible and lightweight.

Bootstrap was so painful the moment you deviate from their styles. Similar to
Rails when deviating from the "rails way".

~~~
hnriot
I'm not new to CSS and also wonder why it was hard for you. I've found it very
easy to mix Bootstrap with my own CSS.

~~~
rubinelli
In my experience, sometimes you "click" with a certain architecture, because
it more or less maps to the way you work, and sometimes you don't. When you
don't, it will be easier to adapt it if it isn't too opinionated.

------
masonhensley
I know it isn't really a big thing, but this is really going to cramp my
style:

"Instead of .span and .offset, we're now using .col-span- and .col-offset-."

I can blaze through views using .row & .span in HAML, not so much now. I
envision tons of personal errors in the short term as I transition projects to
BS3.

===========

Issue #2, does anyone know why Glyphicons won out over Font Awesome? (
<http://fortawesome.github.io/Font-Awesome/> ) Isn't Glyphicons only free in
.png? I'm kinda confused about how the licensing works here:
<http://glyphicons.com/>

===========

Issue #3 [This is under the modal section...] This sounds like a bad idea, I
personally don't have an ios3/4 device handy, but someone should be on that
for something as big as bootstrap:

"Test on iOS5. Not sure if we need to go older, but I want to check here to
see how well fixed is supported."

~~~
singold
About Glyphicons

From Bootstrap docs (<http://twitter.github.io/bootstrap/base-
css.html#icons>):

"Glyphicons Halflings are normally not available for free, but an arrangement
between Bootstrap and the Glyphicons creators have made this possible at no
cost to you as developers. As a thank you, we ask you to include an optional
link back to Glyphicons whenever practical."

~~~
walkon
Font Awesome's license makes it effectively free:

<http://fortawesome.github.io/Font-Awesome/license/>

~~~
ZeroGravitas
The Font Awesome licence is much better (permissive) than the Glyphicons one.

------
notjustanymike
"Updated class prefix for all icons: .glyphicon- instead of .icon-. We changed
this for a more unique class, but also for consistency with the newly required
base class as noted above."

Seriously, how is that in any way helpful?

~~~
chancancode
So that people who ship alternative icon packs (e.g. font-awesome) no longer
have to hack around[1] the bootstrap style?

[1]: [https://github.com/FortAwesome/Font-
Awesome/blob/master/buil...](https://github.com/FortAwesome/Font-
Awesome/blob/master/build/assets/font-awesome/css/font-awesome.css#L156)

------
markdown
Going handheld first _and_ dropping older browsers? Good to know they're
following the path that Foundation took.

------
dangrossman
It's also dropping IE7 and FF3.6 support. I'm glad they'll be hosting
versioned docs as Bootstrap 2.x is going to be in use for a good while longer.

~~~
Implicated
There's also <http://www.bootstrapdocs.com>

------
TylerE
So they're becoming an annoying Zurb 4 clone? I don't get it.

------
grishma
any idea as to tentative release date?

~~~
taitems
I asked a similar question on Twitter a couple of weeks ago and the only reply
I got said "August?".

