API Reference

As mentioned in the Getting Started guide, Pages core framework files can be found in the pages folder. Inside this you'll be able to find pages.js and pages.min.js files which contain the core logic
<!-- Initialize Pages core objects -->
<script type="text/javascript" src="pages/js/pages.min.js">

Environment variables

Pages will detect the user OS and add it as a class name (ex: 'windows', 'mac', 'unix', 'linux') into body.It will also detect if it's mobile device or desktop and add either 'mobile' and 'desktop' into the same tag.

Auto-initialized jQuery Plugins

The following table shows which plugins are auto-initialized and their default configuration.



Bootstrap Tooltip

Set [data-toggle="tooltip"] to any button or anchor tag.

<a href="#" data-toggle="tooltip" data-placement="bottom" title="Print"><i class="fa fa-print"></i></a>


Set [data-init-plugin="select2"]


Set class="scrollbar"<div style="height:200px" class="scrollbar"> ...</div>


Set [data-init-plugin="switchery"]<input type="checkbox" data-init-plugin="switchery" checked="checked"/>


Set [data-init-plugin="cs-select"]<select class="cs-select cs-skin-slide" data-init-plugin="cs-select"> <option value="Websafe">Web-safe</option> <option value="Helvetica">Helvetica</option> <option value="SegeoUI">SegeoUI</option></select>


Applied to any img

Utility functions


Returns true if the current viewport is an extra small device. ex: Phones (<768px)


Returns true if the current viewport is a small device. ex: Tablets (≥768px)


Returns true if the current viewport is a medium device. ex: Desktops (≥992px)


Returns true if the current viewport is a large device. ex: Desktops (≥1200px)


Reads the pre-set user-agent class from body and returns either 'mobile' or 'desktop'


Makes the given element to go full-screen mode. ex: $.Pages.setFullScreen(document.querySelector('html'));


Returns the rgba value for a given Pages contextual color and opacity.