Caravan - Documentation

Version 1.0

Cross Browser, High Quality and Responsive Multipurpose HTML Template.

Thank you very much for purchasing our template. It is built with the latest HTML5 and CSS3 technologies, but at the same time it is also made compatible with older browser versions. If you have any questions that aren’t covered in this article, please feel free to email us on our user page, you can find the contact form here.

Don’t forget to rate this template, it helps us improve our products.

We invite you to view our portfolio.

Thanks so much!

Getting Started


For installing this template you need to make sure that you have the following extensions on your webserver. You will need to contact your webhost if the following requirements are missing.

  • PHP 5.2+;
  • PHP Mail support;
  • Enabling JavaScript in the web browser.


Unzip the downloaded files to the local disk on your computer. Inside the extracted folder there will be contents and folder with documentation. Copy all contents, except from folder with documentation, to your server via FTP client.


Before the main contents of the site are loaded, there is an opportunity to show the preloader of the site. It can be any image, a gif-animated icon. You can change the path to the image.

                    902 : #status {  background-image: url(../images/preloader.gif); }

If you don’t need the preloader, you can delete div with id preloader.

                    <div id="preloader">
                     <div id="status"> </div>


To change the favicon of your site, you need to load a new image in a site root or to point out a new address of the image.

                    9 : <link href="favicon.ico" rel="shortcut icon" type="image/x-icon">

Color themes

There have already been created a few special categories for the body tag, which stylize a color scheme.

  • green-skin - a default green color scheme;
  • yellow-skin - a yellow color scheme;
  • aqua-skin - an aqua color scheme;
  • red-skin - a red color scheme;
  • blue-skin - a blue color scheme;
  • orange-skin - an orange color scheme;
  • sand-skin - a sand color scheme;
  • brown-skin - a brown color scheme;
  • gray-skin - a grey color scheme.
                    <body class="yellow-skin"> … </body>

The class aqua-skin does not point out, it set by default.

The chosen theme changes the background of buttons, the background of marked blocks, icons, the language bar, the background of a marked point in the portfolio, the color of marked phrases, the color of links and some other elements. In the css/themes.css file there are settings for each color scheme. You can change current schemes or create your own scheme by analogy.

Modular grid

The Template is built on the system by using a 12-column markup. With the help of the given system you can create almost any modular grid and insert a necessary content in created modules.

Creating Columns

A <article class="container_12"> tag creates a 12-column markup of the page that is adjusted to the center of the browser window. The given content can contain div blocks from grid_1 to grid_12 classes, where the width of a column and the content inside it is specified by numbers from 1 to 12. A grid_1 class has a minimal width equal to one column. A grid_12 class takes the highest possible width that is in the settings of the template.

                    <article class="container_12">
                     <div class="grid_4"></div>
                     <div class="grid_2"></div>
                     <div class="grid_6"></div>

To highlight one of the columns with another color and to make their angles rounded it’s necessary to add class filling with a fill, for example, bg-grey and class rounded:


Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard.

