JMB Tree Pro for developers

This developer documentation is written for JMB Tree Pro.

How to create custom modificator

The modificator is located in DOM at the level of <nav> element:

<module class="MODULE_CLASS_SFX">
    <jmb-tree class="STYLE_NAME">
        <nav class="MODIFIER">...</nav>
    </jmb-tree>
</module>

Thereby, the modificator is located inside of current style. You can describe the modificator in style using the following phrase:

jmb-tree-LAYOUT_NAME.jmb-tree-style-@{name_style} .jmb-tree-nav-NAME_MODIFIER{
    Your Stuff...
}

Styles

In module back-end you can select one style from the list of styles available for each layout. Each style is a CSS file which is located in required directory. It's easy to create custom style. You need to add new CSS file in the directory and a new style will be appeared in the list of styles. You can use LESS to create CSS file.

LESS structure

Global
media/mod_jmb_tree/variables.less - Variables
media/mod_jmb_tree/mixin.less - Mixin

media/mod_jmb_tree/images - folder with images that are included in CSS rules.

All layout variables are placed in Variables as a matter of convenience. Mixin includes small helper that converting SVG images used in styles. We use inline SVG with fill="#000"orstroke="#000"params for further transofration of#000` to required color. The SVG itself soon to be encoded (URL encoding). Have in mind this moment if you are going to add custom images in style.

Layout
media/mod_jmb_tree/LAYOUT_NAME/less/variables.less - Override Variables
media/mod_jmb_tree/LAYOUT_NAME/less/default.less - Main Style
media/mod_jmb_tree/LAYOUT_NAME/less/dark.less - Additional Style - Dark

Override Variables. If you are going to change style of selected layout, here you can override the variables.
Compiled CSS files

media/mod_jmb_tree/LAYOUT_NAME/css/default.css - Main Style (develop)
media/mod_jmb_tree/LAYOUT_NAME/css/default.min.css - Main Style (release)
media/mod_jmb_tree/LAYOUT_NAME/css/dark.css - Additional Style - Dark (develop)
media/mod_jmb_tree/LAYOUT_NAME/css/dark.min.css - Additional Style - Dark (release)

Usually, it's better to use minified files in the release. Since it's hard to debug the result while you are working on the style, you can compile two different file versions. Use Minified files param in the module to switch on /off file loading mode when the debugging is no longer needed.

Annotation

All style names should not consist a point symbol. For example: dark.min.css - such name will not be readed and displayed as available style. However, it might be used if you created two styles:

  • dark.css
  • dark.min.css

Dark will be readed as style name and be available in the list of layout styles. After enabling Minifed files param, the dark.min.css file will be included, if exist.

How to create new style:

  1. Copy main default.less file and rename it. E.g. newnamestyle.less
  2. Inside of this file just add name of variable style @name_style: newnamestyle;
  3. Descrive required style, override used variables and etc.
  4. Compile CSS file in media/mod_jmb_tree/LAYOUT_NAME/css/newnamestyle.css
  5. Compile CSS in media/mod_jmb_tree/LAYOUT_NAME/css/newnamestyle.min.css if you are going to switch on / off files loading via Minifed files param.

After that, when you select required layout, the newnamestyle style will be appeared in the list of styles.