Medicus HTML Template Documentation

Medicus is a "Health & Beauty" oriented HTML5 Template, built to serve as a foundation for your web projects. The Design is based on fine typography and large photography. It is build with Twitter Bootstrap, the front-end development framework with a steep learning curve that changes the way you develop sites. Medicus lets you build your pages with a great collection of section layouts and helper classes that offer extreme flexibility and pixel-perfect design.

To use the template you have to be familiar with HTML & CSS. The demo is self-explanatory and you can easily study the HTML files to discover how to customise the templates to your needs. This documentation covers some basics to help you get started... If you are a web developer you are about to boost your development workflow!

Responsive Grid, Layout & Styling

The Grid (it is Bootstrap as you know it!)

Medicus uses Twitter Bootstrap to build the responsive grid. You should study it if you aren't familiar already. Bootstrap 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.

Medicus uses bootstrap to style all HTML elements so it is a good idea to study all of bootstrap capabilities.

LESS & CSS

Medicus makes heavy use of LESS to style its content but you may as well work with CSS. The LESS files responsible for the styling are in the the assets/less folder while their CSS compiled counterparts reside at assets/css.

 less
|- theme_variables.less
|- theme_custom_bootstrap.less
|- style.less
|- ... other files

 css
|- theme_custom_bootstrap.css
|- style.css
|- ... other files

First, we load assets/css/theme_custom_bootstrap.css which is a light version of Bootstrap Framework, made especially for Medicus. Its LESS counterpart assets/less/theme_custom_bootstrap.less is an exact copy of assets/twitter-bootstrap/less/bootstrap.less with certain sections commented out. To exclude styles that you don't need, or to enable some that we left out, edit assets/less/theme_custom_bootstrap.less and recompile to its CSS counterpart in the assets/css folder.

Finaly, we load assets/css/style.css which is the main stylesheet for the theme. Its LESS couterpart assets/less/style.less is the powerfull constructor of this template which imports the very important assets/less/theme_variables.less file where all the colors, typography and other various settings reside.

So, for example, if you need to change the colors of your template, you can just edit assets/less/theme_variables.less file, replace just one variable and recompile style.less

We compile LESS locally and not on the server. That means we use tools like Prepros or CodeKit. Check out this article. If you need to learn more about LESS, visit LESSCSS.org

Apart from the css files we talk about in this section, we also use some other css files that belong to external libraries and reside in the css folder.

JADE & HTML Templating engine

In order to produce the final HTML Template files, we use JADE and although you don't have to use it yourself, we incude it in our package for all of those who are familiar or wish to start playing around! The JADE files reside in the assets/jade folder while their HTML compiled counterparts reside at the root folder of the package.

 medicus-html
|-  assets
   |-  jade
      |-  templates
      |- 404.jade
      |- about-us.jade
      |- blog.jade
      |- ... other JADE files

 medicus-html
|- 404.html
|- about-us.html
|- blog.html
|- ... other HTML files

We included a special config.jade file from where you can globaly enable or disable css and script loading. You can also choose between development or production mode. In production mode, scripts are loaded minified. To enable specific scripts per page, you can override the configuration variables to true in the specific JADE template file.

We compile JADE locally and not on the server. That means we use tools like Prepros or CodeKit. If you need to learn more about JADE, visit jade-lang.com

Javascript & the way we use it

Javascript is used extensively in Medicus in order for some of its features to work. These features include the Sliders, the menu, the newsletter and the forms, parallax effects, the lightbox, google maps etc. All the files needed, reside in the assets/js folder in both normal and minified versions. The corresponding scripts are called from the various HTML pages depenting on the features that are used in each page.

A specific pair of files has a special importance for Medicus. In theme.js you can find some custom scripts that we use for layout purposes and in config.js you can configure the most common settings for all js scripts, without you needing to dig up in the code to change them.

The General Layout Concept

The pages have 4 basic areas: The Header, The Head Panel, The Main Area and the Footer.


