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
8
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'
}
})