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.
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.
Basscss uses Basswork , a custom wrapper around Rework, to simplify development. Basswork is also available as a Gulp plugin.
Install gulp-basswork along with any Basscss modules you'd like to use.
Create a Gulp task.
Create a source CSS file to import the Basscss modules.
To import custom files within the same folder, use ./
to indicate the current folder.
See Rework NPM for more details on usage.
Set CSS variables after the imports to override Basscss’s defaults. See Rework Vars for more details on usage.
To adjust breakpoints for the media queries, set custom media queries after the imports. See Rework Custom Media for more details on usage.
Additionally, Basscss is compatible with Suitcss Preprocessor.