<body>
	<div class="overflow_wrapper">
		<div class="header"> ... logo ... menu ... </div>
		<div class="head_panel"> ... slider or photo or map ... </div>
		<div class="main">
			<section> ... design element ... </section>
			<section> ... or "shortcode" ... </section>
			<section> ... content in general ...</section>
		</div>
		<footer> ... columns with "widgets" ... </footer>
	</div>
</body>

We found this setup to be simple and semantic. The header and the footer are meant to be common on every page while the main area is where you put sections with different layouts. The head panel is optional and is meant to host sliders, maps, big background photos and page titles & subtitles. We are examining these 4 basic areas in detail below.

Visual interpretation of the code

The General Styling Concept

The styling of any element of the page is based on the concept of Helper Classes. These cover a wide range of styling issues such as the colors of an element and its sub-elements, the dimensions, the paddings, the alignments (on both axis) etc. Let's examine them bellow...

Color Scheme helper styling classes (6)

These classes set the background, the text, the link and the link:hover colors of any element they are applied on, and its children also. They take their name from the background-color they use.

skincolored_section @brand-primary color
secondary_section @brand-secondary
dark_section
light_section
black_section
white_section

All these colors can be set on assets/less/theme_variables.less if you work with LESS.

If you set a background image in a section that is mainly dark-colored, then by setting the section to .dark_section you acknowledge that you want the text of this section to take the color that you have set for a dark_section and is obviously in contrast with a dark background. That is the concept...

You can visualize all these by visiting our Design Elements Playground and clicking on the icon on your right, or by appending the ?enableStyleSwitcher query string in any of our demo pages' URL. For example:

http://plethorathemes.com/html/medicus/about-us.html?enableStyleSwitcher

Have Fun!

Gradient Angled Backgrounds (14)

These classes set the background of a section as a Flat Primary to Secondary color gradient (or vice-versa) with an angle. It is the effect you see on the header and the footer. Some of them are inter-depentent.

gradient Primary to Secondary color, no angle, split 50-50
gradient diagonal-30 With an angle of 45, split 30-70
gradient diagonal-50 With an angle of 45, split 50-50
gradient diagonal-70 With an angle of 45, split 70-30
gradient diagonal-30-minusangle With an angle of -45, split 30-70
gradient diagonal-50-minusangle With an angle of -45, split 50-50
gradient diagonal-70-minusangle With an angle of -45, split 70-30
gradient-invert Secondary to Primary color, no angle, split 50-50
gradient-invert diagonal-30-invert With an angle of 45, split 30-70
gradient-invert diagonal-50-invert With an angle of 45, split 50-50
gradient-invert diagonal-70-invert With an angle of 45, split 70-30
gradient-invert diagonal-30-minusangle-invert With an angle of -45, split 30-70
gradient-invert diagonal-50-minusangle-invert With an angle of -45, split 50-50
gradient-invert diagonal-70-minusangle-invert With an angle of -45, split 70-30

The 45 angle can be set to another number on assets/less/theme_variables.less if you work with LESS.

Transparent overlays

These classes overlay a transparent film in front of the background of any element. Its basic color is set by the color-scheme class of the element.

transparent-film
gradient-film-to-top aka dégradé...
gradient-film-to-bottom

For example, if you set a section with a background-photo as .skincolored.transparent-film, the transparent film will be the skincolor faded by the percentage of the transparency you have set on theme_variables.less.

Full Height, Full Width and Vertical Alignment of a Section

You can set a section to have a minimum height same to the screen height and vertically align the content. (Interdepentant classes)

full_height Vertical top
full_height vertical_center
full_height vertical_bottom
full_width Allow the section content to capture the entire screen width.

Paddings and Margins (relative to @section-vertical-padding: 55px;)

no_padding No Top or Bottom Padding
no_padding_top
no_padding_bottom
padding_top
padding_bottom
padding_top_half
padding_bottom_half
no_margin No Top or Bottom Margin
no_margin_top
no_margin_bottom
margin_top
margin_bottom
margin_top_half
margin_bottom_half
margin_top_grid Equal to the double col padding
margin_bottom_grid
no_cols_padding No horizontal Padding for the columns of a section

