Pages Frontend Documentation

Beautifully Hand Crafted, Light Weight, Hardware Accelerated UI Framework

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

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

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

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

Whats Inside grunt and gulp

Pages support two popular build systems called Grunt and Gulp.

Other Useful resources that you may find:

• Working with LESS
• Working with Grunt
• Working with Gulp

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

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.

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

Main Base color
@color-master
Primary Colors
@color-success
@color-complete
@color-primary
@color-warning
@color-danger
@color-info

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

Use the following commmands on your terminal

Using Grunt

This command will automatically compile the less to css on file save

$ grunt watch

This command will compile the less to css on execute

$ grunt less

Read more about how to setup Grunt

Using Gulp

This command will automatically compile the less to css on file save

$ gulp watch

This command will compile the less to css on execute

$ gulp less

Read more about how to setup gulp

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

• Install grunt-cli globally by running the following command npm install -g grunt-cli
• In you downloaded package from themeforest, navigate to grunt/ directory and copy both package.json gruntfile.js to your project root. e.g : getting_started folder
• Navigate to the root directory of your project, then run npm install.

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

Commands

Grunt Build

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

Grunt Watch

This will automaically compile the pages Less files on save

Grunt Less

This will compile the pages Less files on excute once

Your are free to customize the Grunt task to your need by editing the gruntfile.js in the root directory of getting_started

Troubleshooting

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

Working with Gulp

Gulp is another famous build system supported by pages, gulp's use of streams and code-over-configuration makes for a simpler and more intuitive build.

Installing Gulp

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

• Install gulp globally by running the following command npm install -g gulp
• In you downloaded package from themeforest, navigate to gulp/ directory and copy both package.json gulpfile.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

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.

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

Utility functions

$.Pages.init()

Reinitialize Pages core

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

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%
• You can create different grid pattern that finally forms 12

example :

<div class="row">
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
  <div class="col-md-1">.col-md-1</div>
</div>
<div class="row">
  <div class="col-md-8">.col-md-8</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4">.col-md-4</div>
</div>
<div class="row">
  <div class="col-md-6">.col-md-6</div>
  <div class="col-md-6">.col-md-6</div>
</div>



• There different grids for different screen sizes, "col-md" md stands for medium screen, the following table explains

	Extra small devices Phones (<768px)	Small devices Tablets (≥768px)	Medium devices Desktops (≥992px)	Large devices Desktops (≥1200px)
Grid behavior	Horizontal at all times	Collapsed to start, horizontal above breakpoints
Container width	None (auto)	750px	970px	1170px
Class prefix	.col-xs-	.col-sm-	.col-md-	.col-lg-
# of columns	12
Column width	Auto	~62px	~81px	~97px
Gutter width	30px (15px on each side of a column)
Nestable	Yes
Offsets	Yes
Column ordering	Yes

Helpers

Pages helper css classes allow you to build your custom layout without touching any CSS code

These classes are generic helper classes predifined in the CSS of pages, here is quick view what they can do

• Set margins - Available for all directions from 5 - 90 px stepping value 5px
• Set padding - Available for all directions from 5 - 90 px stepping value 5px
• Set border - Available for all sides, default pages border color
• Border Radius - Option to set border radius, size sm / md / lg
• Image wrapping - Circular image wrap with custom size, sm / md / lg

Margins

You can add this helper class to any element in your HTML code to set Margins

example :

Rule :

Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15

Other options :

To remove margin from a HTML element add the class no-margin

Padding

You can add this helper class to any element in your HTML code to set Padding

example :

Rule :

Value can not be anything, 1,2,4,5,6. It has a step of 5px, eg: 5,10,15

Other options :

To remove padding from a HTML element add the class no-padding

Border

You can add this helper class to any element in your HTML code to set Border, border currently supports one pixel

Border Color

By default pages is shipped with border helper classes are of two

b-transparent 40% opacity

b-grey

b-primary

b-success

b-complete

b-danger

b-warning

example :

<div class="b-b b-grey">
  I have a bottom border 
</div>

Border Style

b-dashed - change the border style to 'dashed'

b-thick - change the border width to 2px

Border Radius

Helpy class to apply quick border radius, you can change the value in misc.less or in style.css

Table-like behavior

Add table behavior to any div by using these helper classes. These classes will come handy when you want to vertically align any content like in native tables.

<div class="container-sm-height bg-master-lighter" style="height:200px">
    <div style="height:50px" class="row row-sm-height b-b b-grey">
        <div class="col-sm-12 col-sm-height col-top ">
            <span class="hint-text">I'm top aligned just like in a table-cell</span>
        </div>
    </div>
    <div class="row row-sm-height ">
        <div class="col-sm-12 col-sm-height col-middle ">
            <span class="hint-text">I'm middle aligned just like in a table-cell</span>
        </div>
    </div>
</div>

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.

