Simple, elegant and maintainable media queries in Sass
include-media is a Sass library for writing CSS media queries in an easy and maintainable way, using a natural and simplistic syntax.
I spent quite some time experimenting with different libraries and mixins available out there, but eventually all of them failed to do everything I needed in an elegant way. Some of them wouldn't let me mix set breakpoints with case-specific values, others wouldn't properly handle the CSS OR operator and most of them had a syntax that I found complicated and unnatural.
include-media was the result of that experience and it includes all the features I wish I had found before, whilst maintaining a simplistic and natural syntax.
- With Bower:
bower install include-media - Manually: get this file
Finally, include the file in your project using an @import statement.
Examples can be found here.
- include-media-export - Reference include-media breakpoints in JavaScript.
- include-media-columns - Generate column classes using the BEMIT naming convention, automatically referencing include-media breakpoints.
- include-media.com
- Documentation
- Approaches to Media Queries in Sass (CSS-Tricks)
- Write Simple, Elegant and Maintainable Media Queries with Sass (David Walsh blog)
- Generating Alternative Stylesheets for Browsers Without @media (David Walsh blog)
- Create Simple Inline Media Queries with include-media (WebDevStudios)
- Breakpoints and Tweakpoints in Sass (SitePoint)
We are Eduardo Bouças and Hugo Giraudel.
We'll be on the lookout for your issues and pull requests — but make sure you read this before submitting any code!
This project is licensed under the terms of the MIT license.