Vertical Align and heights of a Section's Columns

vcenter Alignes columns of a section that have different heights to their vertical centers
vbottom
same_height_col When applied to 2 or more different-height-columns of a section, it makes them of equal height

http://plethorathemes.com/html/medicus/about-us.html?enableStyleSwitcher

Have Fun!

Responsive Stretchy Wrappers that keep a dimesions ratio

Inter-Dependent ...

stretchy-wrapper Ratio 16:9
stretchy-wrapper ratio_15-9
stretchy-wrapper ratio_12-5
stretchy-wrapper ratio_4-3
stretchy-wrapper ratio_2-1
stretchy-wrapper ratio_1-1
stretchy-wrapper ratio_5-1

Other Misc. Helper Classes

Can be set on any element.

transparent
centered
elevate
boxed
boxed_plus
boxed-special
neutralize_links If used on a color-schemed item, the links get the color of the text
linkify Applied on a link, it will open the .main section of the URL in an AJAX Modal
scrollify Applied on a link with a hashtag, it will scroll to the target id smoothly
click-disable Applied on an img it will make it unselectable (Thanks to Andrew Chs)

The header section is where the logo, the menu and the optional top-bar reside . Its height is not set explicitly but it depents on the vertical margin of the logo. It can be set to move along with the page when you scroll (relative position), or it can be always on top (sticky). In order to make it sticky, you just have to add the class sticky_header to the body element.


<body class="sticky_header">...</body>

The background color of the header's mainbar (logo and menu) can be solid or gradient (brand-primary to brand-secondary). The gradient may be horizontal or diagonal. All these are set by adding or excluding the appropriate classes to the .mainbar element. You may also make the whole header transparent (opaque) by adding the class .transparent to the .header.


<div class="mainbar diagonal gradient">...</div>

The angle of the diagonal gradient can be set from the assets/less/theme_variables.less if you use LESS. Also from there you can set the colors of the two areas and the percentage of the containers length, that the angle will be placed.

Header Background Setup

The Logo Area

In the Logo Area you may put a title text or an image and you can optionally use a sub-title text. The logo image maximum height can be set from assets/less/theme_variables.less if you use LESS. If you use CSS, go to your assets/css/style.css file and locate the following code and change the max-height to the pixels you wish. The width will adapt proportionally.


.logo a.brand img {
	max-height: 32px;
	width: auto;
}


<div class="logo">
	<a class="brand" href="index.html">
		Medicus
	</a>
</div>

Title Text Logo


<div class="logo">
	<a class="brand" href="index.html">
		<img src="./assets/images/medicus-header-logo.png">
	</a>
</div>

Just Image Logo


<div class="logo">
	<a class="brand" href="index.html">
		<img src="./assets/images/medicus-header-logo.png">
	</a>
	<!-- OPTIONAL Sub-Title-->
	<p>Call us Toll free +30 1234-567-890</p>
</div>

Image Logo and Sub-Title

You can study its structure by simply looking at the code of any template HTML file of Medicus that has a menu. The dropdown menus open on click by default or on hover if you add class .hover_menu to the ul.main_menu.


<div class="menu_container">
	<nav>
		<ul class="main_menu"> // Add class hover_menu here if you wish
			<li><a title="ABOUT US" href="./about-us.html">ABOUT US</a></li>
			<li> ... </li>
			<li> ... </li>
			<li> ... </li>
			<li class="lihasdropdown two-column dropleft">
				<a href="#">Sub Menu</a>
				<ul class="menu-dropdown">
					<li> ... </li>
					<li> ... </li>
					<li class="sublihasdropdown">
						<a href="#">Sub-Sub Menu</a>
						<ul class="menu-dropdown">
							<li> ... </li>
							<li> ... </li>
					</li>
				</ul>
			</li>
		</ul>
	</nav>
