Uplaunch Bootstrap

Thank you for purchasing Appkit and the confidence you have placed in Dart Simple Solutions.

In this document, you will find an in-depth description of all Appkit's features and functionality. If you have any questions not attended to by our template documentation, please contact us so our team can assist you. If you like our template, please leave your feedback and join us on Facebook or your other favorite social network! We are looking forward to hearing back from you, and to improving further this and many other templates in our portfolio.

Online documentation is updated regularly and is available online to you free of charge on our website at http://doc.dartsimple.com/uplaunch-bootstrap

Developer website: http://www.dartsimple.com

Customer service: http://www.dartsimple.com/contact-us/

 

Theme Structure

Files

The following files are included in the Uplaunch Bootstrap Theme:

  • x7 HTML Files
  • x1 Main Page Layout
  • x1 About Us Page
  • x1 Blog Page
  • x1 Blog Single Page
  • x1Checkout Page
  • x1Checkout Login Page
  • x1 FAQ Page

 

Folder Structure

Project structure was carefully thought all throughout early on in the planning stage to ensure  logical flow of all parts. Complete list of all project-related folders, files and documents can be found below.

.

├── assets

│   └── plugins

│       ├── bootstrap

│       │   ├── dist

│       │   │   ├── css

│       │   │   ├── fonts

│       │   │   └── js

│       │   ├── fonts

│       │   ├── grunt

│       │   ├── js

│       │   ├── less

│       │   │   └── mixins

│       │   └── nuget

│       ├── bootstrap-carousel-swipe

│       ├── font-awesome

│       │   ├── css

│       │   └── fonts

│       ├── inputmask

│       ├── jquery

│       │   ├── dist

│       │   ├── external

│       │   │   └── sizzle

│       │   │       └── dist

│       │   └── src

│       │       ├── ajax

│       │       │   └── var

│       │       ├── attributes

│       │       ├── core

│       │       │   └── var

│       │       ├── css

│       │       │   └── var

│       │       ├── data

│       │       │   └── var

│       │       ├── deferred

│       │       ├── effects

│       │       ├── event

│       │       ├── exports

│       │       ├── manipulation

│       │       │   └── var

│       │       ├── queue

│       │       ├── traversing

│       │       │   └── var

│       │       └── var

│       ├── jquery-drawsvg

│       ├── jquery_appear

│       ├── parallax

│       └── pushy

├── css

├── favicon

├── fonts

├── images

│   ├── avatars

│   ├── collection-screen

│   ├── icon

│   ├── logo

│   ├── more-product-screen

│   ├── next-pages

│   ├── parallax

│   └── photo

├── js

└── video

Project Folders

Folder Name

Description

Assets

Stores all included files like fonts, icons, plugins.

CSS

Stores all .css files generated from .scss files and custom.css.

Images

Stores all images.

JS

Stores min.js file minified from all plugins, ds-scripts.js and custom.js.

SCSS

Stores all .scss files.

Video

Stores all video files.

 

Customization

Intro

The HTML structure of all our projects is split in logically organized sections that are easy to navigate. Below you will find listed each HTML section, starting from Header and ending with Footer, referencing the list of customizable settings available for each of them. In cases where additional options or settings are not provided by any given section's customization concept - HTML code and its structure is somewhat simplified. Given intuitive and logical flow of our code, you will be able to further adjust and customize it further with basic knowledge of HTML, CSS, JS.

Uplaunch theme follows an easy-to-use method of customization via HTML classes, so you can quickly tweak the code and adjust the appearance of your website. All customizable elements, relevant snippets of code and classes to be adjusted are listed below for your convenience.

Additionally, we regularly update and expand our templates with useful CSS classes. Uplaunch includes base-sizing.css file, which contains many useful features to help you customize your website and even create additional HTML blocks.

Logo Image

Please use the class "branding-logo" to change the logo image in the template. For example:

<a class="branding-logo"href="./">

<div class="logo">

<img src="./images/your-logo.png" alt="logo">

</div>

</a>

Color Schemes

For your convenience, we've prepared many color schemes that were tested to look great in the theme. To change color scheme, please add any of the color classes listed below to the <body> tag. Full listing of color classes is also available in the template.css file, for example.theme-red or .theme-black     

