https://github.com/raulghm/cata-breakpoints
cata-breakpoints
https://github.com/raulghm/cata-breakpoints
breakpoints cata css mediaqueries
Last synced: about 2 months ago
JSON representation
cata-breakpoints
- Host: GitHub
- URL: https://github.com/raulghm/cata-breakpoints
- Owner: raulghm
- License: mit
- Created: 2017-04-17T14:19:49.000Z (about 9 years ago)
- Default Branch: master
- Last Pushed: 2018-05-14T04:27:25.000Z (about 8 years ago)
- Last Synced: 2025-01-21T17:50:28.539Z (over 1 year ago)
- Topics: breakpoints, cata, css, mediaqueries
- Language: CSS
- Homepage: https://raulghm.github.io/cata-breakpoints/test
- Size: 7.81 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# Cata breakpoints
[](https://travis-ci.org/raulghm/cata-breakpoints)
## Custom media queries
These are predefined values and recommendations based on this article
http://bradfrost.com/blog/post/7-habits-of-highly-effective-media-queries
I prefer em instead of px, and I recommend applying a subset of values
depending on the type of project and personal preferences.
```css
@custom-media --sm-viewport (min-width: 24em);
@custom-media --md-viewport (min-width: 46.8em);
@custom-media --lg-viewport (min-width: 50em);
@custom-media --xl-viewport (min-width: 60em);
```
## How use
```css
@media (--sm-viewport) {
div {
width: 200px;
}
}
```
## Installation
## NPM
```
npm install cata-breakpoints
```
## Yarn
```
yarn add cata-breakpoints
```
## Download
[Download](https://github.com/raulghm/cata-breakpoints/releases)
## Testing
Install [Node](http://nodejs.org) (comes with npm) and run:
```
npm install
```
Or install [Yarn](https://yarnpkg.com/en/docs/install) and run:
```
yarn
```
To generate a build:
```
npm run build
```
To lint code with [postcss-bem-linter](https://github.com/postcss/postcss-bem-linter) and [stylelint](http://stylelint.io/)
```
npm run lint
```
To generate the testing build.
```
npm run build-test
```
Basic visual tests are in `test/index.html`.
## Browser support
* Google Chrome
* Firefox
* Safari
* Opera
* Internet Explorer 9+