Canvas Docs

SCSS & Gulp.js

Canvas ships with a full SCSS source and a Gulp.js build pipeline so you can customize the styles cleanly and compile production-ready assets. Writing your styles in SCSS keeps them organized and maintainable, while Gulp automates the repetitive tasks: compiling SCSS to CSS, adding vendor prefixes, generating RTL stylesheets, bundling and minifying JavaScript, and optimizing images.

You only need the build tools if you want to compile from source. If you are editing the static HTML files directly, you can skip Gulp entirely and just edit style.css or add your overrides to css/custom.css.

How to Use

  1. 1

    Editing the SCSS

    The master file is style.scss in the root of the HTML folder. It imports all of the partials from the sass/ folder (for example sass/_header.scss, sass/_typography.scss, sass/shortcodes/).

    Customize colors, fonts, and spacing from the two variable files:

    • sass/_variables.scss - Canvas variables (brand colors, fonts, etc.)
    • sass/bootstrap/_variables.scss - Bootstrap variables

    Add your own rules in a new partial or in sass/_extras.scss, then recompile so the changes land in style.css.

  2. 2

    Installing the build tools

    Compiling from source uses Node.js and Gulp. Canvas 8 requires Node.js 20.19.0 or newer (check with node -v).

    Open a terminal (VS Code's built-in terminal works well), cd into your project folder, and install the dependencies listed in package.json:

    cd /path/to/canvas/HTML
npm install

    This installs Gulp and all the build plugins locally. You do not need to install Gulp globally; run tasks with npx gulp <task> (or add node_modules/.bin to your PATH).

  3. 3

    Running the Gulp tasks

    The tasks defined in gulpfile.js are:

    • npx gulp watch - Starts a BrowserSync live-reload server, watches your .scss, .html, and js/ files, and recompiles style.scss to style.css (plus style-rtl.css) on every save. Use this while developing.
    • npx gulp scsscompile - Compiles style.scss to style.css and generates the RTL stylesheet style-rtl.css once.
    • npx gulp rtl - Generates style-rtl.css from the current style.css.
    • npx gulp buildjs - Concatenates and minifies the plugins and functions into the bundles under dist/js.
    • npx gulp jsminify - Minifies the JavaScript in js/ to dist/js.
    • npx gulp cssminify - Minifies every CSS file to the dist/ folder.
    • npx gulp htmlminify - Minifies the HTML pages into dist/.
    • npx gulp imageminify - Compresses all images and writes the optimized copies to dist/.
    • npx gulp minify - Runs both cssminify and jsminify.
    • npx gulp demosrtl - Builds RTL versions of the demo stylesheets into dist/demos.
  4. 4

    Finalizing for production

    For a production upload, run the minify tasks to generate optimized assets in the dist/ folder, then point your pages at those minified files. The dist/ folder mirrors the source structure (dist/js, dist/demos, minified CSS), so you can upload the optimized versions in place of the development files.

Was this page helpful?