Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stackcss/ergonomic-breakpoint
Ergonomic CSS media queries
https://github.com/stackcss/ergonomic-breakpoint
Last synced: about 1 month ago
JSON representation
Ergonomic CSS media queries
- Host: GitHub
- URL: https://github.com/stackcss/ergonomic-breakpoint
- Owner: stackcss
- License: mit
- Created: 2015-06-22T09:20:47.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-08-22T14:37:14.000Z (over 9 years ago)
- Last Synced: 2024-11-08T13:07:06.593Z (about 2 months ago)
- Language: CSS
- Homepage:
- Size: 277 KB
- Stars: 28
- Watchers: 7
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# ergonomic-breakpoint
[![NPM version][npm-image]][npm-url]
[![Downloads][downloads-image]][downloads-url]
Ergonomic CSS media queries. Uses
[`CSS custom media queries`](http://dev.w3.org/csswg/mediaqueries/#custom-mq).
[](https://twitter.com/lukew/status/273453112902172672)
## Installation
```bash
$ npm install ergonomic-breakpoint
```
## Usage
With [cssnext](https://github.com/cssnext/cssnext) or
[sheetify](https://github.com/sheetify/sheetify) installed:
```css
@media (--wrist) {
/* styles for wrist viewport */
}
@media (--lap) and (--desk) {
/* styles for lap and desk viewports */
}
@media (--not-wrist) and (--not-palm) {
/* styles for lap and larger viewports */
}
```
## API
### @media (--wrist)
Wrist viewport. `<320px`.
### @media (--palm)
Palm viewport. `>=320px && <800px`.
### @media (--lap)
Lap viewport. `>=800px && <1920px`.
### @media (--desk)
Desk viewport. `>=1920px && <2560px`.
### @media (--wall)
Wall viewport. `>=2560px`.
### @media (--not-wrist)
Wrist viewport. `>=320px`.
### @media (--not-palm)
Palm viewport. `<320px && >=800px`.
### @media (--not-lap)
Lap viewport. `<800px && >=1920px`.
### @media (--not-desk)
Desk viewport. `<1920px && >=2560px`.
### @media (--not-wall)
Wall viewport. `<2560px`.
## See Also
- [custom media query specificiation](http://dev.w3.org/csswg/mediaqueries/#custom-mq)
- [active development on Categorizr has come to an end](http://brettjankord.com/2013/01/10/active-development-on-categorizr-has-come-to-an-end/)
- [unified device static](http://static.lukew.com/unified_device_design.png)
- [screensiz.es](http://screensiz.es/)
- [ergonomic viewport](https://github.com/yoshuawuyts/ergonomic-viewport) - Get the current ergonomic viewport
- [logic in media queries](https://css-tricks.com/logic-in-media-queries/)
## License
[MIT](https://tldrlegal.com/license/mit-license)
[npm-image]: https://img.shields.io/npm/v/ergonomic-breakpoint.svg?style=flat-square
[npm-url]: https://npmjs.org/package/ergonomic-breakpoint
[downloads-image]: http://img.shields.io/npm/dm/ergonomic-breakpoint.svg?style=flat-square
[downloads-url]: https://npmjs.org/package/ergonomic-breakpoint