https://github.com/vitalk/classy-media-queries
A few variables to simplify media query usage
https://github.com/vitalk/classy-media-queries
Last synced: 2 months ago
JSON representation
A few variables to simplify media query usage
- Host: GitHub
- URL: https://github.com/vitalk/classy-media-queries
- Owner: vitalk
- Created: 2014-12-08T16:42:34.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2015-06-03T19:41:25.000Z (about 11 years ago)
- Last Synced: 2026-02-27T08:29:34.616Z (5 months ago)
- Language: CSS
- Homepage:
- Size: 129 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Classy media queries
Defines a few variables to simplify usage of media queries.
```less
.main {
color: orangered;
@media @mobile and @retina {
color: red;
}
}
```
## Installation
The recommended installation method is a [bower](http://bower.io).
```shell
bower install --save classy-media-queries
```
## Usage
Breakpoint | Value
---|---
`@classy-palm-to` | `30em`
`@classy-tablet-from` | `30.0625em`
`@classy-tablet-to` | `48em`
`@classy-laptop-from` | `48.0625em`
`@classy-laptop-to` | `67.5em`
`@classy-tablet-from` | `67.5625em`
Media query | Description
---|---
`@classy-portrait` | Portrait orientation.
`@classy-landspace` | Landspace orientation.
`@classy-retina` | Retina support.
`@classy-mobile` | Only mobile screen.
`@classy-tablet` | Only tablet screen.
`@classy-tablet-and-up` | Tablets and above.
`@classy-laptop` | Only laptop.
`@classy-laptop-and-up` | Laptop screen and above.
`@classy-desktop` | Only desktop screen.
## License
Licensed under the [MIT license](http://mit-license.org/vitalk).