Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Bootstrap 3 is mobile-first

github.com

Post reply on HN
Print view View original

21–30 of 30 posts

Re: Bootstrap 3 is mobile-first

#21

Post by ezraroi »

masonhensley wrote: post #4

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.gith…

I am using Bootstrap and FontAweosme for my website... there should not be any license problem by using them both.

Re: Bootstrap 3 is mobile-first

#22

Post by Bockit »

numbsafari wrote: post #10

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.

If it works how I hope it does, I might have a compelling reason to use LESS instead of SASS.

Re: Bootstrap 3 is mobile-first

#23

Post by chancancode »

notjustanymike wrote: post #12

"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?

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

Re: Bootstrap 3 is mobile-first

#24

Post by ZeroGravitas »

notjustanymike wrote: post #12

"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?

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.

Re: Bootstrap 3 is mobile-first

#25

Post by ZeroGravitas »

walkon wrote: post #16
singold wrote: post #7

Earlier quoted context omitted.

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

Font Awesome's license makes it effectively free: http://fortawesome.github.io/Font-Awesome/license/

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

Re: Bootstrap 3 is mobile-first

#26

Post by rubinelli »

hnriot wrote: post #18
dmix wrote: post #15

Earlier quoted context omitted.

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

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.

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.

Re: Bootstrap 3 is mobile-first

#27

Post by jgj »

buro9 wrote: post #19

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,…

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

Re: Bootstrap 3 is mobile-first

#28

Post by buro9 »

jgj wrote: post #27
buro9 wrote: post #19

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,…

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

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

Re: Bootstrap 3 is mobile-first

#29

Post by numbsafari »

seferphier wrote: post #17
dmix wrote: post #15

Earlier quoted context omitted.

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

I am a new to css / html. Can you explain to me why it is painful to deviate from their styles?

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:

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

Re: Bootstrap 3 is mobile-first

#30

Post by bjhoops1 »

notjustanymike wrote: post #12

"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?

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. :(
Post reply on HN