</div>

If you want your dropdown menu to split into 2 columns, just add class="two-column dropleft" to the appropriate li tag. "dropleft" can also be "dropright" if you wish.

The menu is transformed on mobile devices. To set the width below which the menu will be transformed (aka "The BreakPoint"), you have to go to assets/css/style.css and change the corresponding media query number to fit your needs.


@media only screen and (min-width: 768px) {
	...
}

Head Media Panel Section

In the Head Panel Section you may put a Slider, a Background Photo or Color with optional title & subtitle, a Google Map or you may just decide not to include it at all. It has a variable height that you can set with LESS or CSS.


<div class="head_panel">
	<div style="background-image: url('./assets/images/slider-6.jpg')" class="full_width_photo">
		<div class="hgroup">
			<div class="title diagonal-bgcolor-trans">
				<div class="container">
					<h1>About us</h1>
				</div>
			</div>
			<div class="subtitle body-bg_section">
				<div class="container">   
					<p class="uppercase">We are a medical clinic</p>
				</div>
			</div>
		</div>
	</div>
</div>

Heading Group (.hgroup)

The Heading Group Items (Title and Subtitle) can be styled with helper color-scheme classes such as ".dark_section" or ".transparent-film" as well as with the special class diagonal-bgcolor-trans that is responsible for the angled effect.

Simple Head Panel example

Head Panel with Background Photo

Slider and its Captions

The Slider that you can find on the Head Panel area of the Home page, is powered by OWL Carousel 2. You can setup various settings that control its looks by going to assets/js/config.js

The slider on the home page has it own responsive, specific ratio dimensions that are set by the special .ratio_slider class. This can be changed to our other ratios like .ratio_16-9, .ratio_2-1 etc.

If you want a Full-Window-Height slider, check out the markup on the Onepager.

The captions of each slide can be styled in 2 basic ways, by adding the caption-fancy or caption-flat classes. You can also put them on the left, right or center of the background bya adding the apprortiate class, e.g. caption-right. Captions can be animated too, by adding the class you like.

Check out the official OWL site

Google Maps

Medicus uses the Google Maps Api v3 to show a google map on the head panel. You can find the markup and example on the contact page. In order to configure Google Maps, open the file /assets/js/config.js and search for the themeConfig["GOOGLE_MAPS"] section. All of the configuration settings, such as Latitude, Longitude, Map Type, etc. can be found there. You can set multiple settings for multiple maps, either across different pages or on the same one.

Getting the coordinates of a place

Open Google Maps.
Right-click the place or area on the map.
Select What's here?
Under the search box, an info card with coordinates will appear.

See Google Maps Help

Checkout our YouTube tutorial on getting and setting the coordinates for Google Maps

Main Area & Design elements

The "Powerful" Section Element

The section element is very powerful, flexible and plays a very important role in building the layout of your pages. By assigning the apropriate classes to it you can style its contents in many ways.

Section Headings Group Element .section_header

The section_header element consists of a title h2 to h4 and a subtitle p. There are 3 styles for this element that can be assigned alongside the main class. The available classes are: 1) .fancy 2) .elegant and 3) .thin

Particles Effect

You can enable a cool Particles background effect on each section, by adding the .particles-js class. Checkout the demo page to see how each colored section looks with the Particles Effect turned on.


<section class="particles-js">CONTENT</section>

Particles Effect

3D Links Hover Effect

If you want to enable a cool 3D effect on your links, all you need to do is add a .roll class to your anchor tag elements:


You can <a href="#" class="roll">hover here for a 3d effect!</a>

3D Links Hover Effect

The Portfolio Grid

The Portfolio Grid element currently supports the following types of grid elements: Images, Youtube videos, Vimeo videos, DailyMotion videos, and External links.

You'll need to include two sources for each grid element, in order for it to display a thumbnail and a lightbox image/video or an external link. Here is how you setup each grid element type:

Images: place the image to be displayed inside the <a> tag and the thumbnail image inside the figure tag as a background image URL:


