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 - With npm :
npm 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-spread - Calculates the difference between property values and distributes them through your include-media breakpoints.
- flex_e_ble - Uses your include-media breakpoints to create your own flexible class naming structure on top of a
flexbased grid withinline-blockfallback for >= ie8 compatibility - include-media-grid - An include-media plugin for generating grid classes based on the flex display
- 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.