7 ms·

Bootstrap 3 is mobile-first

100 points by storborg 13y ago

dangrossman 13y ago
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 13y ago
  There's also http://www.bootstrapdocs.com http://www.bootstrapdocs.com
markdown 13y ago
Going handheld first and dropping older browsers? Good to know they're following the path that Foundation took.
masonhensley 13y ago
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/ 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/ 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."
- jarcoal 13y ago
  Wow that is a terrible change, I hope they back that out.
- singold 13y ago
  About Glyphicons From Bootstrap docs (http://twitter.github.io/bootstrap/base-css.html#icons 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 13y ago
    Font Awesome's license makes it effectively free: http://fortawesome.github.io/Font-Awesome/license/ http://fortawesome.github.io/Font-Awesome/license/
    - ZeroGravitas 13y ago
      The Font Awesome licence is much better (permissive) than the Glyphicons one.
- WatchDog 13y ago
  Glyphicons provides a special license for bootstrap. I assume the publicity/business that bootstrap drives to glyphicons must be well worth giving away part of their paid product.
- mgkimsal 13y ago
  I didn't think fontawesome was around when bootstrap started, but I'd think now it'd be better to bundle fontawesome instead - more icons and they're scalable; that's been my experience of why FA>GI.
- ezraroi 13y ago
  I am using Bootstrap and FontAweosme for my website... there should not be any license problem by using them both.
numbsafari 13y ago
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 13y ago
  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".
  - seferphier 13y ago
    I am a new to css / html. Can you explain to me why it is painful to deviate from their styles?
    - numbsafari 13y ago
      A good example is going to be the upgrade process from 2.x to 3.x. If you have been developing your site with Bootstrap to-date, then you've very likely been using their style classes throughout. For example, if you setup a grid on a page, perhaps you did something like this: <div id="home" class="row"> <div id="content" class="span10"> </div> <div id="sidebar" class="span2"> </div> </div> But with Bootstrap 3.x you'll need to change every instance of span* with col-span-*. Wouldn't it be nice if, instead of changing all of your templates, you could simply modify the LESS/CSS files using mixins? Upgrading is just one example, another example is attempting to use Bootstrap to style an existing application where you do not have the ability (or only a limited ability) to change the HTML, but only the ability to inject a CSS "theme".
  - hnriot 13y ago
    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.
TylerE 13y ago
So they're becoming an annoying Zurb 4 clone? I don't get it.
notjustanymike 13y ago
"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 13y ago
  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/build/assets/font-awesome/css/font-awesome.css#L156 https://github.com/FortAwesome/Font-Awesome/blob/master/buil...
- ZeroGravitas 13y ago
  When I implemented Bootstrap 2 with an existing site I found that the icon sprite was getting loaded on random pages. Turned out there was existing CSS that used "icon-" as part of the classname which was getting picked up by the Bootstrap CSS.
- bjhoops1 13y ago
  Yeah, this is going to be a bit of a pain. Plus it looks like you also have to add .glyphicon? So instead of .icon-plus, you now have .glyphicon .glyphicon-plus. :(
grishma 13y ago
any idea as to tentative release date?
- taitems 13y ago
  I asked a similar question on Twitter a couple of weeks ago and the only reply I got said "August?".
buro9 13y ago
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/ 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 13y ago
  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 https://github.com/scottjehl/Respond [2] https://en.wikipedia.org/wiki/Private_Use_%28Unicode%29 https://en.wikipedia.org/wiki/Private_Use_%28Unicode%29
  - buro9 13y ago
    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-bd4a-11e2-87ff-5701205870e8.png 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 http://zurb.com/playground/social-webicons
RusAlexander 13y ago
Some of bootsrap selectors are too slow. I will try version 3 in my project. And will check.

100 points by storborg 13y ago

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 13y ago
There's also http://www.bootstrapdocs.com http://www.bootstrapdocs.com

markdown 13y ago

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

masonhensley 13y ago

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/ 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/ 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."

jarcoal 13y ago
Wow that is a terrible change, I hope they back that out.
singold 13y ago
About Glyphicons From Bootstrap docs (http://twitter.github.io/bootstrap/base-css.html#icons 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 13y ago
  Font Awesome's license makes it effectively free: http://fortawesome.github.io/Font-Awesome/license/ http://fortawesome.github.io/Font-Awesome/license/
  - ZeroGravitas 13y ago
    The Font Awesome licence is much better (permissive) than the Glyphicons one.
WatchDog 13y ago
Glyphicons provides a special license for bootstrap. I assume the publicity/business that bootstrap drives to glyphicons must be well worth giving away part of their paid product.
mgkimsal 13y ago
I didn't think fontawesome was around when bootstrap started, but I'd think now it'd be better to bundle fontawesome instead - more icons and they're scalable; that's been my experience of why FA>GI.
ezraroi 13y ago
I am using Bootstrap and FontAweosme for my website... there should not be any license problem by using them both.

numbsafari 13y ago

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 13y ago
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".
- seferphier 13y ago
  I am a new to css / html. Can you explain to me why it is painful to deviate from their styles?
  - numbsafari 13y ago
    A good example is going to be the upgrade process from 2.x to 3.x. If you have been developing your site with Bootstrap to-date, then you've very likely been using their style classes throughout. For example, if you setup a grid on a page, perhaps you did something like this: <div id="home" class="row"> <div id="content" class="span10"> </div> <div id="sidebar" class="span2"> </div> </div> But with Bootstrap 3.x you'll need to change every instance of span* with col-span-*. Wouldn't it be nice if, instead of changing all of your templates, you could simply modify the LESS/CSS files using mixins? Upgrading is just one example, another example is attempting to use Bootstrap to style an existing application where you do not have the ability (or only a limited ability) to change the HTML, but only the ability to inject a CSS "theme".
- hnriot 13y ago
  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.

TylerE 13y ago

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

notjustanymike 13y ago

"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 13y ago
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/build/assets/font-awesome/css/font-awesome.css#L156 https://github.com/FortAwesome/Font-Awesome/blob/master/buil...
ZeroGravitas 13y ago
When I implemented Bootstrap 2 with an existing site I found that the icon sprite was getting loaded on random pages. Turned out there was existing CSS that used "icon-" as part of the classname which was getting picked up by the Bootstrap CSS.
bjhoops1 13y ago
Yeah, this is going to be a bit of a pain. Plus it looks like you also have to add .glyphicon? So instead of .icon-plus, you now have .glyphicon .glyphicon-plus. :(

grishma 13y ago

any idea as to tentative release date?

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

buro9 13y ago

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/ 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 13y ago
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 https://github.com/scottjehl/Respond [2] https://en.wikipedia.org/wiki/Private_Use_%28Unicode%29 https://en.wikipedia.org/wiki/Private_Use_%28Unicode%29
- buro9 13y ago
  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-bd4a-11e2-87ff-5701205870e8.png 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 http://zurb.com/playground/social-webicons

RusAlexander 13y ago

Some of bootsrap selectors are too slow. I will try version 3 in my project. And will check.