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">
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.
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.
|
Select2 | Set [data-init-plugin="select2"]
|
Scrollbar | Set class="scrollbar"
|
Switchery | Set [data-init-plugin="switchery"]
|
SelectFx | Set [data-init-plugin="cs-select"]
|
Unveil | Applied to any img
|
$.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.