Environment Setup

When I did this theme I thought about my usual workflow… what I consider essential to speedup my development phase. I use gulp to post-process the sass, minify javascript and images, create the pot file for translations.
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.


Install NodeJS

First you need to download and install NodeJS from the link below:

https://nodejs.org/en/download/

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

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!

https://github.com/erikyo/Modul-R-child


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:

gulp style
Runs (once) the Sass compile task on style.scss, the autoprefixer and then creates the sourcemap.

gulp scripts
Traspile es6 to javascript (if needed) then uglify (minify), concat (merge all files into one) and creates the sourcemap.

gulp watch
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.

gulp imageMinify
Minify images (PNG, JPEG, GIF and SVG) from assets/src/img then copy to assets/dist/img folder.

gulp clean
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).

gulp atf
Runs (once) the Sass task that compile the “above the fold” style (acf.scss)

gulp zipRelease
Zip all theme files into /releases/$version, it can be useful if you want to “package” the theme for upload purpose.

gulp createPot
Parse all php files into theme folder and generates the pot files for WordPress translations.

gulp build
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)

gulp buildRelease
Same as buildAll task but furthermore run the zip task


SASS Variables

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).

Share this post

Post navigation

You might be interested in...

No comments yet, be the first!

Comments

Your email address will not be published. Required fields are marked *