To change background color or add new class you should edit file css/style.css.

                    2948 : .bg-grey    { background-color: #f3f3f3; }
                    2960 : .highlight  { background-color: #4FCBD8; }
                    608 : .rounded,.rounded:after,.rounded img {
                      border-radius: 1rem;

To look at the Plans and pricing section in a standard template you can notice a vertical separator between the first and the second column. You can add it adjusting a border-right class to the column. Also you can add separator on top, using border-top class, on bottom - border-bottom and left - border-left.


You can change the thickness, color and style of the separator.

                    517 : .border-right {
                      border-right: 1px dotted #cbcbcb;

                    521 : .border-left {
                      border-left: 1px dotted #cbcbcb;

                    525 : .border-top {
                      border-top: 1px dotted #cbcbcb;

                    529 : .border-bottom {
                      border-bottom: 1px dotted #cbcbcb;

You can add a padding as a separator between two vertical blocks. To do it you need to add an empty div block with a separator class:


Some text bla-bla…

Some text bla-bla…

By default it has transparent background color and it adds only padding, but you can stylize it.

                    455 : .separator {
                      margin: 1rem 0;
                      height: .1rem;
                      background-color: transparent;


If it’s necessary to add a padding on the left, it’s enough to add one of the classes from prefix_1 to prefix_12 that will set up padding equal to the width of the column. If it’s necessary to add a padding on the right, use classes from suffix_1 to suffix_12.

                    <article class="container_12">
                     <div class="grid_4"></div>
                     <div class="grid_4 suffix_1 prefix_1"></div>
                     <div class="grid_4 prefix_2"></div>

Content align

To adjust the content inside a structural element it’s necessary to add the classes aligned left, aligned center or aligned right to the parent tag. To adjust vertically use the class aligned, if the given tag doesn’t contain it, and add class equal, top, middle or bottom to it.

Class equal sets up the same height to all inserted blocks, thanks to which you can adjust the content inside blocks vertically.

                    <article class="container_12 content aligned center equal">
                     <div class="grid_4 aligned left">The column is aligned to the upper left edge</div>
                     <div class="grid_4 aligned bottom">The column is aligned to the lower center edge</div>
                     <div class="grid_4 aligned right middle">The column is aligned to the middle right edge</div>

By default there are several classes for enlarging vertical paddings between blocks. These are the vpadding and vpadding-large.

                    <article class="container_12">
                     <div class="grid_4 vpadding">by default padding</div>
                     <div class="grid_4">without padding</div>
                     <div class="grid_4 vpaddng-large">large top/bottom padding</div>

You can change the size of paddings in the css/style.css file or you can add a new class in which you set up user’s paddings.

                    373 : .vpadding {
                      padding-top: 6rem;
                      padding-bottom: 6rem;

                    403 : .vpadding-large {
                     padding-top: 10rem;
                     padding-bottom: 10rem;


There is a main content between the header of the site and its footer which is wrapped into a div block with the wrapper. There you can see sections, the creation of which will be described below.


To create a theme block, it’s necessary to use a section tag with a unique id identifier.

There is a div block with the class wrap in this section. This is a wrapping div block that is necessary for marking and code readability. The given div contains 3 inserted blocks:

  • tag header with the content-header class;
  • tag article with the container_12 and content classes;
  • tag footer with the content-footer class.

All these categories mentioned above are obligatory by default. But you may ommit it. They set up the markup of the given section and its content. For example:

                    <section id="someid">
                     <div class="wrap">
                      <header class="content-header"></header>
                      <article class="container_12 content"></article>
                      <footer class="content-footer"></footer>

A header tag is recommended to use for captioning the given section or placing a navigation bar of the slider or creating an introductory text. An article tag creates a 12-column markup that is adjusted to the centre of the browser window. It’s necessary for placing the main content of the section. A footer tag is recommended to use for placing a navigation bar after the slider or for creating any concluding remarks.

Section sizes

If you don’t add the container_12 category, the width of a block will be the same as the width of a browser window.

By default the height of a section is the same as the height of the existing content. If you add the class fullheight, the height of a section will be the same as the height of a browser, the given category is added only for parent blocks.

                    <div class="wrap fullheight">
                     <article class="container_12 content aligned middle center">
                      <p>Centered block</p>

Sometimes it’s necessary to set up a strictly fixed height for a section, the level of which it shouldn’t exceed. It’s very easy to do it:

  • a random class, for example, h400px, is added for the parent block with the wrap class:
                                <div class="wrap h400px"> … </div>
  • a new class is added at the end of the css/style.css file and is described this way:
                                .h400px { height: 400px; }


The background of each section can be of several kinds:

  • of solid color;
  • of a pattern;
  • of an image;
  • of a video.

The kinds of the background can be combined, for example: you can mix an image with a pattern, an image with a transparent background or a video with a pattern and a transparent background.


To set up solid color for the background of a section, it’s necessary to add the filling to the block with the wrap class:

                    <div class="wrap bg-grey"> … </div>

By default there have been created a few classes for filling the background of a section with solid color. These classes are bg-grey and highlight. You can change their color in the css/style.css file or you can add a new class and setting up any color.

                    2948 : .bg-grey    { background-color: #f3f3f3; }
                    2960 : .highlight  { background-color: #4FCBD8; }


To set up a pattern it’s necessary to add the pattern class to the block with the class wrap.

                    <div class="wrap dark-overlay"> … </div>

By default there have been created a few classes with different patterns. These classes are pattern-overlay, dark-overlay and verydark-overlay. You can change the color, transparency and the path to the pattern file in the css/style.css file or add a new class setting up user’s settings.

                    139 : .verydark-overlay:before {
                      opacity: .8;
                      background-color: #000;

                    144 : .verydark-overlay:after {
                      opacity: .4;
                      background-image: url(../images/pattern.png);

                    149 : .dark-overlay:before {
                      opacity: .4;
                      background-color: #333;

                    154 : .dark-overlay:after {
                      opacity: .2;
                      background-image: url(../images/pattern.png);

                    158 : .pattern-overlay:before {
                      background-color: transparent;

                    162 : .pattern-overlay:after {
                      opacity: 1;
                      background-image: url(../images/pattern.png);


To set up an image as the background of a section, it’s necessary to add a div block with the slide-img class and a unique class for an image in the tag with the class wrap:

                    <div class="wrap bg-grey">
                     <div class="slide-img fslide-review"></div>
                     <article class="container_12 content"></article>

For a separate image an additional unique class is required. It points out the path to the file. By default there have been created several standard classes. In the css/style.css file you can create your own classes or change the current ones.

                    1889 : .fslide-1     { background-image: url(../images/slides/slide-1.jpg); }
                    1890 : .fslide-2  { background-image: url(../images/slides/slide-2.jpg); }
                    1891 : .fslide-4  { background-image: url(../images/slides/slide-3.jpg); }

The parallax effect can be added to the image background. You need to add the data-stellar-background-ratio attribute to an empty div block with the slide-img class and point out the definition from 0 to 1. 1 stands for a fixed image, 0.01 means the most drift while scrolling the page.

                     <div class="slide-img fslide-review" data-stellar-background-ratio=".5"></div>


To set up a video as a background of the section, you need to add one more ytvideo class to the block with the wrap class and also you need to add an obligatory data-property attribute to it. In this attribute you need to point out the Youtube video address and also the second it starts playing. If the video doesn’t play, it’s recommended to add a div block with the slide-img class and a unique class for the image into the block with the wrap class. In this case there will appear a static image instead of the video.

                    <div class="wrap ytvideo" data-property="{videoURL:'', startAt: 10}">
                     <div class="slide-img fslide-lookat"></div>
                     <article class="container_12 content">
                      <p>Some text</p>

For a separate image an additional unique class is required. It points out the path to the file. By default there have been created several standard classes. In the css/style.css file you can create your own classes or change the current ones

                    1889 : .fslide-1     { background-image: url(../images/slides/slide-1.jpg); }
                    1890 : .fslide-2  { background-image: url(../images/slides/slide-2.jpg); }
                    1891 : .fslide-4  { background-image: url(../images/slides/slide-3.jpg); }

While testing take into account that the video won’t play on the local disk on your computer and your mobile devices. We don’t recommend to add a great number of sections with video-backgrounds as all video files and the template start loading at the same time.


Sliders allow you to save space, animate and decorate your site. In the template there can be several sliders with different settings.

The slider occupies the whole section by adding a special class slider to the block with the wrap class and some additional markup in it. The whole structure of the section complies with the template described earlier with the header, the main content and the footer of the section. In each of them there can be 12-column system with various elements. Let’s have a look at the example of creating a random slider:

  1. We add an obligatory class slider into a div block with the wrap class;
  2. you can add/change 2 data-attribute parameters in this div:
    • data-fx - the slider flip effect, fade or slide;
    • data-auto - autoscroll, true or false.
  3. create a familiar Section structure in a div block with the wrap class, which was described earlier;
  4. A block with the content class contains a slider – an unmarked list with an obligatory class sliderwrap;
  5. Sliders lili elements can contain align classes that are described in the Help Section;
  6. There is a content with a 12-column markup and a random set of elements in the slider;
  7. A footer tag with the class content-footer contains a nav block – it is an element to switch sliders that are of solid circles at the bottom of the section
  8. Also the tag footer with the content-footer class can contain two links – switching slides back and forward in the view of 2 cursors that are at the both sides of the section.

Cursors and solid circles are not obligatory. If the true definition is set up in the data-auto attribute, it means that slides will switch in a specified period of time without these elements. This period of time and the speed of switching can be changed.

                    5 : sliderInterval: 6000,
                    6 : sliderSpeed: 800,

You can choose 2 types of classes for cursors: bright and dark, it depends on the background of the section. You can change the image of cursors.

                1663 : .slide-prev { background-image: url(../images/slide-prev.png); }
                1638 : .slide-next { background-image: url(../images/slide-next.png); }
                1643 : .slide-dark-prev { background-image: url(../images/slide-dark-prev.png); }
                1648 : .slide-dark-next {  background-image: url(../images/slide-dark-next.png); }


Another type of sliders is superslider. It fullscreen fixed background slider. You can see it on the mainPersonal.html page on the top. Just images are changing.


You can add more images if need. Resolution and image size can be of your choice. However, it is recommended not to exceed the images file size beyond 1MB. Filename can be anything and must be the same as previously written in the html code. The order of the slides is one by one as specified in html file. In obligatory image attributes alt can be written with the name of the image or anything according to your choice.



We use relative units rem for font sizes and margins. This creates flexibility in manipulating and instant resizing when scaling website. Font size in pixels is defined in the file once css/typography.css:

                    51 : html{ font-size: 10px; }

So 1rem = 10px. If you want to set the font size, for example, 24пх - in relative units it will 2.4rem. On mobile devices, font sizes can looks bulky, so it is enough change the size in one place and all internal components with relative sizes recalculated on the basis of a given size.

For the template have already been defined all styles of each type of headings h1 до h6. You can change it in file css/typography.css. Also in this file, you can change the appearance of backquotes. Sometimes it is necessary highlight one introductory paragraph, for him there is a special class pre. Padding, sizes and other styles imported from the the paragraph styles or other unit which is set to the class.

                    120 : p{
                      font-size: 1.7rem;
                      line-height: 2.7rem;
                      font-weight: 300;
                      padding: 0 0 2rem;

                    159 : blockquote {
                      font-size: 2.8rem;
                      line-height: 3.6rem;
                      color: #fff;
                      font-weight: 400;
                      margin: 0 0 3rem;

                    178 : .pre {
                      font-size: 1.6rem;
                      line-height: 2.4rem;
                      padding: 0 0 3rem;

There are cases when the background of a section has dark colors and text on this background merges and difficult to read. For these cases it is possible to the parent div with the class wrap to add another class inverse . Due to this class, the text inside the block is white, or the way you ask it. Color can be changed.

                    2899 : .inverse,
                      .inverse *,
                      .inverse a  { color:#fff; }

Links on the site can be stylized and represented in any way. The best common case is a <a> tag. You can add classes and also data-attributes to a link. For examplе:

                    <a class="button" data-popup="video-popup" href="#">
                     <img src="ico.png" alt="">

In this example you can see a link in the view of a button with an icon and a text. The order of the text and icon layout depends on the code bar order in the file.

Clicking the link there open a modal window, as a data-popup attribute is added in which id of a modal window is described. Documentation about modal windows you can read in the appropriate section.

Links and buttons can be stylized at your discretion. By default there are some created classes that you can add to the existing buttons, for example: red, transparent-white, transparent-gray. You can add or change styles of links-buttons in the css/style.css file.

                    1425 : .button        {
                      padding: 0 2.5rem;
                      margin: 2rem 0;
                      line-height: 4.4rem;
                      letter-spacing: .1rem;
                      height: 4.4rem;
                      border-bottom-color: #247e88;
                      background-color: #4fcbd8;
                      text-transform: uppercase;
                      font-weight: normal;
                      font-size: 1.6rem;

                    1442 : .button:hover  {
                      color:#fff !important;
                      background-color: #64dfec;

Links can be external and internal. All links and buttons in sections are external by default, it means that you will go to another page by clicking the button. An internal link will scroll the content to the necessary block on a page. You need to add the class internal and to point out # and id sections in the href attribute for an internal link. Go to a particular section for the article on creating sections.

                    <a class="internal" href="#portfolio">Portfolio</a>


All images on the site can be pointed out in the marked view as they are written in the html code:

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

There is a special view of images on which you can “hang” links and stylize them in a custom way. In the standard template such images are shown in the Meet Our Team section. For example:

                    <div class="img">
                     <figure class="circle"><img src="images/team/face-06.jpg" alt=""></figure>
                       <li><a href="">google</a></li>
                       <li><a href="#someid" class="internal">youtube</a></li> 
                       <li><a href="">facebook</a></li>

An unmarked list can contain any links such as external ones which lead to another page and internal ones – by clicking them the page is scrolled to the necessary section with the pointed id. For internal links you need to add the class internal. If you want to look at the article on creating sections with a particular id go to the special section.

The class circle or the class rounded can be set to both an image and another block. Thanks to them corners become rounded. In the css/style.css file you can change the radius of the created class or create a new one.

                    602 : .circle,
                      .circle img {
                       border-radius: 100%;

                    608 : .rounded,
                      .rounded img {
                       border-radius: 1rem;

To make the hover effect on an image with a link you can set the background and filling transparency. Add class img-link and write it on stylesheet. When hover to such an image it is filled with a solid background and can be clickable.


You can change filling transparency and background color.

                    2-47 : .img-link:after {
                      background-color: #4CC2CE;

                    2059 : .img-link:hover:after {
                      .opacity: .7;


There is a possibility to create universal icons with a common structure. It looks the following way:

                    <div class="icon">
                     <img alt="" src="images/design.png">

Images in the div block with the class icon must be with a transparent contour of an icon and a filled background (you can see the example in the folder with images). Thus if you need to replace the color of an icon, it’s enough to change the background of the family block with the class icon. If you need just to insert an image or icon without a background filling then you shouldn’t frame the img tag with a family .icon or you can delete the class icon.

This template has included Font Awesome icons. Font Awesome gives you scalable vector icons that can instantly be customized — size, color, drop shadow, and anything that can be done with the power of CSS. A very large variety of icons, which you can use on your site. Look icons and choose what you need. After that, write tag i with needed class. You can paste icons in any needed place on your website. Icons inherit all styles from parent block and from block, which are nested.



Counters allow you to see the process of increasing any meaning to the required one when the counter area is in the visible browser area. There can be several counters. To add a counter to the site, use the following structure:

                    <div class="num">
                     <ins data-num="850.57" data-increment="10.55" data-fractional="2">0</ins><sup>$</sup>

Create the div block with the class num and we set an ins tag in it and we add obligatory attributes to it:

  • data-num - the final meaning to the size of which the counter will increase;
  • data-increment - how necessary it is to increase a counter during every iteration;
  • data-fractional - the number of important figures after a comma. If the number is integral, this attribute can be omitted or you can point out 0.

To add measurement units you need to insert a sup, and to change an external view of figures you need to edit the css/typography file.

                    141 : .num {
                      font-size: 7rem;
                      line-height: 9rem;
                      color: #333;
                      font-weight: bold;
                      letter-spacing: .1rem;
                      text-transform: uppercase;

Also you have an opportunity to create numeric lines, which shows you process of increasing meaning with filling lines. Genearal structure of this type:


Java Script



You can organize your work according to the preset filters. At first, you create works navigation with category:


Items of this list have obligatory class filter and data-filter attribute. Data-filter helps you divide works on needed category. After navigation create container with class works-container and not obligatory additional class small (or medium or large.


Each of mix block should has filtering class: branding, drawing and etc. Some words about your work. When you click one of the description, full gallery will open. You should set correct url to modal window in data-popup attribute. And, of course you should have modal window markup on the page, which was described in appropriate section.


You can add countdown block on your page. Example you can see on countdown.html page.

                    <div id="countdown"></div>

Countdown settings

You can set the date in the js/custom.js for the countdown.

                    10: countdownTo: '2014/12/28', // Change this in the format: 'YYYY/MM/DD'

Visualization settings

To customize words days, hours, minutes and seconds, you have to edit css/style.css.

                    3186 : #countdown span   {
                      font-size: 80px;

                    3204 : #countdown ins  {
                      font-size: 14px;


The feedback can contain the following blocks:

  • <input type="text"> - a one line standard text area;
  • <input type="email"> - a text area for an e-mail address;
  • <textarea> - a more than one line area for a message;
  • <input type="submit"> - a sending form button;
  • <h4 class="succs-msg"> - delivery report.

Let’s have a look at the example of creating the countdown on the site.


Contact Form


message was sent

All the areas must be in the form tag. The tag must have obligatory attributes:

  • action - – it shows the path to the php-file which deals with processing the form, it remains the same by default;
  • method - post remains the same by default;
  • id - a unique identifier, send-form remains the same.

Each area in the form must contain unique forms id, the name attribute and a not obligatory placeholder attribute. Id and name attributes must remain the same as shown above for the proper work and its further processing. The placeholder is a text which is shown to the user before inputting the main text in the area.

The sending button can be stylized by the code in the style sheet or by adding/changing the existing class. The text on the button is set up with the help of the value attribute.

If form areas are filled in the right way, after pressing the button there will appear a message with the class succs-msg. This block can be in any place of the page. You can set up an external view in the css/style.css file and it takes styles according to what element the succs-msg class is added to, in our case – to the h4 heading. If areas are filled in the incorrect way or aren’t filled at all, the class invalid is added to the area that hasn’t been validated. The invalid area style can be changed.

                    2204 : input:invalid,
                      background-color: #FBD6DA;
                      border: 0;
                      border-radius: 3px;

                    2218 : .succs-msg {
                      margin-left: 3.5rem;
                      display: inline-block;

In the php/email.php file you can change the address of message receiving, a message topic, also the whole text that will deliver to the administrator of the site.

  • define('EMAIL_ADMIN_SENT_TO', ''); - an e-mail address to which a letter will be sent for the administrator template;
  • define('EMAIL_ADMIN_SUBJECT', 'Feedback letter from contacts form on Caravan'); - the topic of a letter for the administrator template;
  • define('EMAIL_CLIENT_SUBJECT', 'Feedback letter from Caravan'); - the topic of a letter for the sender;
  • line 32 $letterToAdmin = … - the template of a letter for the administrator;
  • line 44 $letterToClient = … - the template of a letter for the sender;
  • an e-mail on behalf of whom a letter is sent to the sender: line 13: $headers .= "From: feedback@caravan.local\r\n";. \r\n obligatory to save at the end of the line.

MailChimp Subscription Form

Newsletter settings

You need to change the Mailchimp's List URL in your html file for the Newsletter form. Check this link How can I add my signup form on my website and try to insert correct URL from code in Step 5.


To change the validation messages, you will have to edit js/custom.js.

                    15 : successText: 'Thanks. You have successfully subscribed. Please check email to confirm.', // text after successful subscribing
                    16 : errorText: 'Please, enter a valid email' // text, if email is invalid

Visualization form settings

To change the background color and color of subscription form, you will have to edit css/style.css.

                    72249: #feedback-form input[type="email"] {
                        background-color: #333333;
                    2232 : #feedback-form input[type="email"]::-webkit-input-placeholder {
                    2240 : #feedback-form input[type="email"]::-moz-placeholder {

Scrolltop Button

To scroll the template up, to its beginning, there is a special button that appears by scrolling the page down. Its code is:

                    <a href="#" class="scrolltop"><img src="images/scrolltop.png"></a>

To change its external view you need to edit the css/style.css file. You can also change the external view of a cursor by replacing a standard image or creating a path to the new one.

                    918 : .scrolltop {
                      border-radius: .5rem;
                      width: 6rem;
                      height: 6rem;
                      left: 6.5rem;
                      bottom: 6.5rem;
                      opacity: .6;

                    932 : .scrolltop:before {
                      background-color: #000;
                      opacity: .2;

Font Settings

To change the font-family you will have to edit the file css/typography.css. If the font is a standard one, built the system by default, you can just write it here.

                    6 : html { font-family: 'Arial', sans-serif;  } // or whatever you want (e.g. "Verdana")

Also you can use Google Font and connect it to your website.

  1. Just go to
  2. Choose the appropriate font.
  3. Click the Quick-use button ().
  4. Choose the styles that you want;
  5. Choose the character sets that you want.
  6. Below that click on the @import tab and copy this line.
  7. Paste this line to that css/typography.css file on 3d line instead of the default (e.g.):
                                3 : @import url(;
  8. At last, copy font-family name from Google Fonts website and paste on css/typography.css:
                                51 : html { font-family: 'Open Sans', sans-serif;  }