# Hub HTML Template Documentations

## Basics

This guide assumes basic knowledge of HTML, CSS and Javascript.

All of the template files will be delivered in a zip file. Simply extract the zip file, import it to your favorite text editor and it's ready for your customizations.
We recommend Visual Studio Code

If you had any problems, please submit a ticket here

#### Tips

Due to some security restrictions some features might not work correctly when you directly open HTML files on your machine. But everything should work fine on a localhost or when you upload your files on a server.
Do not start from scratch. Use an existing page or a section and start from there.

#### Files structure

Here's how the strucure of Hub HTML Template assets strucure is:

    assets
    	-- css
    		-- demo
    	-- fonts
    	-- images
    	    -- common
    	    -- demo
    	-- js
    	-- json
    	-- php
    	-- vendors
        -- videos

css: All css files you'll need for the template.
css/demo: Contains css files for different demos.
fonts: Containing all custom fonts we used in the template.
images: All images are inside this folder.
images/common: Common images in different demos are here.
images/demo: Containing demos specific images.
js: Containing all javascript files used in the template.
json: JSON files, such as Lottie files are here.
php: Containing config files for features such as contact forms etc.
vendors: Vendor plugins we've used in the template, but provided separately.
videos: You can find all videos in this folder.

## Terminology

Let's get familiar with some of terminologies used throuout of this documentation.

### References

Elements - Tags: Elements or `<tag>`s are basically what making an HTML page. e.g.

- `<div>` tags are used to define a page division. May also be referred as `div`

      										<div class="container">
      ...
      </div>

- `<a>` In HTML links are defined with this tag.

      										<a href="https://example.com">
      ...
      </a>

.class: Referring to any element with the specified class.

- `.accordion` Is referring to any element with accordion class name.

      											<div class="accordion">
      	...
      </div>

element.class: Referring to an element by tag with the specified class.

- `h4.accordion-title` Is referring to h4 element with accordion-title class name.

      											<h4 class="accordion-title">
      ...
      </h4>

### Data Attributes

Data attributes are mostly used to initiate a pluin. Or storing options of that plugin. Let's say we want to make an element to be parallax. We can initiate parallax on that element by adding `data-parallax="true"`.

- In this example we'll parallax a `<figure>` element in Y axis from 100px to -100px from it's original place.

      										<figure data-parallax="true" data-parallax-from='{"y": 100}' data-parallax-to='{"y": -100}' data-parallax-options='{"overflowHidden": false}'>
      	<img src="./assets/images/my-image.jpg"  alt="Hub"/>
      </figure>

##### Plugin Options

You'll see through the template we've used data attributes the way that might be not familiar. For example look at `data-parallax-from`, `data-parallax-to` or `data-parallax-options`.

These data-attributes are used just for passing data to the plugin we're initiating, Or think of it as plugin options. Please also pay attention to the format.

Here values passed to data-attributes must be in valid JSON format. Basically each key need to be quoted. For example `"y"` is quoted here. but for the value, because it's a number, we don't need quotes. Please also pay attention data attributes are using single-quote (`'`). It means the JSON data which is between curly braces (`{}`) must be wrapped with single-quotes.

## Elements and features

We'll go you through pretty much all elements, shortcodes and features available in Hub and we'll give you a boilerplate for each shortcodes so you can easily copy/paste codes and they're ready to use.

Beside this, we'll add requirements for what's neccessary for each shortcde to make it work if you're going to start from scratch. So you can find some information here if you got into some issues.

Plus, we'll add modifiers for each shortcodes. To change the look of each shortoce. Please keep in mind that all modifiers on an element may not work well or as expected together. So please refer to the demos and we provided.

### CSS Variables

In Hub we used css variables, mostly to apply colors. This will make changing colors, such as website's primary color, so much easier than before.