<div class="row">
    <div class="col-sm-3">
        <div class="ar-1-2">
            <div class="bg-master-light padding-20">
                <h3>1x2</h3>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="ar-2-3">
            <div class="bg-master-light padding-20">
                <h3>2x3</h3>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="ar-1-1">
            <div class="bg-master-light padding-20">
                <h3>1x1</h3>
            </div>
        </div>
    </div>
    <div class="col-sm-3">
        <div class="ar-3-2">
            <div class="bg-master-light padding-20">
                <h3>3x2</h3>
            </div>
        </div>
    </div>
    <div class="col-sm-3 m-t-20">
        <div class="ar-2-1">
            <div class="bg-master-light padding-20">
                <h3>2x1</h3>
            </div>
        </div>
    </div>
</div>

Absolute positioning

Makes elements to have position:absolute. Add .relative to the parent of the element that you want to be absolute to have relative positioning

<div class="relative" style="height:300px">
    <!-- Equivalent to "pull-up" -->
    <div class="top-left bg-master-light text-center padding-20">Top-left</div>
    <!-- Equivalent to "pull-bottom" -->
    <div class="bottom-left bg-master-light text-center padding-20">Bottom-left</div>
    <div class="top-right bg-master-light text-center padding-20">Top-right</div>
    <div class="bottom-right bg-master-light text-center padding-20">Bottom-right</div>
</div>

It is also possible to mix two or more classes. ex: Mixing top-left top-right will produce the following CSS styling

Misc. classes

Headers

This part of the document will help you understand the types of headers, there color options and size options available

Sizes Classes

bg-header

Larger header with 110px height, you can change height in var.less varriable name : @header-big-height

md-header

Medium header with 88px height, you can change height in var.less varriable name : @header-medium-height

sm-header

Small header with 44px height, you can change height in var.less varriable name : @header-small-height

minimized

Small header with 60px height, you can change height in var.less varriable name : @header-minimized-height

Color Classes

transparent-light

Transparent header with no background and white text

transparent-dark

Transparent header with no background and black/dark text

dark

Dark/Black header with white text

white

White header with black text

Other Options

data-pages="header"

Add the following attribute to initialize Pages header and monitor your header : Required

data-pages-header="autoresize"

Helps to initialize auto resize

data-pages-resize-class="light"

You can decide what class you want to add when the header resizes, you can make add the color classes to change from transparent to light

HTML Structure

<!-- BEGIN HEADER -->
    <nav class="header bg-header transparent-dark " data-pages="header" data-pages-header="autoresize" data-pages-resize-class="dark">
      <div class="container relative">
        <!-- BEGIN LEFT CONTENT -->
        <div class="pull-left">
          <!-- .header-inner Allows to horizontally Align elements to the Center-->
          <div class="header-inner">
            <!-- BEGIN LOGO -->
          </div>
        </div>
        <!-- END HEADER TOGGLE FOR MOBILE & TABLET -->
        <!-- BEGIN RIGHT CONTENT -->
        <div class="menu-content mobile-dark pull-right clearfix" data-pages-direction="slideRight" id="header">
          <!-- YOUR MENU ITEMS -->
          <!-- END MENU ITEMS -->
        </div>
      </div>
    </nav>

You can use pull-left pull-center pull-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

Menu Items

Have all your menu items inside the following as show :

<!-- BEGIN RIGHT CONTENT -->
<div class="menu-content mobile-dark pull-right clearfix" data-pages-direction="slideRight" id="header">
  <!-- BEGIN HEADER CLOSE TOGGLE FOR MOBILE -->
  <div class="pull-right">
    <a href="#" class="padding-10 visible-xs-inline visible-sm-inline pull-right m-t-10 m-b-10 m-r-10" data-pages="header-toggle" data-pages-element="#header">
      <i class=" pg-close_line"></i>
    </a>
  </div>
  <!-- END HEADER CLOSE TOGGLE FOR MOBILE -->
  <!-- BEGIN MENU ITEMS -->
  <div class="header-inner">
    <ul class="menu">
        <li>
            <a href="#" class="active">Home </a>
        </li>
        <li>
            <a href="#">Elements </a>
        </li>
        <li>
            <a href="pricing.html" >Pricing </a>
        </li>
        <li>
            <a href="portfolio.html" >Portfolio </a>
        </li>
        <li>
            <a href="contact.html">Contact Us</a>
        </li>
    </ul>
    <a href="#" class="search-toggle hidden-xs hidden-sm"><i class="fs-14 pg-search"></i></a>
    <!-- BEGIN COPYRIGHT FOR MOBILE -->
    <div class="font-arial m-l-35 m-r-35 m-b-20 bottom-left visible-sm visible-xs">
        <p class="fs-11 no-margin small-text p-b-20">Exclusive only at ,Themeforest.
        See Standard licenses & Extended licenses
        </p>
        <p class="fs-11 small-text muted">Copyright &copy; 2014 REVOX</p>
    </div>
    <!-- END COPYRIGHT FOR MOBILE -->
  </div>
  <!-- END MENU ITEMS -->
</div>

Rules :

• Have the menu-content inside a nav.header
• Have an ID to your menu-content

