You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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.
6
+
7
+
## Reporting issues
8
+
9
+
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.
10
+
11
+
Please pay attention to the following points while opening an issue:
12
+
* How to reproduce the issue, step-by-step.
13
+
* The expected behavior (or what is wrong).
14
+
* Screenshots for GUI issues.
15
+
* The application version.
16
+
* The operating system.
17
+
18
+
## Pull Requests
19
+
20
+
Pull Requests are always welcome.
21
+
22
+
1. When you edit the code, please check the formatting of your code before you `git commit`.
23
+
2. Ensure the PR description clearly describes the problem and solution. It should include:
If your project involves a fixed width, this script will help to convert pixels into viewport units.
20
14
21
-
### Input/Output
15
+
### Input
22
16
23
17
```css
24
-
// input
25
-
26
18
.class {
27
19
margin: -10px.5vh;
28
20
padding: 5vmin9.5px1px;
@@ -45,9 +37,10 @@ If your project involves a fixed width, this script will help to convert pixels
45
37
line-height: 22px;
46
38
}
47
39
}
40
+
```
48
41
49
-
// output
50
-
42
+
### Output
43
+
```css
51
44
.class {
52
45
margin: -3.125vw.5vh;
53
46
padding: 5vmin2.96875vw1px;
@@ -64,58 +57,49 @@ If your project involves a fixed width, this script will help to convert pixels
64
57
line-height: 9.375vw;
65
58
}
66
59
67
-
@media (min-width: 234.375vw) {
60
+
@media (min-width: 750px) {
68
61
.class3 {
69
-
font-size: 5vw;
70
-
line-height: 6.875vw;
62
+
font-size: 16px;
63
+
line-height: 22px;
71
64
}
72
65
}
73
66
```
74
67
75
-
### Example
68
+
##Getting Started
76
69
77
-
```js
78
-
'use strict';
79
-
80
-
var fs =require('fs');
81
-
var postcss =require('postcss');
82
-
var pxToViewport =require('..');
83
-
var css =fs.readFileSync('main.css', 'utf8');
84
-
var options = {
85
-
replace:false
86
-
};
87
-
var processedCss =postcss(pxToViewport(options)).process(css).css;
88
-
89
-
fs.writeFile('main-viewport.css', processedCss, function (err) {
90
-
if (err) {
91
-
throw err;
92
-
}
93
-
console.log('File with viewport units written.');
94
-
});
70
+
### Installation
71
+
Add via npm
72
+
```
73
+
$ npm install postcss-px-to-viewport --save-dev
74
+
```
75
+
or yarn
76
+
```
77
+
$ yarn add postcss-px-to-viewport
95
78
```
96
79
97
-
### Options
80
+
### Usage
98
81
99
-
Default:
82
+
Default Options:
100
83
```js
101
84
{
102
85
unitToConvert:'px',
103
86
viewportWidth:320,
104
-
viewportHeight:568, // not now used; TODO: need for different units and math for different properties
105
87
unitPrecision:5,
106
88
propList: ['*'],
107
89
viewportUnit:'vw',
108
-
fontViewportUnit:'vw',// vmin is more suitable.
90
+
fontViewportUnit:'vw',
109
91
selectorBlackList: [],
110
92
minPixelValue:1,
111
93
mediaQuery:false,
112
94
replace:true,
113
-
exclude: [] // ignore some files
95
+
exclude: [],
96
+
landscape:false,
97
+
landscapeUnit:'vw',
98
+
landscapeWidth:568
114
99
}
115
100
```
116
101
-`unitToConvert` (String) unit to convert, by default, it is px.
117
102
-`viewportWidth` (Number) The width of the viewport.
118
-
-`viewportHeight` (Number) The height of the viewport.
119
103
-`unitPrecision` (Number) The decimal numbers to allow the vw units to grow to.
120
104
-`propList` (Array) The properties that can change from px to vw.
121
105
- Values need to be exact matches.
@@ -136,9 +120,13 @@ Default:
136
120
-`exclude` (Array or Regexp) Ignore some files like 'node_modules'
137
121
- If value is regexp, will ignore the matches files.
138
122
- If value is array, the elements of the array are regexp.
123
+
-`landscape` (Boolean) Adds `@media (orientation: landscape)` with values converted via `landscapeWidth`.
124
+
-`landscapeUnit` (String) Expected unit for `landscape` option
125
+
-`landscapeWidth` (Number) Viewport width for landscape orientation.
139
126
140
-
### Use with gulp-postcss
141
-
add to your gulp config:
127
+
#### Use with gulp-postcss
128
+
129
+
add to your `gulpfile.js`:
142
130
```js
143
131
var gulp =require('gulp');
144
132
var postcss =require('gulp-postcss');
@@ -158,8 +146,10 @@ gulp.task('css', function () {
158
146
.pipe(gulp.dest('build/css'));
159
147
});
160
148
```
161
-
### Use with Postcss configuration file
162
-
add to postcss.config.js
149
+
150
+
#### Use with PostCss configuration file
151
+
152
+
add to your `postcss.config.js`
163
153
```js
164
154
module.exports= {
165
155
plugins: {
@@ -170,3 +160,40 @@ module.exports = {
170
160
}
171
161
}
172
162
```
163
+
164
+
## Running the tests
165
+
166
+
In order to run tests, you need to install `jasmine-node` globally:
167
+
```
168
+
$ npm install jasmine-node -g
169
+
```
170
+
Then run the tests via npm script:
171
+
```
172
+
$ npm run test
173
+
```
174
+
175
+
## Contributing
176
+
177
+
Please read [Code of Conduct](CODE-OF-CONDUCT.md) and [Contributing Guidelines](CONTRIBUTING.md) for submitting pull requests to us.
178
+
179
+
## Versioning
180
+
181
+
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).
0 commit comments