Neat Paraskavedekatriaphobia's Meaning

    postcss-font-vsize

    1.0.3 • Public • Published

    A PostCSS plugin to add viewport relative font size with minimum and maximum values.

    Installation

    npm install postcss-font-vsize

    Example

    body {
        // font-vsize: {viewport-size}{min-size: default 1rem}{max-size: optional}{fallback: optional}
        font-vsize: 5vw, 14px, 32px, 16px;
    }

    will produce

    body {
        font-size: 16px; // fallback
        font-size: 5vw;
    }
    @media (max-width: 700px) {
        body { font-size: 14px }
    }
    @media (min-width: 1650px) {
        body { font-size: 32px }
    }

    Usage

    Using Gulp.

    var gulp            = require('gulp'),
        postcss         = require('gulp-postcss'),
        fontVsize       = require('postcss-font-vsize');
     
    gulp.task('css', function() {
        gulp.src('path/to/dev/css').
            .pipe(postcss({
                // use it after nesting plugins
                fontVsize
            }))
            .pipe(gulp.dest('path/to/build/css'));
    });
     
    // rest of the gulp file

    Keywords

    none

    Install

    npm i postcss-font-vsize

    DownloadsWeekly Downloads

    19

    Version

    1.0.3

    License

    none

    Last publish

    Collaborators

    • arpadhegedus