Mobile Menu

Now you have the flexibilty to choose how your menu will look like on mobile, all these are added to "menu-content" DIV, this is how it looks like

<div class="menu-content mobile-dark pull-right clearfix" data-pages-direction="slideRight" id="header">
</div>

Animation Options

Change the following attribute value

data-pages-direction

You can change to it to

slideLeft
slideRight
overlay

Color Options

By default you will see a white menu on mobile, you can change it to dark/black by addding the class "mobile-dark" to you "menu-content" div

Toggle On/Off Menu : Mobile

Add the following attributes with the ID you have used in your "menu-content", this means you can have more than one menu-content

<a href="#" data-pages="header-toggle" data-pages-element="#header">
  <i class=" pg-close_line"></i>
</a>

Callback

Once the menu is opened, a class menu-open is added to the body

Slider

Slider is powered by a Custom Swiper plugin made only for Pages Frontend. We have added some cool new features and credit goes to the author @Vladimir Kharlampidi

HTML Structure

<!-- Slider main container -->
<div class="swiper-container">
    <!-- Additional required wrapper -->
    <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
        ...
    </div>
    <!-- If we need pagination -->
    <div class="swiper-pagination"></div>
    
    <!-- If we need navigation buttons -->
    <div class="swiper-button-prev"></div>
    <div class="swiper-button-next"></div>
    
    <!-- If we need scrollbar -->
    <div class="swiper-scrollbar"></div>
</div>

Parrallax Slides HTML Structure

<div class="swiper-container">
<div class="swiper-wrapper">
  <!-- BEGIN SLIDE -->
  <div class="swiper-slide fit">
    <!-- BEGIN IMAGE PARRALAX -->
    <div class="slider-wrapper">
      <div class="image" data-swiper-parallax="30%">
        <img draggable="false" src="assets/images/hero_1.jpg" class="image-responsive-height" alt="" title="">
      </div>
    </div>
    <!-- END IMAGE PARRALAX -->
    <!-- BEGIN CONTENT -->
    <div class="content-layer">
    </div>
    <!-- END CONTENT -->
  </div>
  <!-- END SLIDE -->
 </div>
</div>

Javascript

Initialize your plugin

//Intialize Slider
var slider = new Swiper('#my-hero-element-id', {
    pagination: '.swiper-pagination',
    paginationClickable: true,
    nextButton: '.swiper-button-next',
    prevButton: '.swiper-button-prev',
    slidesPerView: 1,
    loop: true,
    parallax: true,
    speed:1000,
});

Arrow Elements

Arrow navigations options and classes

<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>

Color Classes

swiper-navigation swiper-white-solid

Add the class to your swiper navigation for squre white arrow

swiper-navigation swiper-dark-solid

Add the class to your swiper navigation for squre white arrow

swiper-rounded

Add the class to your swiper navigation with the above classes mention previous to have a rounded navigation

Responsive Elements

Simply add the class fit to your slide and it will scale all your headings and parragraphs
To scale images add the class image-responsive-height or image-responsive-width as required

Aniimating Slider Elements

All elements are animate using VelocityJS and VelocityJS.UI(optional), You can even right pure JS code to animate using velocityJS but we have made it easy using Pages data-atttributes.

Custom Animation

Being able to animate an element by its css attritbute, e.g: top, scale ...

<h1
data-pages-animation="custom"
data-attr="scale" 
data-delay="600" 
data-duration="500" 
data-end="4" 
data-start="0"
data-easing="easeInSine"
>
Hello World! 
</h1>

Standard Animation

Pre built Easy to use animations that you can use like slideDown, fadeIn,etc to any element on the slide

<h1 
data-pages-animation="standard" 
data-type="transition.slideDownIn" 
data-duration="600" 
data-delay="1000">
Hellow!
</h1>

 callout.bounce
 callout.shake
 callout.flash
 callout.pulse
 callout.swing
 callout.tada
 transition.fadeIn
 transition.fadeOut
 transition.flipXIn
 transition.flipXOut
 transition.flipYIn
 transition.flipYOut
 transition.flipBounceXIn
 transition.flipBounceXOut
 transition.flipBounceYIn
 transition.flipBounceYOut
 transition.swoopIn
 transition.swoopOut
 transition.whirlIn
 transition.whirlOut
 transition.shrinkIn
 transition.shrinkOut
 transition.expandIn
 transition.expandOut
 transition.bounceIn
 transition.bounceOut
 transition.bounceUpIn
 transition.bounceUpOut
 transition.bounceDownIn
 transition.bounceDownOut
 transition.bounceLeftIn
 transition.bounceLeftOut
 transition.bounceRightIn
 transition.bounceRightOut
 transition.slideUpIn
 transition.slideUpOut
 transition.slideDownIn
 transition.slideDownOut
 transition.slideLeftIn
 transition.slideLeftOut
 transition.slideRightIn
 transition.slideRightOut
 transition.slideUpBigIn
 transition.slideUpBigOut
 transition.slideDownBigIn
 transition.slideDownBigOut
 transition.slideLeftBigIn
 transition.slideLeftBigOut
 transition.slideRightBigIn
 transition.slideRightBigOut
 transition.perspectiveUpIn
 transition.perspectiveUpOut
 transition.perspectiveDownIn
 transition.perspectiveDownOut
 transition.perspectiveLeftIn
 transition.perspectiveLeftOut
 transition.perspectiveRightIn
 transition.perspectiveRightOut