Full list of color classes with color samples is presented below:

Class

Theme Color

theme-black

 

theme-blue-grey

 

theme-grey

 

theme-brown

 

theme-deep-orange

 

theme-orange

 

theme-amber

 

theme-yellow

 

theme-lime

 

theme-light-green

 

theme-green

 

theme-teal

 

theme-cyan

 

theme-light-blue

 

theme-blue

 

theme-indigo

 

theme-deep-purple

 

theme-purple

 

theme-pink

 

theme-red

 

Height Classes

These height classes are all in pixels and they can be adjusted in increments of 10, beginning with 0 and ending with 700px. These heights are generally added to the page-header block, which will use your predefined height. The classes are:

.hsize-full {height:100% !important;} /* full height */
.hsize-reset {height:0 !important;} /* height zero */
.hsize-10 {height:10px;}
.hsize-20 {height:20px;}
...
.hsize-100 {height:100px;}
.hsize-110 {height:110px;}
.hsize-120 {height:120px;}
...
.hsize-200 {height:200px;}
.hsize-210 {height:210px;}
.hsize-220 {height:220px;}
...
.hsize-300 {height:300px;}
.hsize-310 {height:310px;}
.hsize-320 {height:320px;}
...
.hsize-400 {height:400px;}
.hsize-410 {height:410px;}
.hsize-420 {height:420px;}
...
.hsize-500 {height:500px;}
.hsize-510 {height:510px;}
.hsize-520 {height:520px;}
...
.hsize-600 {height:600px;}
.hsize-610 {height:610px;}
.hsize-620 {height:620px;}
...
.hsize-700 {height:700px;}

Breakpoint classes listed below are being used to facilitate valid responsive layout on smaller devices:

  • .hsize-md-10 or hsize-md-190 or hsize-md-380 for medium screens (1200px) and below, (covering both small and extra small.)
  • .hsize-sm-10 or hsize-sm-90 or hsize-sm-380 for small screens (991px) and below, (covering extra small too.)
  • .hsize-xs-10 or hsize-xs-90 or hsize-xs-380 for extra small screens (767px) and below.

You can thus enjoy different heights for each breakpoint (and for each different device), like class=”hize-290 hsize-md-150″, meaning it’s 290px in height on large desktops and 150px on medium and smaller screens.

 

Width Classes

Width classes presets are only added as percentages and range from 10 to 100% until full width. The classes are:

.w-10 {width:10% !important;}
.w-15 {width:15% !important;}
.w-20 {width:20% !important;}
.w-25 {width:25% !important;}
.w-30 {width:30% !important;}
.w-35 {width:35% !important;}
.w-40 {width:40% !important;}
.w-45 {width:45% !important;}
.w-50 {width:50% !important;}
.w-55 {width:55% !important;}
.w-60 {width:60% !important;}
.w-65 {width:65% !important;}
.w-70 {width:70% !important;}
.w-75 {width:75% !important;}
.w-80 {width:80% !important;}
.w-85 {width:85% !important;}
.w-90 {width:90% !important;}
.w-95 {width:95% !important;}
.w-100 {width:100% !important;} /* full width */
.w-init {width:initial !important;} /* initial width */

Additional breakpoint classes are available for smaller devices. For example:

  • .w-md-10 or w-md-90 for medium screens (1200px) and below, covering both small and extra small.
  • .w-sm-10 or w-sm-90 for small screens (991px) and below, covering extra small too.
  • .w-xs-10 or w-xs-90 for extra small screens (767px) and below

Please recall that you can have different widths for each breakpoint, such as,class=”w-90 w-md-50″ which means it’s 90% in width on large desktops and 50% (half) on medium and smaller screens.

 

Text Align

Text align presets are left, right and center

The classes are:

.text-center {text-align: center;}
.text-right {text-align: right;}
.text-left {text-align: left;}

Further breakpoint classes are available for small and extra-small devices. For example:

.text-xs-center {text-align: center;}
.text-xs-right {text-align: right;}
.text-xs-left {text-align: left;}

Position Classes

Position classes can be used to set element’s position as follows:

.pos-init {position: initial !important;}
.pos-fixed {position: fixed !important;}
.pos-abs {position: absolute !important;}
.pos-rel {position: relative !important;}

