I hope this theme can be a good starting point for developers, theme hackers and for everyone who want a starter template to personalize freely.
To Customize the template just follow this instructions, you will first need to install NodeJS on your development machine or on your server, then install the packages needed for the development.
First you need to download and install NodeJS from the link below:
After this step, you can check if NodeJS and NPM were installed with the command:
node -v && npm -v
How use Gulp tasks
Into the theme folder with the command line type:
npm i -g gulp-cli && npm i
This command installs all the packages needed for development and Gulp will be ready to run tasks for you!
How customize this template?
If you have already installed nodejs, and npm you can run the gulp tasks and recompile the style as you prefer. This gives you al lot of possibilities than the customizer, but if you don’t want to lose changes with updates, you need create a child theme.
But wait, you’re lucky, I’ve already done it!
Yes but now? What i can do?
I have already written some useful Gulp tasks. To run them, go with the command line inside the theme/child theme folder, then type this commands:
Since i moved many variables to CSS Custom Properties there are few sass variables to set but If you want to personalize your template you must edit the variables scss file (wp-content/themes/modul-r/assets/src/scss/utils/vars.scss), I choose the sassy way instead of the customizer because it creates a faster site with a more compact code.
Here you will find everything you need to customize your template colors fonts sizes and much more! And don’t forget to run the gulp task “gulp style” to re-compile stylesheets.
// Color variables $color__icons: #888888; // Animations $animations__lenght : .35s; // SIZES $base_unit: 8px; $size__margin: $base_unit; $size__padding: $base_unit * 8; $size__padding-resp: $base_unit * 2.5; // HEADER $size__site-width: 1500px; $size__side-padding: 300px; $size__nav-line-height: 2.2; $size__nav-responsive-line-height: 2.5; $size__responsive-menu-max-width: 360px; // Header resp $head__responsive_breakpoint-width: 960px; // Hamburger menu $hamburger__size: 30px; $hamburger__weight: 3px; // SCROLLBAR $scrollbar-border-radius: 2px; // AVATAR $avatar_size: 64px; $comments__avatar-size: 64px; // BUTTONS $button__height: 36px; // Blockquote $blockquote__icon-size: 60px;
If you use the child theme instead, a unique file will be created from the parent’s and the child’s style (so only the child style will be enqueued).