Background Images - Lazy loading

You can add background images to any element with lazy loading capabilities, follow the guide below.

<div data-pages-bg-image="assets/images/gallery_1.jpg" data-bg-overlay="black" data-overlay-opacity="0.4">
</div>

Options

Parallax

You can add parallax to heroes,sliders, sections to show a depth of field.

HTML Structure

<!-- PARENT-->
<section class="" data-pages="parallax">
	<!-- CHILD ELEMENT THAT MOVES-->
	<div class="inner">
		
	</div>
	<!-- IT CAN BE ANYTHING-->
</section>

Advance Attributes

You can mix in background elements, opacity and many attributes to get a unique output.

<section class="p-b-65 p-t-60 bg-master-darkest" data-pages-bg-image="assets/images/paralax_1.jpg"  data-pages="parallax" data-bg-overlay="black" data-overlay-opacity="0.4">
<div class="inner">
</div>
<div>

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

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"

Example Code

This can be found in sample 18

<!-- START FOOTER -->
<section class="z-index-1 pull-bottom-fixed full-width" data-pages="reveal-footer">
    <section class="p-b-70 p-t-55 ">
        <div class="container">
            <!-- CONTENT -->
        </div>
    </section>
    <section class="p-t-10 p-b-10 bg-master-darkest">
        <!-- REVEAL -->
        <div class="container">
            <div class="row">
                <div class="col-sm-7">
                    <p class="fs-11 no-margin font-arial text-white small-text"><span class="hint-text">Exclusive only at</span> Envato Marketplace,Themeforest <span class="hint-text">See</span> Standard licenses &amp; Extended licenses
                    </p>
                </div>
                <div class="col-sm-5 text-right">
                    <p class="fs-11 no-margin font-arial text-white small-text">Copyright © 2014 REVOX. All Rights Reserved.
                    </p>
                </div>
            </div>
        </div>
    </section>
</section>
<!-- END 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.

Please refer to Working with LESS for more on theme customization

Monochrome color shades

Primary color shades

Complete color shades

Success color shades

Warning color shades

Danger color shades

Info color shades

Menu color shades

Other colors

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

Pages Icons

Follow these steps to include an icon on to your page

Step one

Check if the following Style sheet is already added inside the <head> tag

<link href="pages/css/pages-icon.css" rel="stylesheet" type="text/css">

Step two

Place the icon class in a <i></i> tag, pages icon prefix class starts with pg-. To view all classes in pages icon go to our demo icons page

example :

<i class="pg-social"></i>

Font Awesome Icons

Follow these steps to include an icon on to your page

Step one

Check if the following Style sheet is already added inside the <head> tag

<link href="assets/plugins/font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css" />

Step two

Place the icon class in a <i></i> tag, pages icon prefix class starts with fa fa-. To view all classes in Font Awesome go to our demo icons page

example :

<i class="fa fa-cloud"></i>

Simple Line Icons

Follow these steps to include an icon on to your page

Step one

Check if the following Style sheet is already added inside the <head> tag

<link href="assets/plugins/simple-line-icons/simple-line-icons.css" rel="stylesheet" type="text/css" media="screen"/>

Step two

Place the icon class in a <i></i> tag, pages icon prefix class starts with sl-. To view all classes in Simple Line icon go to our demo icons page

example :

<i class="sl-user"></i>

Buttons

Colors

Pages buttons use the same contextual classes introduced in Bootstrap

<button class="btn btn-primary btn-cons">Primary</button>
<button class="btn btn-success btn-cons">Success</button>
<button class="btn btn-complete btn-cons">Complete</button>
<button class="btn btn-info btn-cons">Info</button>
<button class="btn btn-warning btn-cons">Warning</button>
<button class="btn btn-danger btn-cons">Danger</button>

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)

<button class="btn btn-primary btn-animated from-left fa fa-check" type="button">
    <span>Checkbox</span>
</button>
<button class="btn btn-primary btn-animated from-top pg pg-clock" type="button">
    <span>Clock</span>
</button>

Default Dropdown

Tired of seeing the standard Bootstrap dropdown? Wrap your dropdown toggle button and dropdown menu within .dropdown-default to get a modern and clean feel

<div class="btn-group dropdown-default">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a>
    <ul class="dropdown-menu ">
        <li><a href="#">Arial</a>
        </li>
        <li><a href="#">Helvetica</a>
        </li>
        <li><a href="#">SegeoUI</a>
        </li>
    </ul>
