Browse Source

change readme according to evrone guidelines

add-media-landscape
Ivan Bunin 7 years ago
parent
commit
695def11d5
  1. 5
      CHANGELOG.md
  2. 74
      CODE-OF-CONDUCT.md
  3. 25
      CONTRIBUTING.md
  4. 4
      LICENSE
  5. 119
      README.md

5
CHANGELOG.md

@ -0,0 +1,5 @@
# Changelog
All notable changes to this project will be documented in this file.
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).

74
CODE-OF-CONDUCT.md

@ -0,0 +1,74 @@
## Code of Conduct
### Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age, body
size, disability, ethnicity, gender identity and expression, level of experience,
nationality, personal appearance, race, religion, or sexual identity and
orientation.
### Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
### Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
### Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project e-mail
address, posting via an official social media account, or acting as an appointed
representative at an online or offline event. Representation of a project may be
further defined and clarified by project maintainers.
### Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at codeofconduct@evrone.com. All
complaints will be reviewed and investigated and will result in a response that
is deemed necessary and appropriate to the circumstances. The project team is
obligated to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
### Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
available at [http://contributor-covenant.org/version/1/4][version]
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/

25
CONTRIBUTING.md

@ -0,0 +1,25 @@
# Contributing Guidelines
Thanks for taking the time to contribute!
The following is a set of guidelines for contributing to this project. These are just guidelines, not rules, so use your best judgement and feel free to propose changes to this document in a pull request.
## Reporting issues
Ensure the bug was not already reported by searching on GitHub under issues. If you're unable to find an open issue addressing the bug, open a new issue.
Please pay attention to the following points while opening an issue:
* How to reproduce the issue, step-by-step.
* The expected behavior (or what is wrong).
* Screenshots for GUI issues.
* The application version.
* The operating system.
## Pull Requests
Pull Requests are always welcome.
1. When you edit the code, please check the formatting of your code before you `git commit`.
2. Ensure the PR description clearly describes the problem and solution. It should include:
* The operating system on which you tested.
* The relevant issue number, if applicable.

4
LICENSE

@ -1,6 +1,6 @@
The MIT License (MIT)
MIT License
Copyright (c) 2016 Dmitry Karpunin <koderfunk@gmail.com>
Copyright (c) [year||from_year-to_year] [author's fullname]
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal

119
README.md

@ -1,28 +1,20 @@
# postcss-px-to-viewport [![NPM version](https://badge.fury.io/js/postcss-px-to-viewport.svg)](http://badge.fury.io/js/postcss-px-to-viewport)
# postcss-px-to-viewport
[![NPM version](https://badge.fury.io/js/postcss-px-to-viewport.svg)](http://badge.fury.io/js/postcss-px-to-viewport)
A plugin for [PostCSS](https://github.com/postcss/postcss) that generates viewport units (vw, vh, vmin, vmax) from pixel units.
Feel free to start watching and ⭐ project in order not miss the release or updates.
<a href="https://evrone.com/?utm_source=postcss-px-to-viewport">
<img src="https://user-images.githubusercontent.com/417688/34437029-dbfe4ee6-ecab-11e7-9d80-2b274b4149b3.png"
alt="Sponsored by Evrone" width="231">
</a>
## Install
```
$ npm install postcss-px-to-viewport --save-dev
```
## Usage
## Demo
If your project involves a fixed width, this script will help to convert pixels into viewport units.
### Input/Output
### Input
```css
// input
.class {
margin: -10px .5vh;
padding: 5vmin 9.5px 1px;
@ -45,9 +37,10 @@ If your project involves a fixed width, this script will help to convert pixels
line-height: 22px;
}
}
```
// output
### Output
```css
.class {
margin: -3.125vw .5vh;
padding: 5vmin 2.96875vw 1px;
@ -64,58 +57,49 @@ If your project involves a fixed width, this script will help to convert pixels
line-height: 9.375vw;
}
@media (min-width: 234.375vw) {
@media (min-width: 750px) {
.class3 {
font-size: 5vw;
line-height: 6.875vw;
font-size: 16px;
line-height: 22px;
}
}
```
### Example
## Getting Started
```js
'use strict';
var fs = require('fs');
var postcss = require('postcss');
var pxToViewport = require('..');
var css = fs.readFileSync('main.css', 'utf8');
var options = {
replace: false
};
var processedCss = postcss(pxToViewport(options)).process(css).css;
fs.writeFile('main-viewport.css', processedCss, function (err) {
if (err) {
throw err;
}
console.log('File with viewport units written.');
});
### Installation
Add via npm
```
$ npm install postcss-px-to-viewport --save-dev
```
or yarn
```
$ yarn add postcss-px-to-viewport
```
### Options
### Usage
Default:
Default Options:
```js
{
unitToConvert: 'px',
viewportWidth: 320,
viewportHeight: 568, // not now used; TODO: need for different units and math for different properties
unitPrecision: 5,
propList: ['*'],
viewportUnit: 'vw',
fontViewportUnit: 'vw', // vmin is more suitable.
fontViewportUnit: 'vw',
selectorBlackList: [],
minPixelValue: 1,
mediaQuery: false,
replace: true,
exclude: [] // ignore some files
exclude: [],
landscape: false,
landscapeUnit: 'vw',
landscapeWidth: 568
}
```
- `unitToConvert` (String) unit to convert, by default, it is px.
- `viewportWidth` (Number) The width of the viewport.
- `viewportHeight` (Number) The height of the viewport.
- `unitPrecision` (Number) The decimal numbers to allow the vw units to grow to.
- `propList` (Array) The properties that can change from px to vw.
- Values need to be exact matches.
@ -136,9 +120,13 @@ Default:
- `exclude` (Array or Regexp) Ignore some files like 'node_modules'
- If value is regexp, will ignore the matches files.
- If value is array, the elements of the array are regexp.
- `landscape` (Boolean) Adds `@media (orientation: landscape)` with values converted via `landscapeWidth`.
- `landscapeUnit` (String) Expected unit for `landscape` option
- `landscapeWidth` (Number) Viewport width for landscape orientation.
### Use with gulp-postcss
add to your gulp config:
#### Use with gulp-postcss
add to your `gulpfile.js`:
```js
var gulp = require('gulp');
var postcss = require('gulp-postcss');
@ -158,8 +146,10 @@ gulp.task('css', function () {
.pipe(gulp.dest('build/css'));
});
```
### Use with Postcss configuration file
add to postcss.config.js
#### Use with PostCss configuration file
add to your `postcss.config.js`
```js
module.exports = {
plugins: {
@ -170,3 +160,40 @@ module.exports = {
}
}
```
## Running the tests
In order to run tests, you need to install `jasmine-node` globally:
```
$ npm install jasmine-node -g
```
Then run the tests via npm script:
```
$ npm run test
```
## Contributing
Please read [Code of Conduct](CODE-OF-CONDUCT.md) and [Contributing Guidelines](CONTRIBUTING.md) for submitting pull requests to us.
## Versioning
We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/evrone/postcss-px-to-viewport/tags).
## Changelog
The changelog is [here](CHANGELOG.md).
## Authors
* [Dmitry Karpunin](https://github.com/KODerFunk) - *Initial work*
See also the list of [contributors](https://github.com/evrone/postcss-px-to-viewport/contributors) who participated in this project.
## License
This project is licensed under the [MIT License](LICENSE).
## Acknowledgments
* Hat tip to https://github.com/cuth/postcss-pxtorem/ for inspiring us for this project.
Loading…
Cancel
Save