KARMA CSS

Installation

The package can be installed through npm:

npm install karma-css --save

and bower:

bower install karma-css

or by cloning the repo:

git clone https://github.com/AccentDesign/karma-css.git

Starter Project

The quickest way to get started is to download the starter project from Github.

Then simply run the following:

npm install
gulp watch

Project Structure

Assuming you have installed through npm or have downloaded the starter project you can use the following structure as a guide.

dist/..
node_modules/..
scss/module/_mystyle.scss    // your own scss modules
scss/_variables.scss         // variables you want to overwrite in karma-css
scss/karma.scss              // the base scss file to build
gulpfile.js

Your karma.scss file might look like

/* variables
* start with a copy of the current varables file:
* https://github.com/AccentDesign/karma-css/blob/master/scss/_variables.scss
*/
@import "variables";

/* karma-css core */
@import "karma-css/scss/variables";
@import "karma-css/scss/import";

/* add your custom modules here */
@import "module/mystyle";

/* karma-css utilities */
@import "karma-css/scss/utilities";

Example gulpfile:

// this is similar to the gulfile in the project
var $ = require('gulp-load-plugins')();
var gulp = require('gulp');
var runSequence = require('run-sequence');

// postcss
var autoprefixer = require('autoprefixer');
var discardempty = require('postcss-discard-empty');
var discardcomments = require('postcss-discard-comments');
var mergerules = require('postcss-merge-rules');

var config = {
    publicDir: 'dist',
    scssDir: 'scss',
    autoprefixer: {
        browsers: [
            'Chrome >= 35',
            'Firefox >= 38',
            'Edge >= 12',
            'Explorer >= 10',
            'iOS >= 8',
            'Safari >= 8',
            'Android 2.3',
            'Android >= 4',
            'Opera >= 12'
        ],
        "cascade": false
    },
    sass: {
        "includePaths": [
            'node_modules'
        ]
    },
    csso: {}
};

gulp.task('scss', function() {
    return gulp.src(config.scssDir + '/karma.scss')
    .pipe($.sourcemaps.init())
    .pipe($.sass(config.sass))
    .pipe($.postcss([
        discardcomments(),
        discardempty(),
        mergerules(),
        autoprefixer(config.autoprefixer)
    ]))
    .pipe($.sourcemaps.write('.'))
    .pipe(gulp.dest(config.publicDir));
});

gulp.task('min', function () {
  return gulp.src(config.publicDir + '/karma.css')
    .pipe($.csso(config.csso))
    .pipe($.rename({suffix: '.min'}))
    .pipe(gulp.dest(config.publicDir))
    .pipe($.livereload());
});

gulp.task('default', function(cb) {
    runSequence('scss', 'min', cb);
});

gulp.task('watch', ['default'], function (){
    $.livereload.listen();
    gulp.watch(
        [
            config.scssDir + '/*.scss',
            config.scssDir + '/**/*.scss'
        ],
        ['default']);
});