</div>
<!-- Upside dropdown -->
<div class="btn-group dropdown-default dropup">
    <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> Dropdown <span class="caret"></span> </a>
    <ul class="dropdown-menu ">
        <li><a href="#">Arial</a>
        </li>
        <li><a href="#">Helvetica</a>
        </li>
        <li><a href="#">SegeoUI</a>
        </li>
    </ul>
</div>

Tag Options

Add .btn-tag followed by .btn-tag-light or .btn-tag-dark to have tag options with color variations for buttons. Additionally, rounded tags can be achieved by adding .btn-tag-rounded

<!-- Tag with a light background -->
<button class="btn btn-tag  btn-tag-light m-r-20">Link me</button>
<!-- Tag with a dark background -->
<button class="btn btn-tag  btn-tag-dark">Link me</button>
<!-- Rounded tag with a light background -->
<button class="btn btn-tag   btn-tag-light btn-tag-rounded m-r-20">Link me</button>
<!-- Rounded tag with a dark background -->
<button class="btn btn-tag   btn-tag-dark btn-tag-rounded">Link me</button>

Rounded buttons

Any button can be made to have rounded corners by adding .btn-rounded

<!-- Large rounded button -->
<button class="btn btn-lg btn-rounded">Large rounded</button>
<!-- Regular rounded button -->
<button class="btn btn-rounded">Regular</button>
<!-- Small rounded button -->
<button class="btn btn-sm btn-rounded">Small</button>

Modals

Modals are created using Bootstrap Native Modals, they will work as the same way how it works in bootstrap, but it is styled to pages color scheme. To run a Bootstrap Modal, there is no depencies, you do not have to include extra JS or CSS files, To add a modal to pages please reffer following guidelines

Modal Types

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

<!-- Modal -->
<div class="modal fade slide-up disable-scroll" id="modalSlideUp" tabindex="-1" role="dialog" aria-labelledby="modalSlideUpLabel" aria-hidden="false">
    <div class="modal-dialog ">
        <div class="modal-content-wrapper">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                  <i class="pg-close fs-14"></i>
                </button>
                <h5>Heading <span class="semi-bold">here</span></h5>
            </div>
            <div class="modal-body">
                Add Your Content here
            </div>
        </div>
        </div>
        <!-- /.modal-content -->
    </div>
</div>
<!-- /.modal-dialog -->

<!-- MODAL STICK UP  -->
<div class="modal fade stick-up" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header clearfix text-left">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                <i class="pg-close fs-14"></i>
                </button>
                <h5>Payment <span class="semi-bold">Information</span></h5>
                <p>We need payment information inorder to process your order</p>
            </div>
            <div class="modal-body">
                <form class="form-default" role="form">
                    <div class="row">
                        <div class="col-sm-12">
                            <div class="form-group">
                                <label>Company Name</label>
                                <input type="email" class="form-control" >
                            </div>
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-sm-8">
                            <div class="form-group">
                                <label>Card Number</label>
                                <input type="text" class="form-control" >
                            </div>
                        </div>
                        <div class="col-sm-4">
                            <div class="form-group">
                                <label>Card Holder</label>
                                <input type="text" class="form-control" >
                            </div>
                        </div>
                    </div>
                </form>
                <div class="row">
                    <div class="col-sm-9">
                        <div class="b-a b-grey b-rad-sm clearfix p-l-10 p-r-10">
                            <div class="pull-left">
                                <h5 class="semi-bold">TOTAL</h5>
                            </div>
                            <div class="pull-right">
                                <h5 class="light">$20.00</h5>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-3">
                        <button type="button" class="btn btn-primary btn-lg btn-large btn-block" data-dismiss="modal">
                        PAY
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- END MODAL STICK UP  -->

<div class="modal fade slide-right" id="modalSlideLeft" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
    <div class="modal-content-wrapper">
        <div class="modal-content table-block">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true"><i class="pg-close fs-14"></i></button>
            <div class="modal-body v-align-middle text-center   ">
                <h5 class="text-primary ">Before you <span class="semi-bold">proceed</span>, you have to login to make the necessary changes</h5>
                <br>
                <button type="button" class="btn btn-primary btn-block" data-dismiss="modal">Continue</button>
                <button type="button" class="btn btn-default btn-block" data-dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

<div class="modal fade fill-in" id="modalFillIn" tabindex="-1" role="dialog" aria-labelledby="modalFillInLabel" aria-hidden="true">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
    <i class="pg-close"></i>
</button>
<div class="modal-dialog ">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="text-left p-b-5"><span class="semi-bold">News letter</span> signup</h5>
        </div>
        <div class="modal-body">
            <div class="row">
                <div class="col-md-9">
                    <input type="text" placeholder="Your email address here" class="form-control input-lg" id="icon-filter" name="icon-filter">
                </div>
                <div class="col-md-3 text-center">
                    <button type="button" class="btn btn-primary btn-lg btn-large fs-15">Sign up</button>
                </div>
            </div>
            <p class="text-right hinted-text p-t-10 p-r-10">What is it ? Terms and conditions</p>
        </div>
        <div class="modal-footer">
        </div>
    </div>
    <!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>