You can also set positions even on responsive breakpoints as you’ll see below.

.pos-xs-fixed {position: fixed !important;}
.pos-sm-abs {position: absolute !important;}
.pos-md-rel {position: relative !important;}

Lists with Columns

A list can be divided into multiple columns by simply adding the attribute data-columns=”#”. For example a list with 3 columns looks like this:

<ul data-columns="3">
<li>...</li>
....
</ul>

Now, if you want to reset the list on smaller screens in a responsive solution, the list can be reset with the classes .list-col-reset-md .list-col-reset-sm .list-col-reset-xs

For example:

<ul class="list-col-reset-sm"data-columns="3">
<li>...</li>
....
</ul>

In the example above, the list will reset itself (no columns) when the screen width reaches the sm breakpoint which is 991px.

Float & Float Clearing Classes

The following codes are from Bootstrap library but they are very useful to know.

.pull-left {float:left}
.pull-right {float:right}
.pull-none {float:none !important;} /* not in bootstrap, added in this template */

Example for small device breakpoint:

.pull-none-sm {float:none !important;}

You can also clear the floats even on responsive breakpoints:

.cleft-sm {clear:left;}
.cright-sm {clear:right;}
.cboth-sm {clear:both;}
.clear-init-sm {clear:initial;}

And, for example, on medium breakpoint see below.

.cleft-md {clear:left;}
.cright-md {clear:right;}
.cboth-md {clear:both;}
.clear-init-md {clear:initial;}

Button Paddings

There are 3 padding classes for buttons: .mid-padding .big-padding and .long-padding. They’re commonly used whenever a button should break the pattern of standard button.

Although it’s rarely the case, buttons can also be resized with responsive breakpoints. For example:  .btn.mid-padding-md, .btn.big-padding-md or .btn.long-padding-xs (and so on):

.btn.mid-padding-md {padding: 10px 20px; line-height:1;}
.btn.big-padding-md {padding: 15px 30px; line-height:1;}
.btn.long-padding-md {padding-left: 30px; padding-right:30px;}
.btn.mid-padding-md {padding: 10px 20px; line-height:1;}
.btn.big-padding-md {padding: 15px 30px; line-height:1;}
.btn.long-padding-md {padding-left: 30px; padding-right:30px;}

Border Radius

There are border radius classes for all elements: .br.

For example:

.br-md-0 {border-radius:0 !important;}
.br-md-1 {border-radius:1px !important;}
.br-md-2 {border-radius:2px !important;}
.br-md-3 {border-radius:3px !important;}
.br-md-4 {border-radius:4px !important;}
.br-md-5 {border-radius:5px !important;}

They go from 0 to 20 and 30, 40, 50 after. You can use them with adaptive classes.

Opacity

You can set opacity with this class:

.op-md-0 {opacity:0 !important;}
.op-md-1 {opacity:0.1 !important;}
.op-md-2 {opacity:0.2 !important;}
.op-md-3 {opacity:0.3 !important;}
.op-md-4 {opacity:0.4 !important;}
.op-md-5 {opacity:0.5 !important;}
.op-md-6 {opacity:0.6 !important;}
.op-md-7 {opacity:0.7 !important;}
.op-md-8 {opacity:0.8 !important;}
.op-md-9 {opacity:0.9 !important;}
.op-md-10 {opacity:1 !important;}

Z-index Classes

Z-index classes set z-index

.z-md-0 {z-index: 0 !important;}
.z-md-1 {z-index: 1 !important;}
.z-md-2 {z-index: 2 !important;}
.z-md-3 {z-index: 3 !important;}

Resets Classes:

Resets classes are for reseting different styles

/* Resets */
.bd-md-0 {border:0 !important;}
.bg-trans-md {background:transparent !important;}
.l-md-0 {left:0 !important;}
.r-md-0 {right:0 !important;}
.b-md-0 {bottom:0 !important;}
.t-md-0 {top:0 !important;}
.lower-case-md{text-transform: initial !important;}

Margins and Paddings

Inside css/base-sizing.css you will find a number of predefined classes. Below we describe margins and paddings.

Predefined classes for margins and paddings are necessary to ensure consistency in spacing while providing customers with sufficient flexibility.

