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.

Plugin jQuery
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>
Select2 Set [data-init-plugin="select2"] 
<select data-init-plugin="select2">
    <option value="foo">Foo</option>
    <option value="bar">Bar</option>
</select>
Scrollbar Set class="scrollbar" 
<div style="height:200px" class="scrollbar">
  ...
</div>
Switchery Set [data-init-plugin="switchery"] 
<input type="checkbox" data-init-plugin="switchery" checked="checked"/>
SelectFx 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>
Unveil Applied to any img

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.