Skin:Lift/Development guide

The Lift skin was developed using the SkinMustache class, available in Mediawiki 1.36 and above. This is a development guide to show how it was done so that other skin developers will have an idea as to what they can do when developing other skins using the SkinMustache class.

Goals
This development guide will show how to:


 * Set up the initial folder for a skin using SkinMustache
 * Set up SkinJSON to help in developing and troubleshooting
 * Easily incorporate frameworks, such as Bootstrap, Hover, Animate, and Font Awesome, in addition to how to incorporate a Google font, specifically Roboto
 * Easily incorporate custom css and js files
 * Extend SkinMustache method to provide html-free menu links and categories so that the Mustache template will have more full control over the html displayed
 * Show how extensions can pass additional information to the skin
 * Show how to incorporate that additional information in the mustache templates

Set up the initial folder for a skin using SkinMustache
Although a skin folder can have a variety of structures, the Example skin provides a starting point. I personally had difficulties downloading and installing the files from the Github repository, so I recommend downloading from the Mediawiki Skin:Example page.

Install the skin per the directions and in the wiki under Preferences change the skin to Example. For a new wiki installation, the Main Page should now look something like this:



To convert this to our new skin:


 * 1) Rename the "Example" folder to "Lift"
 * 2) Now in the "Lift" folder, delete the .phan folder and all files in the root EXCEPT skin.json
 * 3) Open skin.json and change all instances of "Example" to "Lift" being careful to maintain case sensitivity
 * 4) In LocalSettings.php change wfLoadSkin( 'Example' ); to wfLoadSkin( 'Lift' );
 * 5) In the wiki under Preferences change the skin to Lift

Checking our wiki, the Main Page should look the same as it did when the skin was named Example.

Finally, edit skin.json to update the other information for your new skin (i.e., "version", "author", etc.).

Set up SkinJSON to help in developing and troubleshooting
SkinJSON is a useful tool to allow us to see the data returned by SkinMustache. Download the files from the SkinJSON Github repository into a SkinJSON folder under our Skins directory and enter wfLoadSkin( 'SkinJson' ); in LocalSetting.php.

You will see SkinJSON now available as a skin under your preferences as jsonskin but DO NOT UPDATE YOUR PREFERENCES TO USE jsonskin. We will access the json returned by SkinMustache class indirectly through the following url:

yourwikibaseurl/Main_Page?useskin=lift&useformat=json

This will show all the data that is passed to the Lift skin in a json format.

When viewing the wiki normally, the SkinMustache class is merging this json data with the mustache files inside the templates folder to form the HTML we need to render the page.

Of interest to us here are the various items under "data-portlets", for example the "data-user-menu":

Data-portlets will be used to form our menus, with each portlet being an individual menu. The core Mediawiki software determines what menu options will be available, the SkinMustache converts those options into json data, and the mustache files in the templates directory form it into html for us to view.