inuit.css
inuit.css copied to clipboard
csswizardry
Update breakpoint value from px to em
Why? It doesn't seen to me that you should use a relative unit here, since the media is measured in pixels anyway.
It's explained here: http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
But it means you need all your project made by relative units, which isn't the best case for every site (maybe when IE8 will die).
But the option to choose between the px and em for media query can be quite usfull
Well having the media queries in em, are as you can have read in the link tobaco provided, is a good practice. It doesn't mean all need to be be in em(even if that might be better) and as ie8 does not support media queries anyway, i don't see why it should be a problem.
It's true that IE 8 doesn't support media queries. But supporting IE 8 means you will probably need to declare twice font- size which makes thing more complicated and more heavy (even if you use a technique like David Walsh showed in his blog to separate files).
The problem, that ems are relative units to the their containers' font-size, which means that in many complex site it can add much more complexity and doubling the code which is neither good (and also there are also some problems with rem units because the rounding issue).
Also you need to take to your mind, that using em's media queries means assuming usually that your base font-size is 16px, which can change from user to user (and that means you can't have that assumption), that means you must pretty much use relative unit with any element if you don't want your layout to break which is very time consuming and not every project allows you having that time.
Again, I think it's a nice to have feature, but as long as I can choose between em and px. May be to _default-em.scss file will be the solution.
Hi Orvi,
You sure a some point here, but also why would zurb people would use em media queries if it is such a pain.
Anyways, this was actually just a suggestion, it might be great to maybe add something like “ if(media-query-em = true)" then get the -1px to em.
So everybody would be happy. I will actually try to add that to my pull request today, would this sound better for you?
Guillaume Kanoufi
On 28 Feb 2014, at 15:07, ori livni [email protected] wrote:
It's true that IE 8 doesn't support media queries. But supporting IE 8 means you will probably need to declare twice font- size which makes thing more complicated and more heavy (even if you use a technique like David Walsh showed in his blog to separate files). The problem, that ems are relative units to the their containers' font-size, which means that in many complex site it can add much more complexity and doubling the code which is neither good (and also there are also some problems with rem units because the rounding issue). Also you need to take to your mind, that using em's media queries means assuming usually that your base font-size is 16px, which can change from user to user (and that means you can't have that assumption), that means you must pretty much use relative unit with any element if you don't want your layout to break which is very time consuming and not every project allows you having that time.
Again, I think it's a nice to have feature, but as long as I can choose between em and px. May be to _default-em.scss file will be the solution.
— Reply to this email directly or view it on GitHub.
There is no goal of backward compatibility in the Foundation project. If you'll get to their site with IE 8, you wouldn't be able to see most of the content.
I think it's best to have a separate file that only override the variables you need for the em support. It's seem to me at least more logical and easier because this is why !default flag made for, and you can see it as an useful extension of this project instead of making this project more complex.
Anyhow, it would definitely be useful.
@oriSomething - The only time em-based media queries are problematic is when a dev adds a font-size to a container. With Inuit, that should never happen. Quite honestly, if the base is 16px, or 18px or 14px, the whole layout will scale. That's actually the beauty of it.
So if someone with low vision has changed their base browser font-size to 32px, the whole layout will scale when they hit your site (like it does when they zoom) and they won't get columns with single words stacked up. Ems are great. (Try changing your base browser size to 32px and then surf the web a bit... it's an interesting experiment.)
Yeah, I'm convinced. It's good enough to assume 16px as a base and let it all scale accordingly when needed. And if you use inuit's font-size mixim, you're already defining font-size twice anyway.
In case you haven't noticed. The new inuit.css lives in https://github.com/inuitcss. Not sure if this repo is actively maintained anymore.