As you can see in most of theme css files, from assets/css/themes.css all css variables are define in the :root pseudo-class. For Example:

    								:root {
        --lqd-color-primary: #184341;
        --lqd-color-secondary: #54595F;
        --lqd-color-link: #5b7bfb;
        --lqd-color-link-hover: #181b31;
        --lqd-color-gradient-start: #007fff;
        --lqd-color-gradient-stop: #ff4d54;
    }

--color-primary is used pretty much in all places. It'll define the accent color of the theme. As you see for buttons, icon colors etc.

### Header

Main header markup is going to be like this

    								<header id="site-header" class="main-header">
    	<!-- CONTENT HERE -->
    </header>

##### Overlay header

Overlay headers are useful when you want to make the header be on top of the page content.

In order to have an overlay header, simply add `main-header-overlay` classname to the header

##### Sticky header

To make the header sticky simply add `data-sticky-header="true"` and `data-sticky-values-measured="false"` to the header

There are some options you can pass for the sticky header. All the option must be passed to `data-sticky-options`. Please check Data Attributes section to see how to use plugin options.

- stickyTrigger: `this`, `first-section` to make the header stick after passing the header itself or the first section in the page
- disableOnMobile: `true`, `false`
- smartSticky: `true`, `false` to make the header stick and visible only when user scrolls up

##### Sub menus

in order to have a submenu:

1. add a class of `menu-item-has-children` to the `li` element
2. add the submenu markup right next to the link element

    								<li class="menu-item-has-children">
    	<a href="#wrap">
    		<span>Pages</span>
    		<span class="submenu-expander">
    			<svg xmlns="http://www.w3.org/2000/svg" width="21" height="32" viewBox="0 0 21 32" style="width: 1em; height: 1em;">
    				<path fill="currentColor" d="M10.5 18.375l7.938-7.938c.562-.562 1.562-.562 2.125 0s.562 1.563 0 2.126l-9 9c-.563.562-1.5.625-2.063.062L.437 12.562C.126 12.25 0 11.876 0 11.5s.125-.75.438-1.063c.562-.562 1.562-.562 2.124 0z"></path>
    			</svg>
    		</span>
    		<sup class="link-sup">04</sup>
    	</a>
    	<ul class="nav-item-children">
    		<li>
    			<a href="#">What we do</a>
    		</li>
    	</ul>
    </li>

also note the `.submenu-expander` element. that's necessary for mobile dropdown trigger

### Accordions

Accordions are useful when you want to toggle between hiding and showing large amount of content.

    								<div class="accordion" id="accordion-1" role="tablist">

    	<div class="accordion-item panel active">

    		<div class="accordion-heading" role="tab" id="heading_accordion-collapse-1">
    			<h4 class="accordion-title">
    				<a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-collapse-1" aria-expanded="true" aria-controls="accordion-collapse-1">
    					Accordion Item 1
    					<span class="accordion-expander">
    						<i class="fa fa-angle-down"></i>
    						<i class="fa fa-angle-up"></i>
    					</span>
    				</a>
    			</h4>
    		</div><!-- /.accordion-heading -->
    		<div id="accordion-collapse-1" class="accordion-collapse collapse in" role="tabpanel" aria-labelledby="heading_accordion-collapse-1">
    			<div class="accordion-content">
    				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    			</div><!-- /.accordion-content -->
    		</div><!-- /.accordion-collapse -->

    	</div><!-- /.accordion-item -->

    	<div class="accordion-item panel">

    		<div class="accordion-heading" role="tab" id="heading_accordion-collapse-2">
    			<h4 class="accordion-title">
    				<a data-toggle="collapse" data-parent="#accordion-1" href="#accordion-collapse-2" aria-expanded="false" aria-controls="accordion-collapse-2">
    					Accordion Item 2
    					<span class="accordion-expander">
    						<i class="fa fa-angle-down"></i>
    						<i class="fa fa-angle-up"></i>
    					</span>
    				</a>
    			</h4>
    		</div><!-- /.accordion-heading -->
    		<div id="accordion-collapse-2" class="accordion-collapse collapse" role="tabpanel" aria-labelledby="heading_accordion-collapse-2">
    			<div class="accordion-content">
    				<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
    			</div><!-- /.accordion-content -->
    		</div><!-- /.accordion-collapse -->

    	</div><!-- /.accordion-item -->

    </div><!-- /.accordion -->

