Forms

Pages Frontend Documentation

Introduction

Pages is now aviable for both admin dashboards as well as Frontend, you will be able to experience the same great features that you had in Pages dashboard also Pages frontend as well.

This documentation guide for all Pages users who can even be a beginner to Web development

Light Weight & Ready to Go

The entire set of modules clocks in at 38KB* minified and gzipped. Crafted with mobile devices in mind, it was important to us to keep our file sizes small, and every line of CSS was carefully considered. If you decide to only use a subset of these modules, you'll save even more bytes.

Production level usage using minfied and gzipped files

CSS

38Kb

JS

1.8Kb

Icons

12Kb

Other

120Kb

Getting Started

This part of the doc will help you to quick start your project and will you a basic idea about how Pages Frontend works.

What's Included

Once you have download the package you will see the following folder structure in "frontend" Folder

core

samples

getting_started

grunt

gulp

documentation.html

Whats Inside getting_started

This folder is a quickstart template to help you start your website, you can copy content blocks from samples folder to your to this and create you custom version

getting_started

assets

css

js

img

pages

css

pages.frontend.css

pages.frontend.min.css

js

pages.frontend.js

pages.frontend.min.js

img

index.html

Folder : assets

This folder is entirely dedicated for you and you can add your own images, custom css and js files, its grouped into resource folders for best practice

Folder : pages

This where the magic happens and contains pre-complied version of Pages, we do recommend updating any contents of the folder as all future updates are affected directly to this

Whats Inside demo

This folder contains all the alternative websites that we have created using Pages frontend.

You can copy elements/blocks from one sample 01 to sample 02 they will work entirely on all the pages

Working with Less

Less is a CSS pre-processor, meaning that it extends the CSS language, adding features that allow variables, mixins, functions. Pages supports Less and is pure built on top of Less

Less Files are found under pages/less

less

modules

themes

default

var.less

theme.less

simple

var.less

theme.less

corporate

var.less

theme.less

retro

var.less

theme.less

mixin.less

modules.less

pages.less

responsive.less

Modules

The seperation of modules help you to remove whats not necessary and build your own custom pages css
You an import any modules from pages dashboard less to pages frontend less.

Name

Description

layout.less

The core layout styles for pages frontend

respnsive.less

The responsive handlers

panels.less

Bootstrap Panels over-written classes

typography.less

Contains all typo related styles included bg-color

swiper.less

Image slider classes

button.less

Bootstrap button over-written classes and pages dropdown

alerts.less

Bootstrap alert messages over-written classes

progress_indicators.less

Pages progress bars, bootstrap native progress

modals.less

Bootstrap Modal Classes

tabs_accordian.less

Bootstrap tabs and accordains

form_elements.less

All form related class including layouts & validations

tables.less

Classes for bootstrap tables and datatables

tables.less

Classes for bootstrap tables and datatables

misc.less

All other utilities and helper classes

z-index.less

To maintian heierachchy and order for layers

demo.less

Demo purpose classes for setting heights

Varriables

Varriables help to generate themes, you can custom build you very own theme. The varriables will be include inside a specific theme
e.g:
less/themes/default/var.less by changing the a few 5 main color varrables you can create your own color palette

Creating your own Color Pallete

By simply changing the following varriables the entire color palete mention here will change
Color Palette

Mixins

We have made a wide varraity of mixins that can be used in less,
mixins can be found under pages/src/less/mixin.less

Compiling

We recommend to compile locally without using less.js library, there are many Less compilers for Windows, Mac and also Linux users but we made it even easier. With pages powerful CLI you can compile it without any thirdparty software, simple do any changes to the less files in pages/less and it automatically updates the css in pages/css/pages-frontend.css

Working with Grunt

In one word: automation. The less work you have to do when performing repetitive tasks like minification, compilation, unit testing, linting, etc, the easier your job becomes. After you've configured it through a Gruntfile. Pages supports Grunt to make it even easier for developers, this allows us to implement a powerful command line interface for pages. Here are some of the things that we have added using grunt

Installing Grunt

To install grunt first you must have NodeJs installed, NodeJS will have npm (node packaged modules)
Run the following commands

Installing Gulp

In you downloaded package from themeforest, navigate to gulp/ directory and copy both package.jsongulpfile.js to your project root. e.g : getting_started folder

Navigate to the root directory of your project or getting_started folder, then run npm install.

Once you have succesfully setup now you can use pages Gulp CLI commands to automate your task

Commands

gulp build

This will automatically minify your assets resources like css and js into a folder called dist

gulp watch

This will automaically compile the pages Less files on save

gulp less

This will compile the pages Less files on excute once

Your are free to customize the Gulp task to your need by editing the gulpfile.js

Troubleshooting

Should you encounter problems with installing dependencies or running Gulps commands, first delete the /node_modules/ directory generated by npm. Then, rerun npm install.

Browser Support

