Basscss / Docs

Using Rework

Basscss is built with Rework and Gulp. Rework is a preprocessor based on the CSS specification and a flexible plugin architecture. Gulp is a Node.js-based build system for front-end development.

Building with Gulp and Rework

To fully leverage Basscss's modularity and flexibility, use Rework to build your own custom stylesheets.

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.

Basswork

Basscss uses Basswork , a custom wrapper around Rework, to simplify development. Basswork is also available as a Gulp plugin.

Using Basswork in an Existing Gulp Project

Install gulp-basswork along with any Basscss modules you'd like to use.

npm install --save-dev gulp-basswork basscss-base basscss-utilities

Create a Gulp task.

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

var basswork = require('gulp-basswork');

gulp.task('basswork', function() {
  gulp.src('./src/*.css')
    .pipe(basswork())
    .pipe(gulp.dest('./css'))
    .pipe(mincss())
    .pipe(rename({ extname: '.min.css' }))
    .pipe(gulp.dest('./css'))
});

Create a source CSS file to import the Basscss modules.

@import "basscss-base";
@import "basscss-utilities";

To import custom files within the same folder, use ./ to indicate the current folder. See Rework NPM for more details on usage.

@import "basscss-base";
@import "basscss-utilities";
@import "./buttons.css";

Set CSS variables after the imports to override Basscss’s defaults. See Rework Vars for more details on usage.

@import "basscss-base";
@import "basscss-utilities";

:root {
  --font-family: Georgia, serif;
}

To adjust breakpoints for the media queries, set custom media queries after the imports. See Rework Custom Media for more details on usage.

@import "basscss-base";
@import "basscss-utilities";

@custom-media --breakpoint-sm (min-width: 32em);

Other Preprocessors

Additionally, Basscss is compatible with Suitcss Preprocessor.