OpenSkinJS (for Framework7)

Bringing OpenSkin support to Framework7 with ease.

Developed by Shuga.


OpenSkinJS is a library designed for developers to easily take advantage of OpenSkin-formatted skins with little effort, especially for Framework7-based web applications. It will take the skin file (as an object, JSON string, or a remote file (given it doesn't violate cross-site restrictions)) and allow for it to be loaded into the DOM, as well as the ability to work with the skin's metadata (like name and description).


To set up OpenSkin in your project, add the following towards the end of the page (to make sure any dependencies are loaded and to reduce page load time):

<!-- OpenSkin -->
<script>var openskin = "appName"</script>
<script> src="openskin.min.js"></script>
<!-- /OpenSkin -->

Make sure to replace appName with your web app's name. This is used for skin designers to fine-tune their skins for your site (if needed).

Fetching a Skin

Load a skin from a given url (most browsers require that files have to be loaded from the same domain for security purposes):

OpenSkin.getJSON(url, loadAfter)

Take a string of JSON (passed as json) and load it:

OpenSkin.getStr(json, loadAfter)

Take an already-parsed object and loads it:

OpenSkin.getObj(object, loadAfter)

The loadAfter boolean in the fetch methods, when set to true, will apply the skin after the skin is loaded.

Fetching a Skin

Apply the skin (if loadAfter was not used previously):


Accessing a Skin

Return an object that allows for the access of the currently loaded skin, including its name, properties, and styles: