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:
This command installs all the packages needed for development, Gulp will be installed and 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:
Runs (once) the Sass compile task on style.scss, the autoprefixer and then creates the sourcemap.
You have to run this command during developement, and this command will be your best friend 🙂 It runs a file watcher on sass, scripts, and images folders and when triggered run the needed gulp task. It uses the latest version of gulp which allows to run task in parallel in order to have very short compilation times.
Minify images (PNG, JPEG, GIF and SVG) from assets/src/img then copy to assets/dist/img folder.
Delete unnecessary development files like source maps, thumbnail os files, and ALL the content of assets/dist (you have to compile again sources after this command).
Runs (once) the Sass task that compile the “above the fold” style (acf.scss)
Zip all theme files into /releases/$version, it can be useful if you want to “package” the theme for upload purpose.
Parse all php files into theme folder and generates the pot files for WordPress translations.
To finalize the theme… for first run clean and removes all development files. Then compile with a set of options suitable for publication (in watch task instead the compilation speed is privileged and also the css is not minified)
Same as buildAll task but furthermore run the zip task
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__primary: the main color $color__secondary: the secondary color $color__black: the darker color $color__dark-grey: lighter than $color__black $color__light-grey: darker than $color__white $color__white: the lighter color $color__text: the text color $color__text-light: light text color $color__nav-background: the header background $color__background: website background $color__accent: accent color (buttons, links etc) $color__woo-accent: woo accent color (same as accent but in the woocommerce context) // TEXT VARIABLES $text__line-height: texts default line height $text__line-height-headline: headlines default line height $text__size: texts default font size $font__family: texts default font-family $font__family-headline: headlines default font-family // ANIMATIONS $animations__lenght : animations default length // MEASURES $size__site-width: website width $size__side-padding: the content side padding, so content width is equal to "site-width" - "side-padding * 2" // DISTANCES $size__margin: distance between elements $size__padding: distance between sections $size__padding-resp: website side padding // HEADER $head__direction: use "row" or "column". The header layout can be landscape (logo and menu on the same level) or portrait (centered layout with the menu under the logo) $size__branding-height: in the column layout set the logo height $nav__height: in the column layout set the height of the menu $size__branding-logo-ratio: branding height / the logo ratio. might be useful if the logo looks smaller or bigger than required // HEADER RESP $head__height-responsive: the responsive menu height // HAMBURGER MENU $hamburger__size: hamburger menu size $hamburger__weight: hamburger line weight $hamburger__color: hamburger line color // SIDEBAR $sidebar__position: 'left' or 'right' $sidebar__width: the sidebar width $sidebar__margin: distance between sidebar and content // SCROLLBAR $scrollbar-line-color: scrollbar color $scrollbar-background-color: scrollbar background color
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).