Custom build introduction

The jQuery.mmenu plugin uses Gulp as a taskrunner. It compiles, minifies and concatenates the .css and .js files. With Gulp, it is really easy to create a customized version of the plugin in just a few steps.

If you're not familiar with using the command line, have a look at this great tutorial.

Setup the JSON build

The jQuery.mmenu plugin uses a JSON file to determine what files should be compiled and in what directory they shoud be compiled. A custom version for this file (_build.json) can be created using the command line. To do so, navigate to the mmenu package directory and run php bin/build [path] (where [path] is a relative path from the mmenu package directory to the destination directory). In order to be able to update your package later on, it is advised to specify a destination path outside of the package directory.

$ cd /path/to/project/jQuery.mmenu-master
$ php bin/build ../my-custom-menu

This will create a new _build.json file in the directory my-custom-menu, containing a list of all available core scripts, extensions, addons, wrappers and translations. Open up this file and remove the parts you do not want to include in your custom build. Here's an example:

{
   "name"  : "jquery.mmenu.custom",
   "umd"   : true,
   "files" : {
      "core"         : [ "oncanvas", "offcanvas", "scrollbugfix", "screenreader" ],
      "addons"       : [ "navbars", "searchfield" ],
      "extensions"   : [ "themes" ],
      "wrappers"     : [],
      "translations" : []
   }
}

Note that this file must be a valid JSON file, meaning you can not simply comment out the parts you don't want, you'll have to actually remove them. Also note that all keys in the files object need to be defined as an array.

Setup custom SCSS variables

The jQuery.mmenu plugin uses a SCSS file with variables to determine most (if not all) of the menu look and feel. A custom version for this file (_variables.custom.scss) can be created using the command line. To do so, navigate to the mmenu package directory and run php bin/variables [path] (where [path] is a relative path from the mmenu package directory to the destination directory). In order to be able to update your package later on, it is advised to specify a destination path outside of the package directory.

$ cd /path/to/project/jQuery.mmenu-master
$ php bin/variables ../my-custom-menu

This will create a new _variables.custom.scss file in the my-custom-menu directory, containing a list of all available SCSS variables with their default value. Open up this file and edit the variables you want to override. You can also (but are not required to) remove the variables you do not want to override. Here's an example:

$mm_padding      : 15px;
$mm_btnSize      : 45px;
$mm_navbarHeight : 60px;
PRO tip!

Dig through the SCSS variables and look for those prefixed with mm_opt_. These variables determine whether or not to include CSS for a specific purpose throughout the entire CSS framework.
For example, the "themes" extension includes CSS for three themes: "dark", "black" and "white". Opt out of "black" and "white" if you're only using the "dark" theme.

$mm_opt_themes_black: false;
$mm_opt_themes_white: false;

Some extensions and add-ons also include CSS for other extensions and add-ons. For example, the "themes" extension includes CSS for the "counters", "iconbar" and "searchfield" (and more) add-ons. Opt out of these add-ons if you're not using them.

$mm_opt_counters    : false;
$mm_opt_iconbar     : false;
$mm_opt_searchfield : false;

Opting out of as many (parts of) extensions and add-ons as possible will drastically decrease the file size of the CSS files.

Run Gulp

Now that you've created the custom _build.json and _variables.custom.scss files, you can use Gulp to create a customized version of the plugin.

First (if you haven't already), install Node.js and install Gulp. Next, open up the command line, navigate to the mmenu package directory and install all devDependencies.

$ cd /path/to/project/jQuery.mmenu-master
$ npm install

Next, run $ gulp --c [path] (where [path] is a relative path from the mmenu package directory to the directory containing the custom _build.json and _variables.custom.scss files). Optionally, you can also specify an output directory by adding --o [path] (where [path] is a relative path from the mmenu package directory to the desired output directory).

$ cd /path/to/project/jQuery.mmenu-master
$ gulp --c ../my-custom-menu --o ../my-custom-menu/dist

This will compile the specified .css and .js files seporately, but also concatenate them in the specified filename (the name in the _build.json file , "jquery.mmenu.all" by default) in the my-custom-menu directory.