Nimble Package Maestros

    postcss-spacing

    0.2.5 • Public • Published

    PostCSS Spacing

    PostCSS plugin for simpler control of all paddings and margins in your project. The original idea of having a global padding and margin setup was created by Jens Nilsson when he created it as classes in stylus.

    This plugin uses the same idea but implements it as custom CSS properties. You basically have a shortened version of all paddings and margins properties and define what each size will correspond to.

    Its much easier to understand in code:

    First we define what each margin and padding step will correspond to:

    @spacing 1rem, 2rem, 4rem, 8rem;
    

    Then we can use it in our css:

    #main {
        pa: 1;
        mt: 3;
    }
    

    Which will create the following CSS:

    #main {
        padding: 1rem;
        margin-top: 4rem;
    }
    

    The power of having defined steps is that you have one place where you set all spacings, which makes it quite easy to change if the design changes.

    The other benefit is that media queries can be used to change all paddings and margins easily as well:

    @spacing 1rem, 2rem, 4rem, 8rem;
    
    #main {
        pa: 1;
        mt: 3;
    }
    
    @media (min-width: 100px) {
        @spacing 20px, 40px, 80px, 160px;
    }
    

    Which will create the following CSS:

    #main {
        padding: 1rem;
        margin-top: 4rem;
    }
    
    @media (min-width: 100px) {
        #main {
            padding: 20px;
            margin-top: 80px;
        }
    }
    

    Properties

    The css properties are:

    pa = padding
    pt = padding-top
    pb = padding-bottom
    pl = padding-left
    pr = padding-right
    
    ma = margin
    mt = margin-top
    mb = margin-bottom
    ml = margin-left
    mr = margin-right
    

    How to use it

    Gulp

    const gulp = require('gulp');
    const postcss = require('gulp-postcss');
    const postcssSpacing = require('postcss-spacing');
    
    gulp.task('css', () => {
        return gulp.src('./src/**/*.css')
            .pipe(postcss([
                postcssSpacing()
            ]))
            .on('error', console.error)
            .pipe(gulp.dest('./dist'));
    });
    
    gulp.task('watch', ['css'], () => {
        gulp.watch(['./src/**/*.css'], ['css']).on('error', handleError);
    });
    
    gulp.task('build', ['css'], () => {});
    

    Keywords

    none

    Install

    npm i postcss-spacing

    DownloadsWeekly Downloads

    14

    Version

    0.2.5

    License

    MIT

    Last publish

    Collaborators

    • camilo.tapia