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 and utility functions of the framework. Simply including either of these files will set environment variables, auto initialize all the core modules for you and present you with the Pages global object $.Pages which you can use to call utility functions.

<!-- 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.

AngularJS users can apply corresponding directives or ui-jq attribute (provided by UI.Utils) to load plugins.

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

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

<select data-init-plugin="select2">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
</select>

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

<div style="height:200px" ui-jq="scrollbar" ui-options="{ignoreOverlay: false}" class="scrollbar">
  ...
</div>

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

<input type="checkbox" class="js-switch" ng-model="Model" ui-switch="{color: '#10cfbd'}" checked="checked" />

<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>

<select class="cs-select cs-skin-slide" cs-select>
    <option value="web">Web-safe</option>
    <option value="helvetica">Helvetica</option>
    <option value="segeoui">SegeoUI</option>
</select>

<img ui-jq="unveil" src="avatar.jpg">

Utility functions

$.Pages.isVisibleXs()

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

$.Pages.isVisibleSm()

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

$.Pages.isVisibleMd()

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

$.Pages.isVisibleLg()

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

$.Pages.getUserAgent()

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

$.Pages.setFullScreen(element)

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

$.Pages.getColor(color,opacity)

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