##### Accordion Requirements

- Each accordion element must have a unique id.
- `.accordion-heading` elements must have a unique id.
- `data-parent` attributes are neccessary on `a` elements inside `.accordion-title`.
- To make an item expanded when page loads, add `.active` classname to the `.accordion-item` element. Change `aria-expanded="false"` to `aria-expanded="true"` on the `a` tag inside `.accordion-title`.

##### Accordion Modifiers

All classnames will be added to `.accordion` element.

- Accordion Sizes
  - `.accordion-xs`
  - `.accordion-sm`
  - `.accordion-md`
  - `.accordion-lg`
- Active Styles
  - `.accordion-active-has-fill`
  - `.accordion-active-has-shadow`
- Border Styles
  - `.accordion-body-underlined`
  - `.accordion-body-bordered`
  - `.accordion-title-underlined`
  - `.accordion-title-bordered`
- Roundness
  - `.accordion-title-round`
  - `.accordion-title-circle`
  - `.accordion-body-round`
- Expander Position
  - `.accordion-expander-left`

### Buttons

Buttons are used in various places of the template. From simple buttons with internal/external links to lightbox buttons and buttons inside forms.

    								<a href="#" class="btn btn-solid">
        <span class="btn-txt">Get access</span>
        <span class="btn-icon">
            <i class="lqd-icn-ess icon-md-arrow-forward"></i>
        </span>
    </a>

##### Button Modifiers

All classnames will be added to `.btn` element.

- Button Styles
  - `.btn-solid`
  - `.btn-naked`
  - `.btn-underlined`
- Button Sizes
  - `.btn-xs`
  - `.btn-sm`
  - `.btn-md`
  - `.btn-lg`
  - `.btn-xl`
- Button Border Sizes - ( For underlined button )
  - `.border-thin`
  - `.border-thick`
  - `.border-thicker`
- Button Icon Styles
  - `.btn-icon-shaped`
  - `.btn-icon-solid`
- Button Icon Sizes ( Only for shaped icons )
  - `.btn-icon-xsm`
  - `.btn-icon-sm`
  - `.btn-icon-md`
  - `.btn-icon-lg`
  - `.btn-icon-xl`
- Button Icon Roundness ( Only for shaped icons )
  - `.btn-icon-semi-round`
  - `.btn-icon-round`
  - `.btn-icon-circle`
- Button Icon Position
  - `.btn-icon-right`
  - `.btn-icon-left`
  - `.btn-icon-block.btn-icon-bottom`
  - `.btn-icon-block.btn-icon-top`

### Carousels

The carousel for cycling through elements, like a carousel (slideshow).

    								<div class="carousel-container">

    	<div class="carousel-items row" data-lqd-flickity>

    		<div class="carousel-item col-xs-12">
    			<figure>
    				<img src="./assets/demo/my-test-image.jpg" alt="Hub">
    			</figure>
    		</div><!-- /.carousel-item -->

    	</div><!-- /.carousel-items -->

    </div><!-- /.carousel-container -->

##### Carousel Requirements

- Carousel will be initiated by adding `data-lqd-flickity` attribute to `.carousel-items` element.
- `.carousel-items` must be wrapped with `.carousel-container`
- Anything you want to add as a carousel item, must be wrapped in `.carousel-item` element.
- You can specify the width of each carousel item by adding column classnames e.g. `.col-md-3`, `.col-md-6`, or classnames defined in utility.css like `.w-45percent` to `.carousel-item`.

##### Carousel Plugin Options

Carousel options will be passed to the `data-lqd-flickity` attribute. Please check Data Attributes section to see how to use plugin options.

