Basscss / Docs

Using Rework

Basscss is built with Rework and Gulp. If you’re new to these, follow this guide to get started.

Building with Gulp and Rework

If you don’t have it already, install Node, which includes NPM. Then, install Gulp globally:

npm install --global gulp

Clone or download Basscss, then cd into the basscss directory.

git clone https://github.com/jxnblk/basscss.git && cd basscss

Install the dependencies for Basscss.

npm install

Duplicate /src/basscss.css to use as a template, make adjustments, then run the following Gulp task from the command line to recompile. This will create uncompressed, minified, and gzipped versions of the file.

gulp rework

To better understand how this is set up, open up gulpfile.js and take a peek.

To use Rework in an existing Gulp file, follow this recipe:

var gulp = require('gulp');
var rename = require('gulp-rename');
var mincss = require('gulp-minify-css');
var autoprefixer = require('gulp-autoprefixer');
var gzip = require('gulp-gzip');

var rework = require('gulp-rework');
var rnpm = require('rework-npm');
var media = require('rework-custom-media');
var vars = require('rework-vars');
var colors = require('rework-plugin-colors');
var calc = require('rework-calc');

gulp.task('rework', function() {
  gulp.src('./src/*.css')
    .pipe(rework( rnpm(), media(), vars(), colors(), calc ))
    .pipe(autoprefixer())
    .pipe(gulp.dest('./css'))
    .pipe(mincss())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./css'))
    .pipe(gzip())
    .pipe(gulp.dest('./css'));
});