<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

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>

<div style="width:50%">
    <div class="progress">
        <div class="progress-bar-indeterminate"></div>
    </div>
    </div>
</div>

Color options

In addition to Bootstrap's contextual progress bar classes, Pages has introduced two new classes, .progress-bar-success and .progress-bar-complete if you want to add more color to your project

<div style="width:50%">
    <div class="progress">
        <div class="progress-bar progress-bar-primary" style="width: 35%;"></div>
    </div>
    <div class="progress">
        <div class="progress-bar progress-bar-complete" style="width: 45%;"></div>
    </div>
</div>

Size options

Append .progress-small to .progress to make the progress bars thinner than the usual height

<div style="width:50%">
    <!-- Thinner progress bar -->
    <div class="progress progress-small">
        <div style="width: 45%;" class="progress-bar progress-bar-success"></div>
    </div>
    <!-- Default height -->
    <div class="progress">
        <div style="width: 45%;" class="progress-bar progress-bar-success"></div>
    </div>
</div>

Circular Progress

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

Indeterminate progress

<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

<!-- Show 75% of progress -->
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-color="complete">

Color options

Color options can be set using the data-color attribute. Any contextual color can be included.

<input class="progress-circle" data-pages-progress="circle" value="45" type="hidden" data-color="complete">
<input class="progress-circle" data-pages-progress="circle" value="65" type="hidden" data-color="primary">
<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-color="success">

Size options

Stroke of the circle can be made thicker by setting data-thick="true"

<input class="progress-circle" data-pages-progress="circle" value="75" type="hidden" data-thick="true">

Accordians

Accordians are created using Bootstrap Native Accordians, they will work as the same way how it works in bootstrap, but it is styled to pages color scheme. To run a Bootstrap Accordians, there is no depencies, you do not have to include extra JS or CSS files,To add a modal to pages please reffer following guidelines

Place this HTML code in any Pages html file

<div class="panel panel-group panel-transparent" data-toggle="collapse" id=
"accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-parent="#accordion" data-toggle=
        "collapse" href="#collapseOne">Collapsible Group Item</a>
      </h4>
    </div>
    <div class="panel-collapse collapse" id="collapseOne">
      <div class="panel-body">
        Content Goes here
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="" data-parent="#accordion" data-toggle="collapse" href=
        "#collapseTwo">Typography Variables</a>
      </h4>
    </div>
    <div class="panel-collapse collapse in" id="collapseTwo">
      <div class="panel-body">
        <h4>Try Something neat</h4>
        Content Goes here
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="collapsed" data-parent="#accordion" data-toggle=
        "collapse" href="#collapseThree">Easy Edit</a>
      </h4>
    </div>
    <div class="panel-collapse collapse" id="collapseThree">
      <div class="panel-body">
        Content Goes here
      </div>
    </div>
  </div>
</div>

Tabs

Tabs are created using Bootstrap Native Tabs, they will work as the same way how it works in bootstrap, but it is styled to pages color scheme. To run a Bootstrap Tabs, there is no depencies, you do not have to include extra JS or CSS files, To add a Tabs to pages please reffer following guidelines

Creating a Tab

Place this HTML code in any "Pages" html file

<div class="panel">
  <ul class="nav nav-tabs nav-tabs-simple">
    <li class="active">
      <a data-toggle="tab" href="#tab2hellowWorld">Hello World</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2FollowUs">Hello Two</a>
    </li>
    <li>
      <a data-toggle="tab" href="#tab2Inspire">Hello Three</a>
    </li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="tab2hellowWorld">
      <div class="row column-seperation">
        <div class="col-md-6">
          <h3>
            <span class="semi-bold">Sometimes</span> Small things in life means
            the most
          </h3>
        </div>
        <div class="col-md-6">
          <h3 class="semi-bold">
            great tabs
          </h3>
          <p>
            Native boostrap tabs customized to Pages look and feel, simply
            changing class name you can change color as well as its animations
          </p>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="tab2FollowUs">
      <div class="row">
        <div class="col-md-12">
          <h3>
            “ Nothing is <span class="semi-bold">impossible</span>, the word
            itself says 'I'm <span class="semi-bold">possible</span>'! ”
          </h3>
          <p>
            A style represents visual customizations on top of a layout. By
            editing a style, you can use Squarespace's visual interface to
            customize your...
          </p><br>
          <p class="pull-right">
            <button class="btn btn-white btn-cons" type="button">White</button>
            <button class="btn btn-success btn-cons" type=
            "button">Success</button>
          </p>
        </div>
      </div>
    </div>
    <div class="tab-pane" id="tab2Inspire">
      <div class="row">
        <div class="col-md-12">
          <h3>
            Follow us &amp; get updated!
          </h3>
          <p>
            Instantly connect to what's most important to you. Follow your
            friends, experts, favorite celebrities, and breaking news.
          </p><br>
        </div>
      </div>
    </div>
  </div>
