You

This theme is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including iPad and iPhone.
See for yourself (resize your browser).

If you would like to read more
about bootstrap framework click here :

Bootstrap Documentation

Grid System and Single row structure

The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).
Bootstrap documentation: here

Basic grid HTML:

XHTML

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

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27

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

Page structure

Below you will find default page structure :

If you would like to edit the color, font, or style of any elements, you would do the following:

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn’t a similar style that has more weight.

I.E.

So, to ensure that your new styles are applied, make sure that they carry enough “weight” and that there isn’t a style lower in the CSS file that is being applied after yours.

Colors

The theme includes a css file wich you can use to edit the colors.
You just need to add the corresponding CSS file to the head of the page like this:

Main Menu structure

Just change brand name, upload your logo to images/content/ folder and you’re ready to go!

In order to create mega menus read the documentation here:

Yamm 3 Documentation

Icons

We’ve included 360+ font icons.

Awesome Icons – http://fontawesome.io/icons/

HTML markup:

CSS Files & Structure

We’ve included 2 files.
bootstrap.css contains Bootstrap 3 Library.
style.css file contains general styles.

1. Font Awesome
2. Animate.css
3. Typography
4. Buttons
5. Menu
6. Forms
7. Hovers
8. Tables
9. Utilities
10. Media Sections – video/parallax/kenburns
11. Accordions
12. Progress Bar
13. Tabs
14. Mixins
15. Select2
16. Wrapper
17. Page Header
18. Footer
19. Socials Types
20. Counter
21. Blog
22. Blog Panel
23. Blog Comments
24. Pricing Boxes
25. Blockquote
26. Sliders
27. Google Maps
28. Widgets
29. Magnific Popup
30. After & before slider(twentytwenty)
31. Templates

Utilities

Utility classes are low-level structural and positional traits. Utilities can be applied directly to any element, multiple utilities can be used tohether and utilities can be used alongsie component classes.

Utilities are intended for frequently used CSS properties and patterns, like: floats, containing floats, vertical alignemnt, text tryncation. Relying on utilities can help to reduce repetition and provide consistend implementations.

• {Theme} uses utilities for the following categories:
• Typography
• Display Types
• Paddings
• Margins
• Line height
• Borders
• Colors
• Transform
• Section elements

{Theme} supports media sections with Parallax, KenBurns effect and videos.

Parallax Section

We are using stellar.js for the parallax effect. Check their documentation to check which attributes you can use in each parallax section.
http://markdalgleish.com/projects/stellar.js/docs/

Our custom data-attributes for the parallax section are:

• data-height: Define the minimun height for the sections
• data-type: Type of Media Section (parallax/kenburns/video)
• data-image: Background image for the section.
• data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. This will help you with the bandwidth, you’re welcome! 🙂

Ken Burns Sections

KenBurns section supports one or more images that you should add inside .media-section-image-container

Our custom data-attributes for the kenburns section are:

• data-height: Define the minimun height for the sections
• data-type: Type of Media Section (parallax/kenburns/video)
• data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Kenburns it too much for ipads, iphones and so on, so we allow you to fallback to a normal image section. This way your browser won’t crash 🙂

Video Sections

We recommend you to use html5 video instead of vimeo, since in some specific browsers the sound won’t be muted.

Our custom data-attributes for the video section are:

• data-height: Define the minimun height for the sections
• data-type: Type of Media Section (parallax/kenburns/video)
• data-image-mobile: Fallback image (Should be smaller than the original) that is loaded for small devices. Phones don’t autoplay video, so we just replace it for an image

{Theme} comes with Magnific popup gallery.

Magnific Popup

To use ajax gallery with Magnific popup, please use the following HTML markup:

You can use one 15 hover types:
Check hovers demo here.
You can change hover effects with the following CSS classes:

• .ct-hover-type1,
• .ct-hover-type2,
• .ct-hover-type3,
• .ct-hover-type4,
• .ct-hover-type5,
• .ct-hover-type6,
• .ct-hover-type7,
• .ct-hover-type8,
• .ct-hover-type9,
• .ct-hover-type10,
• .ct-hover-type11,
• .ct-hover-type12,
• .ct-hover-type13,
• .ct-hover-type14,
• .ct-hover-type15

You can load your HTML conent with awesome animations enabled on scroll.

To animate your HTML element, use the markup below:

You can adjust animations with the following data-attributes:

• data-when
• data-from
• data-to
• data-easing
• data-crop
• data-opacity
• data-scale
• data-scalex
• data-scaley
• data-scalez
• data-rotatex
• data-rotatey
• data-rotatez
• data-translatex
• data-translatey
• data-translatez

And CSS classes:

• .ct-js-animationDynamic,
• .ct-js-animation–item

