Phonon Framework

Phonon

Before Using the Docs

Tips and Tricks that you should know for using Phonon at its best!

The dist Folder

The /dist folder contains all the files that you can use for developing your app.

dist/js

FileName Description
phonon-core.js is the minimal file for running Phonon.
phonon.js contains phonon-core.js and all the UI components. Note that if you want to use only one UI component such as panels for example, you can include phonon-core.js + panels.js instead of the entire framework (phonon.js).

dist/css

Same as JS

FileName Description
phonon-base.css is the minimal UI required to run Phonon correctly.
phonon.css contains all the UI components. Note that if you want to use only panels for example, you can include phonon-base.css and panels.css instead.

Phonon Options

phonon.options permits to define all available options for navigation and internationalization. It is called once before you set your page namespaces (phonon.navigator().on(...)).

phonon.options({

	navigator: {
	    defaultPage: 'home',
	    hashPrefix: '!', // default #!pagename
	    animatePages: true,
	    enableBrowserBackButton: true,
	    templateRootDirectory: '',
		//defaultTemplateExtension: 'html', // if you use page templates
	    useHash: true
	},
	// i18n: null if you do not want to use internationalization
	i18n: {
	    directory: 'res/lang/',
	    localeFallback: 'en',
	    localePreferred: 'en-US'
	}
});
			

Utility

The OS's name is automatically added in the body class

If the OS is Android, Phonon will add it as a class name.

You can also get device properties.

<body class="android">
<body class="ios">
<body class="web">

Show/Hide phone/tablet layout

Go to the utility's section

Show for Android/iOS/Web only

Go to the utility's section