Pages is built keeping mind to support a wide range of browsers and devices. We all major browers Google Chrome, Mozilla Firefox, Safari, Opera, Internet Explorer 9 and Above

Pages not only is supported by major browser but also is hardware accelarated using the GPU

Chrome

Firefox

Internet Explorer

Opera

Safari

Android

Supported

Supported

N/A

Not Supported

N/A

iOS

Supported

N/A

Not Supported

Supported

Mac OS X

Supported

Supported

Supported

Supported

Windows

Supported

Supported

Supported

Supported

Not Supported

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.

Grid

Bootstrap grid includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts

Introduction

Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:

You must start with row

There are pre-define classes of columns starting from 1 to 12, example col-md-1 to col-md-12

Each of these value represent a percentage of the screen, 1 being the smallest and 12 being 100%

The table created in the above example is only activated for resolutions ≥768px. Hence the prefix *-sm-*. You can replace *-sm-* with any other breakpoint prefix defined in Bootstrap to restrict the table-like behavior to a particular resolution (ex: 'xs','md','lg')

You can also append col-middle, col-top or col-bottom to col-*-height to vertically align the content

It is also possible to mix these classes together with Bootstrap's row and col-*-* classes without any conflict

Elements that resize maintaining aspect ratio

Make the height of any element auto-adjust depending on its width while constraining to a given aspect ratio.

You can use pull-leftpull-centerpull-right to align content you want, make sure you add the div
header-inner so that you content automatically align horizontaly without the need of top and bottom paddings

HTML Structure

Floating Elements

This part of the document will help you understand how to apply floating parallax effect to any element you want.

You can the following to have a reveal footer.

data-pages="float"

Other Options

Attribute

Default Value

Description

data-top-margin

0

Top margin offset

data-bottom-margin

0

Bottom margin offset

data-speed

0.1

Animation Speed

data-delay

1000

Delay after scroll

data-curve

'ease'

Animation Curve

Footer

This part of the document will help you understand how to apply auto reveal footer

You can the following to have a reveal footer.
data-pages="reveal-footer"

Color

Every color used throughout the theme has been generated by using the following eight base colors, which are defined in the
var.lessfile. This makes theme customization a matter of changing few LESS variables.

Info color shades

Menu color shades

Menu open color

.bg-menu-light

#191B1F

Base color

.bg-menu

#202328

Text/icon color

.bg-menu-dark

#646972

Other colors

White color

.bg-white

#ffffff

Transparent

.bg-transparent

Icons

Pages come with its very own pixel perfect font icons that is made specially for pages, this has over 50 icons to choose from.
We have also include the popular Font Awesome and Line Icons. Currently it will scale up over Over 600 icons

Button animation

Content inside a button can be animate on hover. Simply include the classes
.btn-animated together with .from-top or .from-left to specify the animation direction, followed by the desired icon font class name (ex: fa fa-check)

We have added new options to bootstrap modals and made even awesome, by simply changing a class name you can get the following. There 3 different modals to choose from with 3 different size options for each, varying upt 9 modals

Simply add the class slide-up to main modal DIV & wrap modal-content with modal-content-wrapper, Your HTML tag structure should look like this. You can change the id attribute of the modal to anything you want.

Simply add the class slide-right to main modal DIV & wrap modal-content with modal-content-wrapper, Your HTML tag structure should look like this. You can change the id attribute of the modal to anything you want.

Progress Bars

Linear Progress

Indeterminate progress

Indicates a running process where the progress is unknown using an animated svg. ex: AJAX form submission. Simply wrap .progress-bar-indeterminate with Bootstrap's .progress. The progress bar will automatically expand to get the width of its parent <div>

Circular Progress

Don't like the linear style? Try circular progress indicators instead. These also come with determinate and inderminate options

Indeterminate progress

example :

<div class="progress-circle-indeterminate"></div>

Determinate progress

A determinate circular progress indicator can be initialized without writing a single line of Javascript code by simply including markup below. Pass any percentage value (0-100) into the value field to set the progress

Form Layouts

This section of the documentation will guide you how to apply different form styles for your need, There 3 different new styles that you an use, Please follow the steps in achieving this. There is no need of external JS or CSS libraries.

Creating a Standard Bootstrap Form

To create a native bootstrap form, the following tags are a must, It is the standard procedure in Bootstrap

Step three

Error messages

showErrors and errorPlacement functions of jQuery Validate have been overridden in Pages core. As a result, the way error messages are displayed will differ depending on the form layout style you've declared in the code

Standard

Standard way of showing error messages. Will appear on any form except for forms with attached groups

Attached

Recommended to use with Pages default form style having attached elements with .form-group-attached wrapper. The error messages will appear in the form of popovers.

Troubleshooting

This section of the page describes how to trouble shoot Javascript errors that you may in counter.

JavaScript errors are likely to prevent a web page from working as expected. By default all browsers hide the JavaScript errors from the end user.