https://github.com/gavinmcfarland/postcss-help-media-queries
This tool help you to easily recognize your active media query and display additional screen info
https://github.com/gavinmcfarland/postcss-help-media-queries
Last synced: about 1 year ago
JSON representation
This tool help you to easily recognize your active media query and display additional screen info
- Host: GitHub
- URL: https://github.com/gavinmcfarland/postcss-help-media-queries
- Owner: gavinmcfarland
- License: cc0-1.0
- Created: 2020-07-23T13:10:21.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T12:16:12.000Z (over 3 years ago)
- Last Synced: 2025-03-30T07:02:31.706Z (about 1 year ago)
- Language: CSS
- Size: 345 KB
- Stars: 26
- Watchers: 0
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-list - postcss-help-media-queries
README
# PostCSS Help Media Queries [
][postcss]
[![NPM Version][npm-img]][npm-url]
[![Build Status][cli-img]][cli-url]
[![Support Chat][git-img]][git-url]
[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.
```pcss
@help-media-queries;
```
## Usage
Add [PostCSS Help Media Queries] to your project:
```bash
npm install postcss-help-media-queries --save-dev
```
Use **PostCSS Help Media Queries** to process your CSS:
```js
const postcssHelpMediaQueries = require('postcss-help-media-queries');
postcssHelpMediaQueries.process(YOUR_CSS /*, processOptions, pluginOptions */);
```
Or use it as a [PostCSS] plugin:
```js
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](INSTALL.md#node) | [PostCSS CLI](INSTALL.md#postcss-cli) | [Webpack](INSTALL.md#webpack) | [Create React App](INSTALL.md#create-react-app) | [Gulp](INSTALL.md#gulp) | [Grunt](INSTALL.md#grunt) |
| --- | --- | --- | --- | --- | --- |
## Options
breakpoints object
Define the custom min-width breakpoints to watch and show inside the tooltip.
```js
postcssHelpMediaQueries({
breakpoints: {
extraSmall: '30em',
small: '48em',
medium: '60em',
large: '80em',
extraLarge: '100em',
// Other breakpoints..
}
})
```
[cli-img]: https://img.shields.io/travis/limitlessloop/postcss-help-media-queries/master.svg?style=for-the-badge
[cli-url]: https://travis-ci.org/limitlessloop/postcss-help-media-queries
[git-img]: https://img.shields.io/badge/support-chat-blue.svg?style=for-the-badge
[git-url]: https://gitter.im/postcss/postcss
[npm-img]: https://img.shields.io/npm/v/postcss-help-media-queries.svg?style=for-the-badge&colorA=CD4A4A&colorB=B03737
[npm-url]: https://www.npmjs.com/package/postcss-help-media-queries
[PostCSS]: https://github.com/postcss/postcss
[PostCSS Help Media Queries]: https://github.com/limitlessloop/postcss-help-media-queries