postcss-help-media-queries
v1.0.0
Published
lets you see some informations about the active breakpoint (media query), screen density and orientation directly inside the page
Downloads
18
Maintainers
Readme
PostCSS Help Media Queries
PostCSS Help Media Queries lets you see information about the active breakpoint (media query), screen density and orientation displayed in a tooltip. All generated by CSS.
Add the following at-rule at the top of your CSS to include the help-media-queries tooltip.
@help-media-queries;
Usage
Add PostCSS Help Media Queries to your project:
npm install postcss-help-media-queries --save-dev
Use PostCSS Help Media Queries to process your CSS:
const postcssHelpMediaQueries = require('postcss-help-media-queries');
postcssHelpMediaQueries.process(YOUR_CSS /*, processOptions, pluginOptions */);
Or use it as a PostCSS plugin:
const postcss = require('postcss');
const postcssHelpMediaQueries = require('postcss-help-media-queries');
postcss([
postcssHelpMediaQueries(/* pluginOptions */)
]).process(YOUR_CSS /*, processOptions */);
PostCSS Help Media Queries runs in all Node environments, with special instructions for:
| Node | PostCSS CLI | Webpack | Create React App | Gulp | Grunt | | --- | --- | --- | --- | --- | --- |
Options
postcssHelpMediaQueries({
breakpoints: {
extraSmall: '30em',
small: '48em',
medium: '60em',
large: '80em',
extraLarge: '100em'
}
})