- contain: `true`, `false`
- prevNextButtons: `true`, `false`
- pageDots: `true`, `false`
- adaptiveHeight: `true`, `false`
- groupCells: `true`, `false`
- wrapAround: `true`, `false`
- autoPlay: `true`, `false` or it can be a `number`. In milliseconds.
- fullwidthSide: `true`, `false`
- randomVerOffset: `true`, `false`
- marquee: `true`, `false`. set to `true` to make it slide continusely like a marquee element
- marqueeTickerSpeed: the default speed is set to 1

##### Carousel Modifiers

These classnames will be added to `.carousel-container` element

- Navigation Shapes
  - `.carousel-nav-shaped.carousel-nav-circle`
  - `.carousel-nav-shaped.carousel-nav-square`
- Navigation Fill
  - `.carousel-nav-solid`
  - `.carousel-nav-bordered`
- Navigation Sizes
  - `.carousel-nav-sm`
  - `.carousel-nav-md`
  - `.carousel-nav-lg`
  - `.carousel-nav-xl`
- Navigation Positions
  - `.carousel-nav-floated`
  - `.carousel-nav-center`
  - `.carousel-nav-left`
  - `.carousel-nav-right`
  - `.carousel-nav-top`
  - `.carousel-nav-bottom`
  - `.carousel-nav-middle`
- Navigation Directions
  - `.carousel-nav-vertical`
- Dots Sizes
  - `.carousel-dots-sm`
  - `.carousel-dots-md`
  - `.carousel-dots-lg`
- Dots Styles
  - `.carousel-dots-style1`
  - `.carousel-dots-style2`
  - `.carousel-dots-style3`
  - `.carousel-dots-style4`
- Dots Alignments
  - `.carousel-dots-left`
  - `.carousel-dots-center`
  - `.carousel-dots-right`
- Dots Position - Mobile
  - `.carousel-dots-mobile-outside`
  - `.carousel-dots-mobile-inside`
- Dots Alignments - Mobile
  - `.carousel-dots-mobile-left`
  - `.carousel-dots-mobile-center`
  - `.carousel-dots-mobile-right`

### Flip Boxes

    								<div class="ld-flipbox">
    	<div class="ld-flipbox-wrap">

    		<div class="ld-flipbox-face ld-flipbox-front">

    			<span class="ld-flipbox-overlay ld-overlay"></span>

    			<div class="ld-flipbox-inner">

    				<h3 class="font-size-24 mt-0">Flipbox Title</h3>
    				<p class="mb-0">All transactions that occur on Envato.</p>

    			</div><!-- /.ld-flipbox-inner -->

    		</div><!-- /.ld-flipbox-front -->

    		<div class="ld-flipbox-face ld-flipbox-back">

    			<span class="ld-flipbox-overlay ld-overlay"></span>

    			<div class="ld-flipbox-inner">

    				<a href="#" class="btn btn-solid font-size-12 lh-2 text-uppercase ltr-sp-175 btn-white">
    					<span>
    						<span class="btn-txt">Discover One</span>
    					</span>
    				</a>

    			</div><!-- /.ld-flipbox-inner -->

    		</div><!-- /.ld-flipbox-back -->

    	</div><!-- /.ld-flipbox-wrap -->
    </div><!-- /.ld-flipbox -->

##### Flipbox Requirements

- Back content's height will be based on the content on front side face. So contents in back face can't be taller than front contents.

##### Flipbox Modifiers

- Rotating Directions
  - Right to left: `.ld-flipbox-rl`
  - Bottom to top: `.ld-flipbox-bt`
  - Top to bottom: `.ld-flipbox-tb`
- Shadows
  - `.ld-flipbox-shadow-onhover`
- Adding background to flipbox faces
  - Add any background color or image to `.ld-flipbox-facce` element.
  - If you want a gradient or faded solid overlay over the background, you can simply add that to `.ld-flipbox-overlay` element.