<div class="portfolio_item">
	<a href="./assets/images/image-full.jpg" class="lightbox_gallery">
	<figure style="background-image:url(./assets/images/image-thumbnail.jpg)">

Youtube videos: place the YouTube video URL inside the <a> tag and the thumbnail image inside the figure tag as a background image URL:


<div class="portfolio_item">
	<a href="https://www.youtube.com/watch?v=30uTT3SsPzA" class="lightbox_gallery">
	<figure style="background-image:url(./assets/images/image-thumbnail.jpg)">

Vimeo videos: place the Vimeo video URL inside the <a> tag and the thumbnail image inside the figure tag as a background image URL:


<div class="portfolio_item">
	<a href="https://vimeo.com/87309145" class="lightbox_gallery">
	<figure style="background-image:url(./assets/images/image-thumbnail.jpg)">

DailyMotion videos: place the DailyMotion video URL inside the <a> tag and the thumbnail image inside the figure tag as a background image URL:


<div class="portfolio_item">
	<a href="http://www.dailymotion.com/video/x2gryoe_health-tips-and-benefits_people" class="lightbox_gallery">
	<figure style="background-image:url(./assets/images/image-thumbnail.jpg)">

External links: place the external link inside the <a> tag and the thumbnail image inside the figure tag as a background image URL:


<div class="portfolio_item">
	<a href="blog.html" target="_blank">
	<figure style="background-image:url(./assets/images/image-thumbnail.jpg)">

Portfolio Filtering

Portfolio Grid uses Isotope Filtering for filtering the grid elements according to their category. In order for the grid elements to use category filtering, you'll need to add a special category CSS class in the parent DIV element as follows (diet class refers to the category that this element belongs):


<!--================= PORTFOLIO ITEM #1 (Image) ================-->
<div class="diet col-xs-12 col-sm-6 col-md-6 col-lg-6">
	<div class="portfolio_item">
	...
	</div>
</div>

Double Helix Hover Effect

Portfolio Grid also comes with a cool rotating double helix hover effect, enabled by default. If you want to disable the effect, open the configuration file (assets/js/config.js) search for themeConfig["DOUBLE_HELIX"] settings section, and switch the enable value from true to false.

Portfolio Isotope Filtering

Portfolio Double Helix Hover Effect

Before After Showcase (Image Compare)

Requirements

The Image Compare plugin is based on the TwentyTwenty jQuery plugin. In order to use it on a page you'll need to ensure you have (1) the jQuery library loaded, and both (2) the twentytwenty.min.css and (3) jquery.twentytwenty.min.js CSS and JS files included as follows:


	<head>
	<script src="./assets/js/libs/jquery.min.js"></script>
	<link rel="stylesheet" href="./assets/css/twentytwenty.min.css" type="text/css">
	</head>
	... HTML BODY ...
	<script src="./assets/js/libs/jquery.twentytwenty.min.js"></script>
	</body>

Usage

You'll need a div container with a class .twentytwenty-container and two img tags that will contain the before and after images respectively. Each img tag can contain an alt attribute which will provide the custom text for the Before and After labels. If the alt attribute is omitted, the default Before and After text will be used:


<div class="twentytwenty-container" data-default_offset_pct="0.75" data-orientation="vertical">
	<img src="./assets/images/img_before.jpg" alt="before">
	<img src="./assets/images/img_after.jpg" alt="after">
</div>

You can configure each BeforeAfter container using HTML data attributes as seen above: The data-position attribute can be set to either horizontal or vertical, and the data-default_offset_pct attribute, which configures the sliders position, can be set to anything from 0 to 1.

Before After Show Case (Image Compare)

Contact Forms, Appointment Forms, Newsletter

Medicus provides two communication forms: Quick Contact Form and Appointment Form. Both of these forms can be configured by editing the $themeConfig["CONTACT_FORMS"] section found in the config.php file, which can be found in the theme's root folder.

