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 npm:
npm install include-media - With yarn:
yarn add include-media - With Bower:
bower install include-media - With Rails:
gem 'include_media_rails'(maintained by KaoruDev) - 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.
- im-to-em - A tiny function to convert include-media breakpoints from
pxtoem. - include-media-hidden-classes - An include-media plugin to generate classes for hiding elements.
- 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)
- include-media-or - A fork of include-media with support for complex queries with logical disjunctions (maintained by Nirazul).
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.