Getting started

In this page we'll cover the folder structure, setting up your development workflow, how to compile, customize and extend the theme.

— Folder structure

  • template/
    • build/ compiled theme files
    • src/ source files for development
      • fonts/ connect fonts locally
      • img/
      • icons/ icons for svg-sprite
      • js/
      • sass/ preprocessor CSS
      • templates/ preprocessor HTML
        • index.pug/
    • node_modules/ where npm installs dependencies
    • gulp/ settings gulp
    • gulpfile.js/ build tasks for developments
    • package.json/ list of dependencies
    • package-lock.json/ dependencies version tree

You have 2 options for using the template:

  1. Use files from the build folder - this will allow you not to start the project, but immediately work with CSS, JS, HTML, but you will not be able to use preprocessors, sprites, etc and you will have to manually update the tab in the browser to see the changes, what you put in the files.
  2. Run the project, this will allow you to use all the functions of the template.

Notice: keep in mind that if you work on files in folder src and then switch to compiling with Gulp you would lose your changes as the files would be re-generated.

— Development setup

  • Download and install Node.js (v.10.15.3) if you don't have it already installed in your computer. The template uses npm to manage the dependencies listed in package.json.
  • Unzip the theme and then open your terminal, navigate to the root /template directory.
  • Install the Gulp Command Line Interface to be able to use Gulp:
    npm install gulp-cli -g
  • Making sure you're at the root /template directory, install the local dependencies:
    npm install
  • That's it!

— Compiling with Gulp

The template uses Gulp to automate the development workflow. With your command line on the root /template directory you can use the following commands:

  • gulp
    • This is the default task: Compiles the src files into the build folder, opens a tab in your browser, and watches for any changes made in the src folder - SASS, JS, templates(PUG), images, etc. When updates are made it automatically re-compiles and reloads your browser.
      To stop the server and terminate the gulp command just hit CTRL + C.
  • gulp build
    • Compiles the src files into the build folder.

— Preprocessor SASS(CSS) and PUG(HTML)

The template uses SASS and PUG preprocessors, they speed up and facilitate the work.