### Google Maps

    								<div class="ld-gmap-container">
    	<div class="ld-gmap"
    		data-plugin-map="true"
    		data-plugin-options='{ "address": "7420 Shore Rd, Brooklyn, NY 11209, USA" }'>
    	</div><!-- /.ld-gmap -->
    </div><!-- /.ld-gmap-container -->

##### Google Maps Requirements

- You'll need to get your api key first. Please follow this article.

##### Google Maps Options

- All options will be assigned to `data-plugin-options` on the element with `data-plugin-map="true"`.
  - address: It's obviously the address. It can be the full address string or lat long. e.g. `51.507772, -0.127543`
  - style:
    - `wy`
    - `blueEssence`
    - `lightMonochrome`
    - `assassinsCreedIV`
    - `unsaturatedBrowns`
    - `classic`
  - marker_option:
    - `image`
    - `html`
  - marker: "assets/img/map-marker/marker-1.svg"

### Iconboxes

Iconboxes are used to show information with imaeg, static or animated icons.

    								<div class="iconbox iconbox-heading-sm">
    	<div class="iconbox-icon-wrap">
    		<span class="iconbox-icon-container">
    			<i class="icon-ecommerce_diamond"></i>
    		</span>
    	</div><!-- /.iconbox-icon-wrap -->
    	<h3 class="font-weight-semibold">Hover me</h3>
    	<div class="contents">
    		<p>Zero broker commission</p>
    	</div><!-- /.contents -->
    </div><!-- /.iconbox -->

##### Iconbox Requirements

- If you want to use animted icons, please use Linea iconset. Or use icons with the same structure as Liean's icons.

##### Iconbox Modifiers

- Icon Positions
  - `.iconbox-side`
  - `.iconbox-inline`
    - In inline iconbox we'll move the heading (`h3`) element outside of `.content` element.

          														<div class="iconbox iconbox-inline">
          	<div class="iconbox-icon-wrap">
          		<span class="iconbox-icon-container">
          			<i class="fa fa-code"></i>
          		</span>
          	</div><!-- /.iconbox-icon-wrap -->
          	<h3>TRANSPORTATION</h3>
          	<div class="contents">
          		<p>Spectacular train rides, breathtaking cable car ascents, overnight cruise ships, scenic day ferries, private first-class motorcoaches.</p>
          	</div><!-- /.contents -->
          </div>

- Icon Shapes
  - `.iconbox-circle`
  - `.iconbox-lozenge`
- Iconbox Icon Effects
  - `.iconbox-icon-ripple`
  - `.iconbox-icon-linked`
- Hover effects
  - `.lqd-iconbox-scale`

##### Adding Animated Icons

    								<div class="iconbox text-left iconbox-xl iconbox-heading-sm" data-animate-icon="true" data-plugin-options='{"color":"#780bee:#1de1d1"}'>
    	<div class="iconbox-icon-wrap">
    		<span class="iconbox-icon-container">
    			<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" enable-background="new 0 0 64 64" xml:space="preserve">
    				<path stroke-width="2" stroke-miterlimit="10" d="M32,47L63,47L63,5L1,5L1,47L18,47L18,59Z"></path>
    				<path stroke-width="2" stroke-linejoin="bevel" stroke-miterlimit="10" d="M23,26L30,33L 43,20"></path>
    			</svg>
    		</span>
    	</div><!-- /.iconbox-icon-wrap -->
    	<div class="contents">
    		<h3>Bitcoin improvement proposals</h3>
    		<p>Having a BIP here does not make it a formally accepted standard until its status become.</p>
    	</div><!-- /.contents -->
    </div><!-- /.iconbox -->

##### Animated Icon Requirements

- To have an icon that can be animated, as we mentioned above you can take an icon from Linea iconset. Copy the SVG code of an icon and paste it in `.iconbox-icon-container` element.
- Add `data-animate-icon="true"` to `.iconbox` element.

##### Animated Icon Options

