{% set title = 'Using Rework' %} {% set isdocs = true %} {% extends '../../layouts/default.html' %} {% block content %} {% include '../../partials/_docs-nav.html' %}
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 basswork
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 basswork along with any Basscss modules you’d like to use.
Pass a source CSS string to Basswork, which will return a compiled CSS string.
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 alter Basscss’s default values.
To use variables as property values, follow this syntax:
To set an inline fallback value, place it after the variable name separated by a comma.
See Rework Vars for more details on usage.
To adjust breakpoints for the default media queries, set custom media queries after the imports. See Rework Custom Media for more details on usage.