https://github.com/niksy/postcss-media-query-gap

PostCSS plugin for applying gap on max-width/height media queries.
https://github.com/niksy/postcss-media-query-gap

Last synced: about 2 months ago
JSON representation

PostCSS plugin for applying gap on max-width/height media queries.

• Host: GitHub
• URL: https://github.com/niksy/postcss-media-query-gap
• Owner: niksy
• License: mit
• Created: 2015-11-15T08:57:56.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2024-05-07T08:09:51.000Z (8 months ago)
• Last Synced: 2024-10-20T09:18:24.079Z (2 months ago)
• Language: JavaScript
• Size: 18.6 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# postcss-media-query-gap

[![Build Status][ci-img]][ci]

[PostCSS][postcss] plugin for applying gap on max-width/height media queries.

Useful when you want to

[prevent double breakpoints](http://tzi.fr/css/prevent-double-breakpoint).

## Install

```sh

npm install postcss postcss-media-query-gap --save

```

## Usage

```js

import postcss from 'postcss';

import mediaQueryGap from 'postcss-media-query-gap';

postcss([

	mediaQueryGap({

		/* options */

	})

]);

```

```css

/* Before */

@media screen and (min-width: 600px) and (max-width: 739px) {

	.foo {

		color: red;

	}

}

/* After */

@media screen and (min-width: 600px) and (max-width: 738px) {

	.foo {

		color: red;

	}

}

```

## License

MIT © [Ivan Nikolić](http://ivannikolic.com)

[ci]: https://travis-ci.com/niksy/postcss-media-query-gap

[ci-img]: https://travis-ci.com/niksy/postcss-media-query-gap.svg?branch=master

[postcss]: https://github.com/postcss/postcss