All options will be added to `data-plugin-options` on `.iconbox` element.

- color: it can be a single color. e.g. `#f42958`. Or multiple colors for gradient. seperated by `:`. e.g. `#780bee:#1de1d1`
- hoverColor: as the same as color option
- delay: time for starting delay. In milliseconds.
- resetOnHover: `true`, `false`

### Media Gallery

    								<div class="ld-media-row row d-flex" data-liquid-masonry="true">

    	<div class="lqd-column col-md-3 col-sm-6 masonry-item">
    		<div class="ld-media-item">
    			<figure data-responsive-bg="true">
    				<img class="invisible" src="./assets/demo/media-elements/md-1.jpg" alt="Media Gallery">
    			</figure>
    			<div class="ld-media-item-overlay d-flex flex-column align-items-center text-center justify-content-center">
    				<div class="ld-media-bg"></div>
    				<div class="ld-media-content">
    					<span class="ld-media-icon">
    						<span class="ld-media-icon-inner">
    							<i class="icon-ion-ios-add"></i>
    						</span>
    					</span>
    				</div><!-- /.ld-media-content -->
    			</div><!-- /.ld-media-item-overlay -->
    			<a href="./assets/demo/media-elements/md-1.jpg" class="liquid-overlay-link fresco" data-fresco-group="media-group-1"></a>
    		</div><!-- /.ld-media-item -->
    	</div><!-- /.col-md-3 -->

    	<div class="lqd-column col-md-6 masonry-item">
    		<div class="ld-media-item contents-visible">
    			<figure data-responsive-bg="true">
    				<img class="invisible" src="./assets/demo/media-elements/md-9.jpg" alt="Media Gallery">
    			</figure>
    			<div class="ld-media-item-overlay d-flex flex-column align-items-center text-center justify-content-center">
    				<div class="ld-media-bg"></div>
    				<div class="ld-media-content">
    					<span class="ld-media-icon icon-play bordered">
    						<span class="ld-media-icon-inner">
    							<i class="fa fa-play"></i>
    						</span>
    					</span>
    				</div><!-- /.ld-media-content -->
    			</div><!-- /.ld-media-item-overlay -->
    			<a href="https://www.youtube.com/watch?v=WVPRkcczXCY&t" class="liquid-overlay-link fresco" data-fresco-group="media-group-2"></a>
    		</div><!-- /.ld-media-item -->
    	</div><!-- /.col-md-3 -->

    </div><!-- /.ld-media-row -->

##### Media Gallery Requirements

- `data-liquid-masonry="true` on `.ld-media-row` is required if you want the masonry layout.
- `data-fresco-group` is required on `.liquid-overlay-link` if you want to show the lightbox as a gellry lightbox.
- Column widths can be anything you wish.

##### Media Gallery Overlay Contents

You can put almost any content inside `.ld-media-content`.

- Simple icons
  Add any icon there with `<i></i>` element

      										<span class="ld-media-icon">
      	<span class="ld-media-icon-inner">
      		<i class="icon-ld-search"></i>
      	</span>
      </span>

- Video Play Icons
  We prepared 2 different styles for play icon. With 3 different sizes.

      										<span class="ld-media-icon icon-play bordered">
      	<span class="ld-media-icon-inner">
      		<i class="fa fa-play"></i>
      	</span>
      </span>

  Classnames you can add on `.ld-media-icon.icon-play` elements are:
  Fills
  - `.bordered`
  - `.solid`
  Sizes
  - `.size-sm`
  - `.size-md`
  - `.size-lg`
- Simple Content

      										<div class="ld-media-txt">
      	<h3>My content</h3>
      </div>

##### Media Gallery Modifiers

Following classnames can be added to `ld-media-item` element.

- Contents Visibility
  - `.contents-visible`
- Shadows
  - `.shadow-onhover`
- Overlay Background color
  - You can simply apply any color to `.ld-media-bg` element.

### Parallax

You can easily make anything parallax! It can be an image, a column, a shortcode or anything else.

