├── .gitignore ├── LICENSE ├── README.md ├── index.css ├── package.json └── viewports.png /.gitignore: -------------------------------------------------------------------------------- 1 | # tmp files 2 | lib-cov 3 | *.seed 4 | *.log 5 | *.csv 6 | *.dat 7 | *.out 8 | *.pid 9 | *.gz 10 | 11 | # tmp folders 12 | pids/ 13 | logs/ 14 | results/ 15 | coverage/ 16 | 17 | # node.js 18 | node_modules/ 19 | npm-debug.log 20 | 21 | # osx 22 | .DS_Store 23 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2015 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # ergonomic-breakpoint 2 | [![NPM version][npm-image]][npm-url] 3 | [![Downloads][downloads-image]][downloads-url] 4 | 5 | Ergonomic CSS media queries. Uses 6 | [`CSS custom media queries`](http://dev.w3.org/csswg/mediaqueries/#custom-mq). 7 | 8 | [![lwb-ergonomic viewports](viewports.png)](https://twitter.com/lukew/status/273453112902172672) 9 | 10 | ## Installation 11 | ```bash 12 | $ npm install ergonomic-breakpoint 13 | ``` 14 | 15 | ## Usage 16 | With [cssnext](https://github.com/cssnext/cssnext) or 17 | [sheetify](https://github.com/sheetify/sheetify) installed: 18 | ```css 19 | @media (--wrist) { 20 | /* styles for wrist viewport */ 21 | } 22 | 23 | @media (--lap) and (--desk) { 24 | /* styles for lap and desk viewports */ 25 | } 26 | 27 | @media (--not-wrist) and (--not-palm) { 28 | /* styles for lap and larger viewports */ 29 | } 30 | ``` 31 | 32 | ## API 33 | ### @media (--wrist) 34 | Wrist viewport. `<320px`. 35 | 36 | ### @media (--palm) 37 | Palm viewport. `>=320px && <800px`. 38 | 39 | ### @media (--lap) 40 | Lap viewport. `>=800px && <1920px`. 41 | 42 | ### @media (--desk) 43 | Desk viewport. `>=1920px && <2560px`. 44 | 45 | ### @media (--wall) 46 | Wall viewport. `>=2560px`. 47 | 48 | ### @media (--not-wrist) 49 | Wrist viewport. `>=320px`. 50 | 51 | ### @media (--not-palm) 52 | Palm viewport. `<320px && >=800px`. 53 | 54 | ### @media (--not-lap) 55 | Lap viewport. `<800px && >=1920px`. 56 | 57 | ### @media (--not-desk) 58 | Desk viewport. `<1920px && >=2560px`. 59 | 60 | ### @media (--not-wall) 61 | Wall viewport. `<2560px`. 62 | 63 | ## See Also 64 | - [custom media query specificiation](http://dev.w3.org/csswg/mediaqueries/#custom-mq) 65 | - [active development on Categorizr has come to an end](http://brettjankord.com/2013/01/10/active-development-on-categorizr-has-come-to-an-end/) 66 | - [unified device static](http://static.lukew.com/unified_device_design.png) 67 | - [screensiz.es](http://screensiz.es/) 68 | - [ergonomic viewport](https://github.com/yoshuawuyts/ergonomic-viewport) - Get the current ergonomic viewport 69 | - [logic in media queries](https://css-tricks.com/logic-in-media-queries/) 70 | 71 | ## License 72 | [MIT](https://tldrlegal.com/license/mit-license) 73 | 74 | [npm-image]: https://img.shields.io/npm/v/ergonomic-breakpoint.svg?style=flat-square 75 | [npm-url]: https://npmjs.org/package/ergonomic-breakpoint 76 | [downloads-image]: http://img.shields.io/npm/dm/ergonomic-breakpoint.svg?style=flat-square 77 | [downloads-url]: https://npmjs.org/package/ergonomic-breakpoint 78 | -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | @custom-media --wrist (max-width: 319px); 2 | @custom-media --palm (min-width: 320px) and (max-width: 799px); 3 | @custom-media --lap (min-width: 800px) and (max-width: 1919px); 4 | @custom-media --desk (min-width: 1920px) and (max-width: 2559px); 5 | @custom-media --wall (min-width: 2560px); 6 | 7 | @custom-media --not-wrist (min-width: 320px); 8 | @custom-media --not-palm (max-width: 319px), (min-width: 800px); 9 | @custom-media --not-lap (max-width: 799px), (min-width: 1920px); 10 | @custom-media --not-desk (max-width: 1919px), (min-width: 2560px); 11 | @custom-media --not-wall (max-width: 2559px); 12 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ergonomic-breakpoint", 3 | "version": "1.1.1", 4 | "description": "ergonomic CSS media queries", 5 | "main": "index.css", 6 | "repository": "yoshuawuyts/ergonomic-breakpoint", 7 | "keywords": [ 8 | "media query", 9 | "css", 10 | "ergonomic", 11 | "lukew", 12 | "custom" 13 | ], 14 | "license": "MIT", 15 | "dependencies": {}, 16 | "files": [ 17 | "LICENSE", 18 | "index.css", 19 | "README.md" 20 | ], 21 | "scripts": {} 22 | } 23 | -------------------------------------------------------------------------------- /viewports.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/stackcss/ergonomic-breakpoint/dc72e0cf05f5344b1a2afa281a60a529c72473ad/viewports.png --------------------------------------------------------------------------------