The gulp-css-unit from tsaowe

gulp-css-unit's Introduction

install

$ npm install --save-dev gulp-css-unit

usage

const gulp = require('gulp');
const cssunit = require('gulp-css-unit');

...

gulp.task('pxtovw',function(){
   
    gulp.src('src/css/*/*.css')
        .pipe(cssunit({
            type     :    'px-to-vw',
            width    :    750
        }))
        .pipe(gulp.dest('dist/'));
    
});


gulp.task('pxtorem',function(){
   
    gulp.src('src/css/*/*.css')
        .pipe(cssunit({
            type     :    'px-to-rem',
            rootSize :    16
        }))
        .pipe(gulp.dest('dist/'));
    
});

API

options:

type     :    enum('px-to-vw','px-to-rem')
from     :    convert X to Y unit,from is hereby X
to       :    Y
width    :    designer's screen width,like 640,750, etc.
rootSize :    <html> tag's font size

explain what kind of situations can use this current version.

PX to VW

designer give you a 750px sketch,but you want to adapt your mobile pages to all kind of screen

then you should do

1 design your page according to 750px with all unit set to px   (750px is an example)
2.1 pipe your css process with this plugin

    .pipe(cssunit({
                type     :    'px-to-vw',
              //from     :    'px',//optional set to px
              //to       :    'vw',//optional set to vw
                width    :    750
            }))
            
            

*************************************************
or 2.2 
    .pipe(cssunit({
                    type     :    'px-to-rem',
                  //from     :    'px',//optional
                  //to       :    'rem',//optional
                    rootSize :    16          //this is your html tag's font size
                }))
                
*************************************************
            
3 get a responsive page css,yeah!

CONTACT ME

please feel free to add any your unit issues to my GITHUB ISSUES I will check it!

License

MIT © tsaowe

gulp-css-unit's People

Stargazers

Watchers

Forkers

rvdvr

gulp-css-unit's Issues

Float number value

Hi!
I am using your gulp-css-unit. With config type px-to-vw, this convert values not correct. For example, 0.01px => 0.023.05vw

Exceptions

Hi!
How can I make exceptions when using gulp-css-unit, for example for @media queries?
That is, I would not want to convert px to vw in some parts of the code.

Recommend Projects