- To start add `data-parallax="true"` to the element you want.

- To define starting state of the element, add `data-paralla-from=''`. values going inside this attribute can be css transform properties

      										<div class="liquid-img-container-inner"
      	data-parallax="true"
      	data-parallax-from='{"y": 80}'
      >

- To define the destination of the element, or the state of the ending of the parallax add `data-paralla-to=''` to the element.

      										<div class="liquid-img-container-inner"
      	data-parallax="true"
      	data-parallax-from='{"y": 80}'
      	data-parallax-to='{"y": -80}'
      >

- There are some parallax options, such as easing, duration etc. that should go to `data-parallax-options=''` attribute.

      										<div class="liquid-img-container-inner"
      	data-parallax="true"
      	data-parallax-from='{"y": 80}'
      	data-parallax-to='{"y": -80}'
      	data-parallax-options='{"overflowHidden": false,"easing": "linear"}'
      >

##### Parallax Options

Parallax options will be passed to the `data-parallax-options` attribute. Please check Data Attributes section to see how to use plugin options.

- duration: Number ( default: 1800 ) it can be also in percentage. e.g. "100%"
- offset: Number ( default: 0 )
- triggerHook: String or number from 0 to 1.
  Strings can be used:
  - onEnter
  - onCenter
  - onLeave
- easing: String ( default: "linear" )

  in | out | in-out
  `'easeInQuad'` | `'easeOutQuad'` | `'easeInOutQuad'`
  `'easeInCubic'` | `'easeOutCubic'` | `'easeInOutCubic'`
  `'easeInQuart'` | `'easeOutQuart'` | `'easeInOutQuart'`
  `'easeInQuint'` | `'easeOutQuint'` | `'easeInOutQuint'`
  `'easeInSine'` | `'easeOutSine'` | `'easeInOutSine'`
  `'easeInExpo'` | `'easeOutExpo'` | `'easeInOutExpo'`
  `'easeInCirc'` | `'easeOutCirc'` | `'easeInOutCirc'`
  `'easeInBack'` | `'easeOutBack'` | `'easeInOutBack'`

- overflowHidden: Boolean ( default: true )

### Particles

    								<div class="ld-particles-container">

    	<div
    	class="ld-particles-inner"
    	id="particles-1"
    	data-particles="true"
    	data-particles-options='{ "particles":{"shape": {"type":["circle"]} } }'>
    	</div><!-- /.re-particles-inner -->

    </div><!-- /.ld-particles-container -->

##### Particles Requirements

- `.ld-particles-inner` must have a unique id.
- There should be at least `"particles"` option inside `data-particles-options`. But don't worry! setting up options for particles is so easy. We'll go through shortly.

##### Particles Options

- Go to Particles JS homepage. Edit whatever you need from the panel in the top right.
- After you're happy with the settings, click on → Download current config (json)
- Open the JSON file in your text editor, copy the data and paste right in `data-particles-options`. That's all!
- If you want to use the particles as a section background, wrap `.ld-particles-container` with `.lqd-particles-bg-wrap` element. And you'll need to move it right to where you want to be as it's background. It can be a column, a row or a whole section.

      										<div class="lqd-particles-bg-wrap">
      	<div class="ld-particles-container">

      		<div
      		class="ld-particles-inner"
      		id="particles-1"
      		data-particles="true"
      		data-particles-options='{ "particles":{"shape": {"type":["circle"]} } }'>
      		</div><!-- /.re-particles-inner -->

      	</div><!-- /.ld-particles-container -->
      </div><!-- /.lqd-particles-bg-wrap -->

### Tabs

