Uncategorized

Dead Simple Bootstrap LESS Media Query Mixins for Responsive Layouts

I’ve been hunting down a solution to this for a while, and as it turns out, it was right under my nose the whole time.

LESS supports media query “bubbling”; this is a fancy term for throwing the media queries outside of the declaration. I took that concept and combined it with Bootstrap 3.0‘s breakpoints from variables.less:

1
2
3
4
@xxs: ~'max-width: 377px';
@xs: ~'max-width: @{screen-xs-max}';
@sm: ~'max-width: @{screen-sm-max}';
@md: ~'max-width: @{screen-md-max}';

Then, I simply throw this in wherever I need to adjust for screen size:

1
2
3
4
5
6
7
8
9
10
11
12
#dat-element { 
...
@media(@xs) {
...
}
@media(@sm) {
...
}
@media(@md) {
...
}
}

Before anyone gets all crazy up in the comments, I know there are many ways to accomplish this. I prefer this way since it’s easy to remember the syntax and simple to use.

That’s the end of today’s lesson. Shout out to Jason Lengstorf for helping me formulate this little snippet of awesome.


Note: I set up my media queries to be based on max-width, even though bootstrap is mobile first. I haven’t been working with mobile first for a while now so I’m confortable with this method. If you want to set up your media queries for mobile first, change all the “max”s to “min”s like so:

1
2
3
4
@xxs: ~'min-width: 377px';
@xs: ~'min-width: @{screen-xs-min}';
@sm: ~'min-width: @{screen-sm-min}';
@md: ~'min-width: @{screen-md-min}';