Media Query Mixins using SASS for Bootstrap 4 and understanding responsiveness approaches

April 8th, 2018 Bootstrap 398 views

CSS frameworks like Bootstrap 4 comes with very powerful responsiveness utilities but some people(like me) still prefer using their own media queries to create stylesheets in place of using that framework’s own SASS mixins. To use Bootstrap 4’s SASS mixins, you have to include the whole bootstrap SASS package into your main SASS file. Some people do not prefer using that as its much simple to include just one bootstrap.min.css in place of nesting all the SASS files.

Talking about media queries, there are mainly 3 approaches. I don’t know their technical names but I call them as below:

  1. Mobile First
  2. Desktop First
  3. Range Specific

Mobile First

For Mobile first approach, the mindset is to design the mobile version of the website first. And then adding different media queries for different device sizes above the mobile screen size. So the media queries we write will be like this.

And further increasing the screen size.

Desktop First

For Desktop first approach, as you assumed, the mindset is to design the desktop version of the website first. And then adding different media queries for different device sizes below the desktop screen size. So the media queries we write will be like this.

And further decreasing the screen size.

Range Specific

You can call this a special case media queries. So e.g. if you want your website logo size to be changed to 100px only for specific range of screen size. You can write it like this

So that’s how the different approaches for responsiveness works.

Now, to utilize these approaches using SASS mixins in Your bootstrap based or any other website, I created this simple set of mixins. You can copy it from below and use it.

This is pretty self explanatory. First the sizes are defined for different screens. The sizes are taken directly from Bootstrap framework as they are pretty standard. Next there are 3 mixins for all 3 media query approaches.

So if you want to use mobile first approach, you can use it like this :

For desktop first :

And for specific screen sizes you can use it like this :

I hope you devs find this article useful. Please share it with others and don’t forget to leave your valuable comments.

Leave your comments: