Created by: AoDev
Previous note: I've never made pull request on github, I'm not that confortable with them, I hope I haven't done something wrong. Just let me know :)
What?
I've added variables for all media queries breakpoints in variables.less and replaced the corresponding values in the less files. They are prefixed with 'screen-'
Why?
- more semantic and easy to remember than plain values
example in carousel.less:
// Scale up controls for tablets and up
@media screen and (min-width: @screen-tablet) compared to
@media screen and (min-width: 768px) - consequence of the previous point: you can't make mistake
more than once I have seen things like that:
@media screen and (min-width: 479px) //foo1.less
@media screen and (min-width: 480px) //foo2.less- customize for your needs
I don't want to launch a debate about this but, I think people have taken the wrong habit to associate breakpoints with some devices.
And I recently read that media queries should use em units.
The important thing to consider is that your breakpoints should depend on your design.
So, for everybody to be happy, people can override the variables. (And I've put the same values of the twitter guys by default so you can just forget about them if you want :))
And, to continue with the semantics, here is a thing:
@media (max-width: 768px), is assumed to be for phones and tablets... are you certain that it's a phone or a tablet and not a resized browser window?
so I've decided to add variables like the following too, since we are actually checking the screen size and not if it's a phone or a tablet:
@screen-tiny (same as @screen-phone by default) @screen-small (same as @screen-tablet...) @screen-medium (same as @screen-desktop...) @screen-large (same as @screen-large-desktop...)
You can use whichever you prefer.
(the bootstrap.css in the docs has been updated too)
Let me know what you think ;)
Kevin/aodev