Introduction

Get started with Messenger by following this guide. Always feel free to reach out to support@offsetcode.com

Node

In order to use Gulp, you will need to download Node. If Node is already installed in your system, please make sure the installed version is the stable version of Node - LTS.

Node Downloads Page →


Gulp

Open your terminal and download Gulp Command Line Interface to be able to use gulp in your terminal.

                    
                        
                    
                

NPM modules

Open your terminal to the root directory of your unzipped theme and run to install all of theme's dependencies.

                    
                        
                    
                

Compiling

Open your terminal to the root directory of the theme to use the following commands:

                    
                        
                    
                

Compile and watch the SCSS/JS/HTML, use Live Reload to update browsers instantly, start a server, and pop a tab in your default browser. Any changes made to the source files will be compiled as soon as you save the file.

Hit Ctrl+C or just close the command line window to stop the server.


                    
                        
                    
                

Generates a dist directory with all the production files.


HTML includes

The gulp-file-include package is used to make global changes in HTML files easier. Easily create new .html partials inside the /partials folder and point to them from any file by specifying the path to the partial file and using the @@include keyword.

Please read the official package documentation for more info.


Customizing SCSS

There are 2 basic ways to customize your theme:

  1. Customizing SCSS. This is more versatile and sustainable way to customize the template, but requires the gulp compilation steps outlined above. The 2 major benefits of this strategy are using variable overrides to easily customize theme styles, plus you never have to touch Bootstrap or template's source, meaning future updates will be much, much, simpler. There are 3 provided files that make this strategy simple to implement:
    • user-variables.scss or user-variables.dark.scss: This files can be used to override Bootstrap core and the template variables for customizing elements that have been tied to variables.
    • user.scss: This file can be used for writing custom SCSS that will be compiled alongside Bootstrap and template's core files.
  2. Compiled CSS. If you plan on using the template "as is", or only need limited customization, feel free to simply attach the compiled template.css, template.dark.css or template.min.css, template.dark.min.css file in the dist/assets/css directory.