include-media-export
Advanced tools
An include-media plugin for exporting breakpoints from Sass to JavaScript
Get include-media here.
include-media is a good solution for storing a list of breakpoints and using them to alter the behavior of a website using media queries. However, that list of breakpoints is restricted to the scope of the CSS stylesheets. That is fine most of the times, but it's not uncommon for developers to need access to that data on the JavaScript side. The concept is described here.
This plugin grabs all the breakpoints from include-media and outputs their status as JSON format on the content property of a DOM object (<body> by default), allowing developers to make decisions based on the viewport width without having to re-declare their breakpoints, leading to maintainability problems.
More information about this plugin can be found here.
Download _include-media-export.scss and include it in your Sass project
@import 'include-media-export';
Import includeMedia.min.js onto your project. This file is just a simplistic approach to access the information sent across by include-media. Feel free to extend it to fit your needs.
You can also use install the plugin using Bower
bower install include-media-export
###im.greaterThan(breakpoint)
Determines whether the current viewport width is greater than or equal to a set breakpoint
breakpoint - Name of the breakpoint to test againstBooleanif (im.greaterThan('desktop')) {
console.log('This is a really big screen');
}
###im.lessThan(breakpoint)
Determines whether the current viewport is less than a set breakpoint
breakpoint - Name of the breakpoint to test againstBooleanif (im.lessThan('tablet')) {
console.log('This looks like a phone or a small tablet');
}
###im.getActive()
Returns the name of the largest breakpoint active
Stringif (im.getActive() == 'phone') {
console.log('This looks like a phone');
}
###im.getValue(breakpoint, asNumber)
Returns a breakpoint's value
breakpoint - Name of the breakpointasNumber (optional) - Return the value as a String (with units) or as a number (unitless)String or Floatconsole.log('For me, a desktop has a width of ' + im.getValue('desktop'));
###im.setElement(element)
Defines the element where the JSON data is contained (default is body::after)
element - DOM elementim.setElement(document.getElementById('my-element'));
###im.setUpdateMode(mode)
Defines how the library polls the DOM element for updates. By default, it happens automatically when any query function is executed. The user can decide to take control of when the updates actually happen, by setting the update mode to 'manual' and calling im.update() to update.
Note that when this function is called for the first time it automatically runs an update.
mode - Update mode. auto (default) or manualim.setUpdateMode('manual');
###im.update()
Updates the information about the state of the breakpoints by querying the DOM and parsing the JSON object. You don't need to use this function unless you set the update mode to manual (see above).
window.addEventListener('resize', im.update);
FAQs
An include-media plugin for exporting breakpoints from Sass to JavaScript
The npm package include-media-export receives a total of 329 weekly downloads. As such, include-media-export popularity was classified as not popular.
We found that include-media-export demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Research
A malicious npm package disguised as a WhatsApp client is exploiting authentication flows with a remote kill switch to exfiltrate data and destroy files.
Security News
PyPI now supports digital attestations, enhancing security and trust by allowing package maintainers to verify the authenticity of Python packages.
Security News
GitHub removed 27 malicious pull requests attempting to inject harmful code across multiple open source repositories, in another round of low-effort attacks.