Charming Pro Documentation

Custom build

Charming Pro comes with all SCSS source files as well as a Gulpfile, which allows you to build your own custom version of Charming Pro.

Requirements

There are a few requirements to build Charming Pro using the included gulpfile.js:

  • node and npm are present

Customize and build Charming

You can customize any variables you find in

  • scss/_variables.scss
  • scss/_colors.scss
  • modules/theme-machine/themes/charming/css/_colors.scss
  • modules/theme-machine/themes/charming/css/_variables.scss
  • modules/theme-machine/node_modules/bootstrap/scss/_variables.scss

To do this, make a copy of the file scss/charming-pro-custom.scss and copy any variables you wish to adjust into that new file. The build process will build a custom version of Charming Pro and place the result in dist/css/ as well as the folders in the example files.

To build the build, execute the following commands:

  1. npm install
  2. gulp

The gulp file also includes a watcher that can trigger the build when SCSS files are modified. To run the watcher, use gulp watch.

Manual build

Should you, for any reason, not be able to run the included Gulp build, I’ll quickly lay out what exactly is happening. You could build Charming manually using any SCSS transpiler that works for you, but it’s a bit more effort:

  1. Clean up: Delete contents of dist/css/
  2. Build scss/charming-pro-green.scss (or your custom version) using SCSS
  3. Run PostCSS autoprefixer on scss/charming.scss
  4. Copy the results to the dist/css/ folder