</div>

Tab Orientaion

To change tab orientation, create a tab like before using the above code, add the class nav-tabs-left or nav-tabs-left to nav nav-tabs UL element

<!-- LEFT ORIENTATION -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-left nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>
<!-- RIGHT ORIENTATION -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-right nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>

Tab Styles

To change tab styles, create a tab like before using the first code in Create Tab section, add the class nav-tabs-linetriangle or nav-tabs-fillup to nav nav-tabs UL element

<!-- LINE TRIANGLE -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-linetriangle nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>
<!-- FILL UP ANIMATION -->
<div class="panel">
  <ul class="nav nav-tabs nav-tabs-fillup nav-tabs-simple">
  ....
  </ul>
  <div class="tab-content">
  ....
  </div>
</div>

Sliding Tabs

Append slide-left or slide-right to tab-pane to reveal tab content with a sliding effect

<!-- Nav tabs -->
<ul class="nav nav-tabs">
    <li class="active">
        <a data-toggle="tab" href="#slide1">
            <span>Home</span>
        </a>
    </li>
    <li>
        <a data-toggle="tab" href="#slide2">
            <span>Profile</span>
        </a>
    </li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
    <div class="tab-pane slide-left active" id="slide1">
        ...
    </div>
    <div class="tab-pane slide-right" id="slide2">
        ...
    </div>
</div>

Form Elements

Checkbox controls

Get rid of native look n' feel with our very own custom checkboxes written purely in CSS. These are retina compatible and available in all Bootstrap's contextual classes (ex: .check-primary)

<div class="checkbox check-default">
    <input type="checkbox" checked="checked" value="1" id="checkbox1">
    <label for="checkbox1">Keep Me Signed in</label>
</div>
<div class="checkbox check-success  ">
    <input type="checkbox" checked="checked" value="1" id="checkbox2">
    <label for="checkbox2">I agree</label>
</div>
<div class="checkbox check-primary">
    <input type="checkbox" checked="checked" value="1" id="checkbox3">
    <label for="checkbox3">Mark</label>
</div>
<div class="checkbox check-info">
    <input type="checkbox" checked="checked" value="1" id="checkbox4">
    <label for="checkbox4">Steve Jobs</label>
</div>
<div class="checkbox check-warning">
    <input type="checkbox" checked="checked" value="1" id="checkbox5">
    <label for="checkbox5">Action</label>
</div>
<div class="checkbox check-danger">
    <input type="checkbox" checked="checked" value="1" id="checkbox6">
    <label for="checkbox6">Mark as read</label>
</div>

Shape options

Bored with traditional boxed shape check boxes? Here is a circle one simply add the class .checkbox-circle to change it

<div class="checkbox check-default checkbox-circle">
    <input type="checkbox" checked="checked" value="1" id="checkbox7">
    <label for="checkbox7">Keep Me Signed in</label>
</div>
<div class="checkbox check-success checkbox-circle">
    <input type="checkbox" checked="checked" value="1" id="checkbox8">
    <label for="checkbox8">I agree</label>
</div>
<div class="checkbox check-primary checkbox-circle">
    <input type="checkbox" checked="checked" value="1" id="checkbox9">
    <label for="checkbox9">Mark</label>
</div>

State options

These act the same way as normal HTML check boxes. Here are some states that

<div class="checkbox check-success">
    <input type="checkbox" disabled="disabled" value="check1" name="check" id="check1">
    <label for="check1">Checkbox No. 1</label>
</div>
<div class="checkbox check-success">
    <input type="checkbox" disabled="disabled" checked="checked" value="check2" name="check" id="check2">
    <label for="check2">Checkbox No. 2</label>
</div>

Toggle controls

<div class="radio radio-default">
    <input type="radio" checked="checked" value="yes" name="radio1" id="radio1Yes">
    <label for="radio1Yes">Agree</label>
    <input type="radio" value="no" name="radio1" id="radio1No">
    <label for="radio1No">Disagree</label>
</div>
<div class="radio radio-success">
    <input type="radio" checked="checked" value="yes" name="radio2" id="radio2Yes">
    <label for="radio2Yes">Male</label>
    <input type="radio" value="no" name="radio2" id="radio2No">
    <label for="radio2No">Female</label>
</div>
<div class="radio radio-primary">
    <input type="radio" checked="checked" value="yes" name="radio3" id="radio3Yes">
    <label for="radio3Yes">High</label>
    <input type="radio" value="no" name="radio3" id="radio3No">
    <label for="radio3No">Low</label>
</div>
<div class="radio radio-info">
    <input type="radio" checked="checked" value="yes" name="radio4" id="radio4Yes">
    <label for="radio4Yes">HTML</label>
    <input type="radio" value="no" name="radio4" id="radio4No">
    <label for="radio4No">JS</label>
</div>
<div class="radio radio-warning">
    <input type="radio" checked="checked" value="yes" name="radio5" id="radio5Yes">
    <label for="radio5Yes">Chrome</label>
    <input type="radio" value="no" name="radio5" id="radio5No">
    <label for="radio5No">Firefox</label>