ATTENTION: If you are not receiving the emails sent by either of the contact forms after a successful response, double check your web server's email sending capabilities and/or try using an external SMTP service such as Gmail or Yahoo.

General Configuration: Basic Settings

"TO_EMAIL" : This is the recipient's email address. Use your email address to receive all the emails coming in from the Quick Contact Form and the Appointment Form.

"TO_NAME" : This is the recipient's name, e.g. "Medicus Health Center".

"SITENAME" : Enter your Site's name here, in order to recognize where emails originate from.

General Configuration: Advanced Settings

"TO_EMAIL2" : Enter a 2nd email address that will be also receiving the incoming emails.

"CC_RECIPIENTS" / "BCC_RECIPIENTS" : Add Cc: and Bcc: recipients, separated by commas.

"FORM_TEXT" : By default, the contact form script appends a message at the end of the email body, which informs the recipient that the message was sent from her site's contact form. If you want to remove this message from the emails, set the value of "FORM_TEXT" to false:

"ENABLE_CAPTCHA" : Enable/Disable Captcha codes with true or false. Leave this setting to true to discourage spammers from abusing your contact forms.

USE GMAIL SMTP SERVER

ATTENTION: Before using Gmail's SMTP service for your contact form you have to allow access for a new application by going to the following address: https://accounts.google.com/DisplayUnlockCaptcha

"ENABLE_GMAIL" : Set to true if you plan to use Gmail's email server.
"GMAIL_USERNAME" : Enter your email address at gmail.com.
"GMAIL_PASSWORD" : Enter your gmail password.

USE YAHOO SMTP SERVER

"ENABLE_YAHOO" : Set to true if you plan to use Yahoo's email server.
"YAHOO_USERNAME" : Enter your yahoo email address.
"YAHOO_PASSWORD" : Enter your yahoo password.

Check out this link for more information.

Using SendMail

"USE_SENDMAIL" : Set this to true if you want to use SendMail.

GoDaddy hosting

"ENABLE_GODADDY" : Set the value to true if you're on GoDaddy and experiencing problems sending emails.

Translating Contact Forms to your Language

All of the text strings returned from the Contact forms can be found in the config.php file and can be translated as follows:

Editing config.php

You can directly edit the values contained in the "MESSAGES" and "APPOINTMENT" arrays.


"MESSAGES" = array(
	"empty_fields"  => _("Input fields are empty!"),
	...
	"mail_success"  => _("Thank you %s! Your message was successfully sent."),
	"contact_form"  => _("[This message was sent from %s ]"),
);

After Translation


"MESSAGES" = array(
	"empty_fields"  => _("Τα πεδία είναι κενά!"),
	...
	"mail_success"  => _("Ευχαριστούμε %s! Το μήνυμά σας έχει σταλεί."),
	"contact_form"  => _("[Αυτό το μήνυμα έχει σταλεί από %s ]"),
);

ATTENTION: Be sure to translate only the text strings that are contained within "quotes" and retain the special placeholder characters %s and %d.

(See APIs Section)

External APIs

Setting up the Twitter API

Requirements

(1) First of all you need a PHP enabled Web Server.
(2) Then you'll need to create a new Twitter App (or use an existing one) and
(3) grab your oAuth Access Keys and Tokens.

Visit https://apps.twitter.com/, create a new App or select an existing one, and click on Keys and Access Tokens. For more information see this link.

Now, you'll need to enter these values in the config.php file found in the theme's root folder. Search for the TWITTER API section, find the $themeConfig["TWITTER"] array and replace the sample values with your Consumer Keys and Access Tokens.


$themeConfig["TWITTER"] = array
(
	"CONSUMER_KEY"    => 'ENTER YOUR CONSUMER KEY HERE',
	"CONSUMER_SECRET" => 'ENTER YOUR CONSUMER SECRET HERE',
	"ACCESS_TOKEN"    => 'ENTER YOUR ACCESS TOKEN HERE',
	"ACCESS_SECRET"   => 'ENTER YOUR ACCESS SECRET HERE'
);