Tabs are perfect for single page web applications, or for web pages capable of displaying different subjects.

    								<div class="lqd-tabs">
    	<ul class="nav lqd-tabs-nav" role="tablist">
    		<li role="presentation" class="active">
    			<a href="#ld-tab-pane-1" aria-expanded="false" aria-controls="ld-tab-pane-1" role="tab" data-toggle="tab">Tab 1</a>
    		</li>
    		<li role="presentation">
    			<a href="#ld-tab-pane-2" aria-expanded="false" aria-controls="ld-tab-pane-2" role="tab" data-toggle="tab">Tab 2</a>
    		</li>
    	</ul>
    	<div class="lqd-tabs-content">
    		<div id="ld-tab-pane-1" role="tabpanel" class="lqd-tabs-pane fade active in">
    			<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum magnam dignissimos similique.</p>
    		</div><!-- /.tab-pane -->
    		<div id="ld-tab-pane-2" role="tabpanel" class="lqd-tabs-pane fade">
    			<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Rerum magnam dignissimos similique.</p>
    		</div><!-- /.lqd-tab-pane -->
    	</div><!-- /.lqd-tabs-content -->
    </div><!-- /.tabs -->

##### Tabs Requirements

- All tab nav items will be placed inside `.lqd-tabs-nav` element.
- All tab content will be placed inside `.lqd-tabs-content` element.
- Any tab content will be wrapped with `.lqd-tabs-pane` element.

##### Tabs Modifiers

Since this element is a little bit complicated, we suggest copy/paste the style you like in demos and start changing from there.

### Video Background

Hub provides support for video background. Both youtube and local hosted videos.

##### Youtube Video Background

    								<div class="lqd-vbg-wrap">
    	<div class="lqd-vbg-inner">
    		<span class="lqd-vbg-loader"></span>
    		<div class="inline-YTPlayer">
    			<div class="lqd-vbg-video" data-video-bg="true" data-youtube-options='{"videoURL": "https://www.youtube.com/watch?v=-z6XVI-nCZs"}'>
    			</div>
    		</div><!-- /.inline-YTPlayer -->
    	</div><!-- /.lqd-vbg-inner -->
    </div><!-- /.lqd-vbg-wrap -->

##### Local Hosted Video Background

    								<div class="lqd-vbg-wrap">
    	<div class="lqd-vbg-inner">
    		<span class="lqd-vbg-loader"></span>
    		<video class="lqd-vbg-video" data-video-bg="true" autoplay loop>
    			<source src="assets/media/Raindrops_Videvo.m4v" type="video/mp4">
    			<source src="assets/media/Raindrops_Videvo.webm" type="video/webm">
    		</video><!-- /.lqd-vbg-video -->
    	</div><!-- /.lqd-vbg-inner -->
    </div><!-- /.lqd-vbg-wrap -->

## Setting up contact form

To setup the contact form, you'll need to provide you're email ( The email that receives emails from contact form ) from ./assets/php/mailer.php.

    									<?php
    if($_POST)
    {
    	$to_email = "your_email@example.com" // replace with own email here

    	...

    >

Make sure you have the contact form javascript file in your page.

    <script src="./assets/js/liquid-ajax-contact-form.min.js"></script>

Make sure you have fields with name, email and message name attribute. Also form MUST have a class of `lqd-cf-form`.

There are also form handlers with acceptance and reCAPTCHA inputs. Check `./assets/php/mailer-recaptcha-v2.php` and `./assets/php/mailer-with-acceptance.php` files.

## Setting up newsletter form

Hub HTML using Mailchimp for newsletter form. So to get started you'll need a Mailchimp account.

After getting your account ready, from Audience > Signup Forms select Embedded form.

Click finish to see the HTML markup ready for you.

Go to Copy/paste onto your site section and copy the value of action attribute

Now go back to the newsletter form from Hub template and paste the value inside action attribute. e.g.

Make sure you have the newsletter javascript file in your page.

    	<script src="./assets/js/liquid-ajax-mailchimp.min.js"></script>

Make sure you have id="mce-EMAIL" and name="EMAIL" attributes on the email field

## Helper Classes

We added some helper classes to the template that might come handy to you.

##### You can see all helper classes in `assets/css/utility.css`