Here you will find full plugin documentation.

There are 7 types of section buttons – each for every template style, but feel free to use them wherever you want.

To add button, use the following HTML markup:

and CSS classes:

• .ct-header-arrow–circle,
• .ct-header-arrow–circleD,
• .ct-header-arrow–circleDecoration,
• .ct-header-arrow–circleDecoration2,
• .ct-header-arrow–circleDecoration3,
• .ct-header-arrow–triangle,
• .ct-header-arrow–shape

In {Theme} you can use one of 7 decoration types. Every styles has it’s own rotate variation.

Use the following HTML markup:

And choose your type with CSS classes:

• .ct-decoration–type1,
• .ct-decoration–type1-rotate,
• .ct-decoration–type2,
• .ct-decoration–type2-rotate,
• .ct-decoration–type3,
• .ct-decoration–type3-rotate,
• .ct-decoration–type4,
• .ct-decoration–type4-rotate,
• .ct-decoration–type5,
• .ct-decoration–type5-rotate,
• .ct-decoration–type6,
• .ct-decoration–type6-rotate,
• .ct-decoration–type7,
• .ct-decoration–type7-rotate

You can choose from 3 types of Socials:

• -rounded
• -square
• -square with rounded border

Use the following HTML markup to add socials:

And adjust it with CSS classes:

• .ct-socials–circle,
• .ct-socials–square,
• .ct-socials–square-rounded

{Theme} comes with 7 types of dividers. We designed one for each template style, but feel free to use theme wherever you want.

To add Divider use the following HTML markup:

You can adjust divider style with the following CSS classes:

• .ct-divider–type1,
• .ct-divider–type2,
• .ct-divider–type3,
• .ct-divider–type4,
• .ct-divider–type5,
• .ct-divider–type6,
• .ct-divider–type7

All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript scripts:

• Bootstrap
• jQuery
• counter(jquery.countTo.js)
• ct-mediaSections(with stellar.js)
• flexslider
• gmaps API
• isotope (http://isotope.metafizzy.co/)
• magnific-popup (http://dimsemenov.com/plugins/magnific-popup/)
• scrollme(jquery.scrollme.js)
• select2.js http://ivaynberg.github.io/select2/
• stacktable.js (http://johnpolacek.github.io/stacktable.js/)
• before & after slider(jquery.twentytwenty.js)
• device.js
• jquery.appear.js
• jquery.pagescroller.lite.js
• smoothscroll.js
• snap.js
• animate.css

jquery.appear

This plugin call function when element appear in viewport. This is used in custom animation, progress bars, counter timer.
Documentation: https://github.com/bas2k/jquery.appear/

Flexslider

Content / Images Slider.

Flexslider

Each parameter can be defined as data attribute :

• data-namespace
• data-selector
• data-animation
• data-easing
• data-direction
• data-reverse
• data-animationloop
• data-smoothheight
• data-startat
• data-slideshow
• data-slideshowspeed
• data-animationspeed
• data-initdelay
• data-randomize
• data-thumbcaptions
• data-pauseonaction
• data-pauseonhover
• data-pauseinvisible
• data-usecss
• data-touch
• data-video
• data-controlnav
• data-directionnav
• data-prevtext
• data-nexttext
• data-keyboard
• data-multiplekeyboard
• data-mousewheel
• data-pauseplay
• data-pausetext
• data-playtext
• data-itemwidth
• data-itemmargin
• data-minitems
• data-maxitems
• data-move
• data-allowoneslide
• data-controlscontainer
• data-manualcontrols
• data-sync
• data-asnavfor

Read the documentation here:

Flexslider Documentation

You can use Before & After slider with magnific popup(Ajax).

HTML markup:

CSS class:

• .ct-slider-afterANDbefore

Javascripts:

Options:

• default_offset_pct: 0.7, // How much of the before image is visible when the page loads
• orientation: ‘vertical’ // Orientation of the before and after images (‘horizontal’ or ‘vertical’)

In {Theme} we used responsive tables from http://johnpolacek.github.io/stacktable.js/

Responsive Tables

HTML markup:

CSS classes:

• .ct-js-table-stack

Javascripts:

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

• data-location – address to show
• data-height – map height (if undefined height will be 220px)
• data-offset – by how many map should be repositioned from marker center point (default -30)
• data-icon – adding custom icon to map in html

Google Map

It uses gmap3 plugin.
Documentation: here
HTML Markup:

Template comes with ready to use:

• Contact Form
• Newsletter Form

All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/config.php and change e-mails to your own :

That’s it!

Contact Form

HTML Markup:

Newsletter Form

HTML Markup:

Options (can be changed in HTML) :

• Mail Subject – just change value in :
• Success Message – change successMessage div content
• Error Message – change errorMessage div content