美文网首页
css插件学习--lostgrid

css插件学习--lostgrid

作者: 生活也许是一首诗 | 来源:发表于2018-03-15 11:47 被阅读0次

    安装

    以gulp为例

    var gulp = require('gulp'),
        postcss = require('gulp-postcss'),
        sourcemaps = require('gulp-sourcemaps'),
        autoprefixer = require('autoprefixer'),
        lost = require('lost');
    
    var paths = {
      cssSource: 'src/css/',
      cssDestination: 'dist/css/'
    };
    
    gulp.task('styles', function() {
      return gulp.src(paths.cssSource + '**/*.css')
        .pipe(sourcemaps.init())
        .pipe(postcss([
          lost(),
          autoprefixer()
        ]))
        .pipe(sourcemaps.write('./'))
        .pipe(gulp.dest(paths.cssDestination));
    });
    
    gulp.watch(paths.cssSource + '**/*.css', ['styles']);
    
    gulp.task('default', ['styles']);
    

    API

    lost-column: 分列 
        【参数】:比例 [cycle] [间距];
        
        lost-center: 水平居中
        【参数】:width [padding] [flex];
        
        lost-align: 对齐方式
        【参数】:reset | horizontal | vertical | 
                        top-left | top-center | top | top-right | 
                        middle-left | left | 
                        middle-center | center | 
                        middle-right | right | 
                        bottom-left | bottom-center | bottom | bottom-right
                        
        lost-flex-container: flex布局方向
        【参数】:row | column;
        
        lost-masonry-wrap: 产生margin负值,抵消外层
        【参数】:flex 间距;
        
        lost-masonry-column: 和lost-masonry-wrap一起使用
        【参数】:比例 [间距] [flex];
    

    参考文档

    lostgrid官方文档

    相关文章

      网友评论

          本文标题:css插件学习--lostgrid

          本文链接:https://www.haomeiwen.com/subject/dczcqftx.html