Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ugogo/gulp-rem-to-px-cleanup
https://github.com/ugogo/gulp-rem-to-px-cleanup
Last synced: about 1 month ago
JSON representation
- Host: GitHub
- URL: https://github.com/ugogo/gulp-rem-to-px-cleanup
- Owner: ugogo
- Created: 2015-05-22T09:24:43.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-07-31T07:48:34.000Z (over 9 years ago)
- Last Synced: 2024-09-29T07:01:34.747Z (about 2 months ago)
- Language: JavaScript
- Size: 137 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# rem-to-px-cleanup for Gulp
## Example
#### Gulpfile.js
```js
var gulp = require('gulp');
var remToPx = require('../index.js');
gulp.task('default', function () {
gulp.src('app.css')
.pipe(remToPx({
baseFontSize: 14
}))
.pipe(gulp.dest('./'))
});
```
#### Input (app.css)
```css
.Component {
width: 40rem;
height: 20px;
margin: 0 auto;
}
.Component-child {
padding: 0 2rem;
background-color: blue;
}
.OtherComponent {
display: inline-block;
width: 50%;
margin: 0 auto;
}
@media screen and (max-width: 30rem) {
.Component {
width: 80%;
padding: 1rem;
}
.Component-child {
width: 100%;
padding: 0;
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
width: 1rem;
}
100% {
transform: rotate(360deg);
width: 2rem;
}
}
```
#### Output
```css
.Component {
width: 560px;
}
.Component-child {
padding: 0 28px;
}
@media screen and (max-width: 420px) {
.Component {
padding: 14px;
}
}
@keyframes spin {
0% {
width: 14px;
}
100% {
width: 28px;
}
}
```
## Options
```js
{
baseFontSize: 16 // number
}
```