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.
There are a few requirements to build Charming Pro using the included gulpfile.js
:
node
and npm
are presentYou 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:
npm install
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
.
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:
dist/css/
scss/charming-pro-green.scss
(or your custom version) using SCSSscss/charming.scss
dist/css/
folder