Settings for left/right margins, paddings and negative margins are available in the following increments:

5px, 10px, 15px, 20px, 25px, 30px, 35px, 40px, 45px, 50px

60px, 70px, 80px, 90px, 100px, 110px, 120px, 130px, 140px, 150px

In addition to the above values, top and bottom margins and paddings can be also set to 200px and 250px.

 

Sample code for margins:

Top: mt-##, example classes: mt-20, mt-40, mt-100 etc.

Bottom: mb-##, eg: mb-20, mb-40, mb-100 etc.

Left: ml-##, eg: ml-20, ml-40, ml-100 etc.

Right: mr-##, eg: mr-20, mr-40, mr-100 etc.

 

Sample code for paddings:

Top: pt-##, example classes: pt-20 , pt-40, pt-100 etc.

Bottom: pb-##, eg: pb-20, pb-40, pb-100 etc.

Left: ml-##, eg: pl-20, pl-40, pl-100 etc.

Right: pr-##, eg: pr-20, pr-40, pr-100 etc.

 

Negative margins can be used for extra complex structures and layouts. As follows from their name, these negative margins will add spaces reversely.

 

Sample code for negative margins:

Top: mnt-##, example classes: mnt-20 , mnt-40, mnt-100 etc.

Bottom: mnb-##, eg: mnb-20, mnb-40, mnb-100 etc.

Left: mnl-##, eg: mnl-20, mnl-40, mnl-100 etc.

Right: mnr-##, eg: mnr-20, mnr-40, mnr-100 etc.

Auto: mg-auto

 

Responsive Layout

To facilitate fully adaptive layout, we've introduced extra breakpoint classes that will take over when pages are viewed in certain resolutions.

For example, with large screens just leave the default class, eg: class="mt-100", which will add a top margin of 100px automatically.

For other screens, add the screen’s breakpoint classes, which are: md (medium devices), sm (small devices), xs (extra small devices), which can be combined for greater flexibility:

For medium screens and below: use mt-md-100, for example, class="mt-100 mt-md-60", which means that a 60px top margin will take over the default 100px margin whenever browser width is set to 1200px.

For small screens and below: use mt-sm-100, for example class="mt-100 mt-md-60 mt-sm-40", which means that a 40px top margin will take over the default 100px margin whenever browser width is set to 991px.

For extra small screens and below (eg smartphones): use mt-xs-100, for example class="mt-100 mt-md-60 mt-sm-40 mt-xs-20", which means that a 20px top margin will take over the default 100px margin whenever browser width is set to 767px.

Classes

Description

hsize-(number)

Change height custom code

w-(number)

Change with custom code

pos-(init/fixed/abs/rel)

Change position custom code

pull-(left/none/right)

Pull element to side

Cleft

Clear everything left sided from element

Cright

Clear everything right sided from element

Cboth

Clear everything both sided from element

zoom-image

Make image zooming on hover

op-(number)

Change opacity custom code

br-(number)

Change border radius custom code

z-(0/1/2/3)

Change z-index custom code

 

Typography Classes

We pay special attention to typography. In our opinion, it is one of the key qualities of an effective template. Uplaunch comes with a truly impressive package of typography elements, which we cover below.

A number of predefined classes can be found inside the CSS/base-sizing.css stylesheet.

Font sizing

Because there’s a wide variety of popular headings and custom font sizes, we've added predefined sizing classes as follows.

.fs-micro {font-size:9px;}
.fs-xsmall {font-size:11px;}
.fs-normal {font-size:13px;}
.fs-smaller {font-size:15px;}
.fs-small {font-size:16px;}
.fs-m {font-size:18px;}
.fs-l {font-size:20px;}
.fs-xl {font-size:24px;}
.fs-xxl {font-size:32px;}
.fs-larger {font-size:42px;}
.fs-xxxl {font-size:56px;}
.fs-xxxxl {font-size:75px;}
.fs-jumbo {font-size:80px;}
.fs-huge {font-size:120px;}
.fs-crazy {font-size:200px;}

These classes can be used as follows:

<h4 class="fs-xxl">I'm a heading and I'm 32px sized </h4>

To facilitate responsive layout and eliminate display errors between various screen sizes, we also introduced breakpoint naming as follows:

