Installation

• Gulp
• Grunt
• Brunch
• Stylus
• JavaScript
• Webpack
• Meteor

 

Gulp

• Install NodeJS
• Install Gulp: npm install --global gulp
• Install dev dependencies: npm install --save-dev gulp gulp-postcss gulp-sourcemaps autoprefixer lost
• Create a gulpfile.js with the following code:

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']);

• Run gulp

This will watch your src/css/ directory for any changes to CSS files and then process them with Autoprefixer and Lost Grid (which will convert Lost Grid rules into vanilla CSS code), create sourcemaps, and output the processed CSS and sourcemaps to dist/css/.

 

Grunt

• Install NodeJS
• Install Grunt: npm install --global grunt-cli
• Install dev dependencies: npm install --save-dev grunt grunt-postcss grunt-autoprefixer grunt-contrib-watch lost
• Create a Gruntfile.js with the following code:

module.exports = function(grunt) {

  grunt.initConfig({

    postcss: {
      options: {
        map: true,
        processors: [
          require('lost')
        ]
      },
      dist: {
        src: 'src/css/style.css',
        dest: 'dist/css/style.css'
      }
    },

    autoprefixer: {
      single_file: {
        src: 'dist/css/style.css',
        dest: 'dist/css/style.css'
      }
    },

    watch: {
      files: ['src/css/style.css'],
      tasks: ['postcss', 'autoprefixer']
    }

  });

  grunt.loadNpmTasks('grunt-postcss');
  grunt.loadNpmTasks('grunt-autoprefixer');
  grunt.loadNpmTasks('grunt-contrib-watch');

  grunt.registerTask('default', ['watch']);

};

• Run grunt

This will watch your src/css/style.css file for any changes and then process it with Autoprefixer and Lost Grid (which will convert Lost Grid rules into vanilla CSS code), and output the processed CSS to dist/css/style.css.

 

Brunch

• Install NodeJS
• Install Brunch npm install -g brunch
• Create a new Brunch project brunch new https://github.com/brunch/dead-simple
• Install PostCSS npm install --save postcss-brunch
• Install Autoprefixer npm install --save autoprefixer
• Install Lost npm install --save lost
• Update brunch-config.coffee

exports.config =
  # See http://brunch.io/#documentation for docs.
  files:
    javascripts:
      joinTo: 'app.js'
    stylesheets:
      joinTo: 'app.css'
    templates:
      joinTo: 'app.js'
  plugins:
    postcss:
      processors: [
        require('autoprefixer')(),
        require('lost')
      ]

• Run brunch watch

This will watch your app/style.css file for any changes and then process it with Autoprefixer and Lost Grid (which will convert Lost Grid rules into vanilla CSS code), and output the processed CSS to public/app.css.

 

Stylus

To use Lost with the Stylus preprocessor, use PostStylus and implement poststylus('lost') as a regular Stylus plugin:

stylus(css).use(poststylus('lost'))

See the PostStylus Docs for more examples (Gulp, Grunt, CLI, etc.).

 

JavaScript

To use Lost directly with node.js

var postcss = require('postcss');
var lost = require('lost');

postcss([ lost ]).process(css).then(function (result) {
    result.warnings().forEach(function (warn) {
        console.warn(warn.toString());
    });
    console.log(result.css);
});

To pass options through to Lost:

var lost_options = {"gutter": "30px", "flexbox": "no-flex", "cycle": "auto"};

postcss([ lost(lost_options) ]).process(css).then(function (result) {
    result.warnings().forEach(function (warn) {
        console.warn(warn.toString());
    });
    console.log(result.css);
});

 

Webpack

• Install Lost npm install --save lost

To use Lost within your webpack config (assuming you have postcss-loader installed & configured) :

 postcss: [
    require('lost')
  ]

 

Meteor

• Install Lost: npm install --save-dev lost
• If you don't have it install juliancwirko:postcss package: meteor add juliancwirko:postcss
• Remove Meteor standard-minifier-css package: meteor remove standard-minifier-css

Configure your package.json file (example):

{
  "name": "Demo Lost app",
  "version": "1.0.0",
  "description": "",
  "author": "",
  "devDependencies": {
    "autoprefixer": "^6.3.5",
    "postcss-easy-import": "^1.0.1",
    "lost": "^6.7.2"
  },
  "postcss": {
    "plugins": {
      "postcss-easy-import": {},
      "lost": {},
      "autoprefixer": {"browsers": ["last 2 versions"]}
    }
  }
}

• restart Meteor app