Basscss / Docs

Custom Builds

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 basswork

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

Building with Basswork

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

Using Basswork in Node

Install basswork along with any Basscss modules you’d like to use.

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

Pass a source CSS string to Basswork, which will return a compiled CSS string.

var basswork = require('basswork');
var fs = require('fs');

var src = fs.readFileSync('./src/base.css', 'utf8');
var css = basswork(src);
fs.writeFileSync('./css/base.css', css);

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

Rework in Practice

Imports

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";

Variables

Set CSS variables after the imports to alter Basscss’s default values.

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

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

To use variables as property values, follow this syntax:

.button-red {
  color: white;
  background-color: var(--red);
}

To set an inline fallback value, place it after the variable name separated by a comma.

.button-red {
  color: white;
  background-color: var(--red, #f00);
}

See Rework Vars for more details on usage.

Custom Media Queries

To adjust breakpoints for the default 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);