.fs-smaller {font-size:15px;}
.fs-md-smaller --//--
.fs-sm-smaller --//--
.fs-xs-smaller --//--

.fs-m {font-size:18px;}
.fs-md-m --//--
.fs-sm-m --//--
.fs-xs-m --//--

.fs-xxl {font-size:32px;}
.fs-md-xxl --//--
.fs-sm-xxl --//--
.fs-xs-xxl --//--

.fs-jumbo {font-size:80px;}
.fs-md-jumbo --//--
.fs-sm-jumbo --//--
.fs-xs-jumbo --//--

This ensures consistency of font sizes relative to screen sizes, while maintaining responsive typography.

For example:

<h4 class="fs-xxl fs-md-l fs-sm-small fs-xs-micro">In'm a heading, Ii normally have 32px on desktops, 20px on me-dium screens like big tablets, then 16px on small screens like small tablets, and 9px on tiny screens like smart-phones. I'm so flexible!! </h4>

 

CSS Structure

Our projects maintain extended file structure with intuitive hierarchy of CSS documents and Uplaunch is no exception to this rule. Full list of stylesheet files is available below for your review.

CSS Initialization

You are able to further customize the template by enabling or disabling many of Uplaunch's stylesheets as necessary. You can do so by commenting out the code or deleting relevant lines altogether. List of stylesheets available in Uplaunch follows below:

Plugins and fonts are initialized inside the <head> tag as follows:

<!-- bootstrap-->
<link rel="stylesheet"type="text/css"href="./assets/plugins/bootstrap/dist/css/bootstrap.min.css">
<!-- font awesome-->
<link rel="stylesheet"type="text/css"href="./assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- pushy plugin-->
<link rel="stylesheet"type="text/css"href="./assets/plugins/pushy/pushy.css">
<!-- base-sizing-->
<link rel="stylesheet"type="text/css"href="./assets/plugins/base-sizing.css">
<!-- template-->
<link rel="stylesheet"type="text/css"href="./css/template.css">
<!-- color change-->
<link rel="stylesheet"type="text/css"href="./css/color-change.css">

You are able to further customize the template by enabling or disabling many of Uplaunch's stylesheets as necessary. You can do so by commenting out the code or deleting relevant lines altogether. List of stylesheets available in Uplaunch follows below:

Plugins and fonts are initialized inside the <head> tag as follows:

<!-- bootstrap-->
<link rel="stylesheet"type="text/css"href="./assets/plugins/bootstrap/dist/css/bootstrap.min.css">
<!-- font awesome-->
<link rel="stylesheet"type="text/css"href="./assets/plugins/font-awesome/css/font-awesome.min.css">
<!-- pushy plugin-->
<link rel="stylesheet"type="text/css"href="./assets/plugins/pushy/pushy.css">
<!-- base-sizing-->
<link rel="stylesheet"type="text/css"href="./assets/plugins/base-sizing.css">
<!-- template-->
<link rel="stylesheet"type="text/css"href="./css/template.css">
<!-- color change-->
<link rel="stylesheet"type="text/css"href="./css/color-change.css">

Stylesheets

The following stylesheets are available in the theme:

File Name

Description

bootstrap.min.css

Default bootstrap style

base-sizing.css

This stylesheet holds preset classes that are duplicated for each main media resolution breakpoint (xs , sm , md , lg). This offers immense customization power with just a few classes added to a certain block or element

pushy.css

Pushy is a responsive off-canvas navigation menu using CSS transforms & transitions

font-awesome.css

Font awesome icons

color-change.css

Additional color fixes

template.css

The main stylesheet which contains almost everything that the template is styled upon

Base-sizing.css stylesheet

This stylesheet holds preset classes that are duplicated for each main media resolution breakpoint (xs , sm , md , lg). This offers immense customization power with just a few classes added to a certain block or element.

 

A brief list of class groups inside:

  • Margin classes

Example: mt-20 (margin-top:20px), ml-40 (margin-left:40px), mr-60 (margin-right:60px), mb-80 (margin-bottom:80px)

Example on small screens: mt-sm-20 (margin-top:20px), ml-sm-40 (margin-left:40px), mr-sm-60 (margin-right:60px), mb-sm-80 (margin-bottom:80px)

  • Negative Margin classes (left, right, top, bottom)