</div>
<div class="radio radio-danger">
    <input type="radio" checked="checked" value="yes" name="radio6" id="radio6Yes">
    <label for="radio6Yes">iOS</label>
    <input type="radio" value="no" name="radio6" id="radio6No">
    <label for="radio6No">Android</label>
</div>

State options

Use of different color opacity helps to destigues between different states such as disable

<div class="radio radio-primary">
    <input type="radio" disabled="disabled" value="Disabled" name="Disabled" id="Disabled">
    <label for="Disabled">Disabled</label>
    <input type="radio" disabled="disabled" checked="checked" value="ADisabled" name="ADisabled" id="ADisabled">
    <label for="ADisabled">Disabled</label>
</div>

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

1. You should have a form tag
2. A label for your input is conditional
3. Both label and input should be wrapped in form-group

example :

<form role="form">
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-default">Submit</button>
</form>

For more detailed documentation of Bootstrap forms

Bootstrap Form Guideline

Pages Default Form Layout

To create a pages default form layout, append the class form-group-default to form-group. But first you must create a bootstrap form Click here to see

<form role="form">
    
    <div class="form-group form-group-default ">
        <label>Project</label>
        <input type="email" class="form-control" required>
    </div>
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>First name</label>
                <input type="text" class="form-control" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>Last name</label>
                <input type="text" class="form-control">
            </div>
        </div>
    </div>
    <div class="form-group form-group-default">
        <label>Password</label>
        <input type="password" class="form-control" required>
    </div>
    <div class="form-group form-group-default">
        <label>Placeholder</label>
        <input type="email" class="form-control" placeholder="ex: some@example.com" required>
    </div>
    <div class="form-group form-group-default disabled">
        <label>Disabled</label>
        <input type="email" class="form-control" value="You can put anything here" disabled>
    </div>
</form>

Pages Attached Form Layout

To create a attached form layout follow the following steps

1. Create a form following the Pages Default Form layout. Attached layout can ONLY be applied to the Pages Default style.
2. Wrap a set of form-group-default elements with form-group-attached

<form role="form">
    <div class="form-group-attached">
        <div class="form-group form-group-default required">
            <label>Project name</label>
            <input type="text" class="form-control" name="projectName" required>
        </div>
        <div class="row clearfix">
            <div class="col-sm-6">
                <div class="form-group form-group-default required">
                    <label>First name</label>
                    <input type="text" class="form-control" name="firstName" required>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group form-group-default">
                    <label>Last name</label>
                    <input type="text" class="form-control" name="lastName">
                </div>
            </div>
        </div>
    </div>
</form>

Pages Horizontal Form Layout

To create a pages default form layout, add the class form-horizontal. First you must create a bootstrap form Click here to see

example :

<form class="form-horizontal" role="form">
...
</form>

Form Validation

Pages is packaged with jQuery Validation Plugin which is currently the de-facto plugin for form validation.

Step one

Include the relevant javascript files inside the <body>before core template script inclusions, if it's not there already.

<script type="text/javascript" src="assets/plugins/jquery-validation/js/jquery.validate.min.js">

Step two

Create the markup.

<form id="myForm" role="form">
    <div class="row">
        <div class="col-sm-6">
            <div class="form-group form-group-default required">
                <label>First name</label>
                <input type="text" class="form-control" name="firstName" minlength="2" required>
            </div>
        </div>
        <div class="col-sm-6">
            <div class="form-group form-group-default">
                <label>Last name</label>
                <input type="text" class="form-control" name="lastName" minlength="2" required>
            </div>
        </div>
    </div>
    <button class="btn btn-primary" type="submit">Register</button>
</form>

Step three

Apply the plugin.

<script>
$(document).ready(function() {
    $('#myForm').validate();
});
</script>

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.

Email

Pages frontend comes with an built in emailing module for contact page, a simple frontend validation and a popular libray called PHPMailer. Mailing is demonstrated in the contact.html page in every sample.

Setting Up Email to work on Contact Page

Step one

Open up _lib/mail.php

Step Two

Change the relavent Attributes to your needs

$mail->Host = 'smtp.gmail.com';                // Specify main and backup server (this is a fake name for the use of this example)             
$mail->Username = 'xx@gmail.com';                  // SMTP username
$mail->Password = '';                         // SMTP password
$mail->SMTPSecure = 'tls';                          // Enable encryption, 'ssl' also accepted                                   
$mail->Port = 587; 

Currently the form is setup to do all the task with zero configuration, you can open up assets/js/contact.js to play around and do advance configurations for your needs.

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.

Fortunately there are browser developer tools to inspect and debug JavaScript errors.

Community

Joing the commnunity to find answers, ask questions and collaborate with the support team to create a knowledge base for future references, there are tutorials, questions and faq. Help Community

Support

You can request for support via email or themeforest comments

We will assist you any problem you face while buidling your app via Pages framework