Configuring Twitter Feed

All of the settings can be found and edited in the themeConfig["TWITTER"] section of the /assets/js/config.js file. Be sure to change, the twitterUserName setting to display your own twitter feed. You'll need to include the following JavaScript files on each and every page you want the Twitter Feed to appear:

jQuery
Flexslider Plugin
tweetie library
the twitterfeedslider.min.js script


<script src="/assets/js/libs/jquery.min.js"></script>
<script src="/assets/js/libs/flexslider/jquery.flexslider.min.js"></script>
<script src="/assets/js/libs/Tweetie/tweetie.js"></script>
<script src="/assets/js/twitterfeedslider.min.js"></script>

The Twitter Feed is based on the Tweetie jQuery Plugin by Sonny T.

If you need to learn more about LESS, visit LESS

Requirements

Host your web site on a PHP Web Server
Sign up for a MailChimp Account, grab your API Key and a List ID.
Include the Newsletter JavaScript file /assets/js/newsletter.min.js in your page:


<script src="/assets/js/newsletter.min.js"></script>

Edit the config.php file, found in your theme's root folder, and enter your API key and List ID in the MAILCHIMP SECTION:


$themeConfig["MAILCHIMP"] = array
(
	"API_KEY" => "PASTE HERE",   
	"LIST_ID" => "PASTE HERE"
);

You're now ready to go!

If you would like to translate the Newsletter response messages, e.g. SUCCESS, ERROR, etc. all you have to do is open the /assets/js/config.js file and edit the messages values found in the themeConfig["NEWSLETTERS"] section:


themeConfig["NEWSLETTERS"] =
{
	messages: {
		successMessage : "SUCCESS",
		errorMessage   : "ERROR",
		...
	}
}

CSS Animations

Medicus uses the Animate.css library to show css animations and wow.js to reveal them on scroll. In order to animate an object you have to assign animated class to the element and the proper animation class from Animate.css. If you want to reveal this object's animation on scroll, replace animated with the wow class.

For example, the current section icon animation is achieved by...


<h2 id="animations">
	<i class="fa fa-magic wow bounceInLeft"></i>
	CSS Animations
</h2>

Scroll upwards untill this section is well hidden, refresh your browser window [F5] and scroll back down again to see the animation in action.

Support

Plethora Themes offers support online through its support suite but you have to register first with your Themeforest Purchase code.

Responsive Grid, Layout & Styling

The Grid (it is Bootstrap as you know it!)

LESS & CSS

JADE & HTML Templating engine

Javascript & the way we use it

The General Layout Concept

The General Styling Concept

Color Scheme helper styling classes (6)

Gradient Angled Backgrounds (14)

Transparent overlays

Full Height, Full Width and Vertical Alignment of a Section

Paddings and Margins (relative to @section-vertical-padding: 55px;)

Vertical Align and heights of a Section's Columns

Responsive Stretchy Wrappers that keep a dimesions ratio

Other Misc. Helper Classes

Header Section

The Logo Area

The Menu

Head Media Panel Section

Heading Group (.hgroup)

Slider and its Captions

Google Maps

Getting the coordinates of a place

Main Area & Design elements

The "Powerful" Section Element

Section Headings Group Element .section_header

Particles Effect

3D Links Hover Effect

The Portfolio Grid

Portfolio Filtering

Double Helix Hover Effect

Before After Showcase (Image Compare)

Requirements

Usage

Contact Forms, Appointment Forms, Newsletter

General Configuration: Basic Settings

General Configuration: Advanced Settings

USE GMAIL SMTP SERVER

USE YAHOO SMTP SERVER

Using SendMail

GoDaddy hosting

Translating Contact Forms to your Language

Editing config.php

After Translation

Newsletter

(See APIs Section)

External APIs

Setting up the Twitter API

Requirements

Configuring Twitter Feed

Setting up the Newsletter using Mailchimp API

Requirements

CSS Animations

Support