They are named “mnl-10” or “mnl-md-10” (margin negative left or margin negative top etc.)

  • Padding Classes (left, right, top, bottom)

Named “pb-10” or “pb-xs-10” (padding bottom)

  • Font-sizes-presets (fs-small, fs-xxl etc.)

For smaller screens: fs-sm-small, fs-sm-xxl .

  • Height Sizing Presets

These are height values from 10 to 10 to set responsive height to a block.

Example: hsize-110 or hsize-160 etc.

Example for smaller screens: hsize-md-110 or hsize-sm-110 or hsize-xs-110

  • Float & Float Clearing Presets
  • Width presets
  • Button Padding classes
  • Column list reset class
  • Text align class

We highly recommend you taking a thorough look overall in the stylesheet while keeping in mind what’s inside and what you can use from it.

Use of these presets is demonstrated below for your convenience:

<div class="mt-100 mt-sm-50">
This block will have a 100px margin-top (on any resolution)
Also because mt-sm-50 is added, the top margin becomes 50px on resolutions smaller than 992px
</div>

or

<h3 class="fs-xxl fs-xs-small">
This heading has 36px by default (because of the fs-xxl class) but on mobile devices (767px and smaller) the font-size will become 16px. We solved both mobile layout problems and also reduced several lines of code.
</h3>

Template.css stylesheet

This is the main stylesheet that contains almost everything that the template is styled upon. Please keep in mind that any changes you make in this file may impact the entire template, and we highly recommend that you don't edit this file. instead, please add your own CSS code into custom.css stylesheet.

The template itself serves as a database of examples of HTML markup and CSS styles applied. In the styles menu pages you can see there is a number of examples of the classes and styles added to the page elements. Please review the file extensively to gain a thorough understanding of its contents before making changes. If you don’t time for such review, you may opt in favor of a simpler copy/paste of the code from existing HTML files and then debugging styles using the Chrome Developer Tools.

Search selectors

For large CSS documents we use a library with specific titles and subtitles designed for each specific section and subsection to simplify your searches throughout the code. To find any specific part of the code, please do a search for any of the titles and subtitles, which are listed below in-full for your convenience.

Stylesheets selectors used in the template:

 *   #Template

*     - Default settings

*     - Custom classes

*     - Header

*     - Footer

*     - Section Blocks

*     - Marks With Tooltips

*     - Customizer

*     - List of pages

*     - Responsibility

*     - Compatibility

Grid

To ensure our templates are 100% responsive, we use Bootstrap grid and framework (http://getbootstrap.com/css/).

 

 

Metatags

In each page’s head section you will see a comprehensive list of meta tags that may come in handy down the road in helping Google crawlers make sense of your web-pages, thus improving your pages' relevance and consequently helping your website rank better in search results. Please uncomment those meta tags that you deem relevant and applicable to your website.

<!-- Personal Meta tags-->
<meta charset="UTF-8">
<meta name="title"content=""><!--[if IE]>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><![endif]-->
<meta name="viewport"content="width=device-width,initial-scale=1.0,maximum-scale=1">
<!-- Meta descriptions-->
<meta name="keywords"content="premium template, ds template, dart simple">
<meta name="description"content="Dart Simple Solutions - Premium template">
<!-- Restrict google from scanning info from Dmoz or YahooDir-->
<meta name="robots"content="noodp,noydir">
<!-- Author markup-->
<meta name="author"content="Dart Simple Solutions - Premium Wordpress template">
<meta name="copyright"content="Dart Simple Solutions">
<meta name="theme-color"content="#ffffff">
<!--[if gte IE 6]>
<script src="assets/plugins/html5shiv.js"type="text-javascript"></script>
<script src="assets/plugins/respond.min.js"type="text-javascript"></script>
<![endif]-->

 

JavaScript Structure

When creating the project, we rely both on our own code, as well as on open-source plugins developed by third-parties. In this section, you will find detailed information on relevant plugins and their functions.

JavaScript File and Folder Structure:

…

├── js/

    └── app.js

…

Plugin Initialization

Plugins are initialized and can be edited in the lower part of the code for each HTML file.

<!-- JavaScript-->
<!-- fix console.log for IE-->
<script src="assets/plugins/consoleFix.js"type="text/javascript"></script>
<!-- jQuery scripts-->
<script src="assets/plugins/jquery/dist/jquery.min.js"type="text/javascript"></script>
<!-- bootstrap scripts-->
<script src="assets/plugins/bootstrap/dist/js/bootstrap.min.js"></script>
<!-- modernizr-->
<script src="assets/plugins/modernizr.js"type="text/javascript"></script>
<!-- pushy plugin scripts-->
<script src="assets/plugins/pushy/pushy.min.js"></script>
<!-- swipe carousel scripts-->
<script src="assets/plugins/bootstrap-carousel-swipe/carousel-swipe.js"></script>
<!-- jQuery parallax scripts-->
<script src="assets/plugins/parallax/jquery.parallax.min.js"></script>
<!-- svg icons animation-->
<script src="assets/plugins/jquery-drawsvg/jquery.drawsvg.min.js"></script>
<!-- implements a custom appear/disappear events which are fired when an element became visible/invisible in the browser viewport-->
<script src="assets/plugins/jquery_appear/jquery.appear.js"></script>
<!-- input masks-->
<script src="assets/plugins/inputmask/inputmask.min.js"></script>
<script src="assets/plugins/inputmask/jquery.inputmask.min.js"></script>
<script src="assets/plugins/jquery.matchHeight.js"></script>
<!-- google maps api key-->
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCvpH7_ggEW5MYLRO8EN1BbJak4u2uIvaA"></script>
<!-- template script-->
<script src="js/app.js"type="text/javascript

 

All Plugins

Plugin

Description

Official Web Address

jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

jquery.com

Bootstrap

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

getbootstrap.com

Pushy.js

Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.

github.com/christophery/pushy

Carousel Swipe

Carousel Swipe adding swipe support for all bootstrap carousels.

getbootstrap.com/javascript

jQuery Parallax

Parallax Engine that reacts to the orientation of a smart device. Where no gyroscope or motion detection hardware is available, the position of the cursor is used instead.

github.com/wagerfield/parallax

jQuery DrawSvg

This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg>element, using stroke-dasharray and stroke-dashoffset properties.

leocs.me/jquery-drawsvg

Appear.js

Track the visibility of dom elements and fire user defined callbacks as they appear and disappear.

creativelive.github.io/appear

Inputmask

Inputmask is a javascript library which creates an input mask. Inputmask can run against vanilla javascript, jQuery and jqlite. It helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, etc.

github.com/RobinHerbots/Inputmask

MatchHeight

matchHeight makes the height of all selected elements exactly equal

brm.io/jquery-match-height

consoleFix

Fixing console logs for IE

gist.github.com/peteboere/4147923

modernizr

Modernizr tells you what HTML, CSS and JavaScript features the user’s browser has to offer.

modernizr.com

HTML5shiv

This script is the defacto way to enable use of HTML5 sectioning elements in legacy Internet Explorer

github.com/aFarkas/HTML5shiv

Respond

A fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more)

github.com/scottjehl/Respond

Frameworks

The following frameworks are used in the theme:

Framework

Official Web Address

Twitter Bootstrap v3

getbootstrap.com

jQuery

jquery.com

 

Credits

JavaScript
  • jQuery - jquery.com
  • Bootstrap 3 - getbootstrap.com
  • js - github.com/christophery/pushy
  • Carousel Swipe - getbootstrap.com/javascript
  • jQuery Parallax - github.com/wagerfield/parallax
  • jQuery DrawSvg - leocs.me/jquery-drawsvg
  • js - creativelive.github.io/appear
  • InputMask - github.com/RobinHerbots/Inputmask
  • MatchHeight - brm.io/jquery-match-height
  • consoleFix - gist.github.com/peteboere/4147923
  • modernizr - modernizr.com
  • HTML5shiv - github.com/aFarkas/html5shiv
  • Respond - github.com/scottjehl/Respond
CSS
  • Bootstrap 3 - getbootstrap.com
  • js - github.com/christophery/pushy
  • Font Awesome - fontawesome.io
Images
  • Thestocks - thestocks.im
  • Depositphotos - depositphotos.com