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

In this archive will not images, that you can see in demo pages, every images were replaced by placehold.it service.


Before the main contents of the website 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.

                    831 : #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">&nbsp;</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.

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

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.

Twitter Bootstrap

Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. All features and opportuntes you can use in this project. If you need create new table or add accordeon or use navbar menu, just go to the appropriate section in Bootstraps documentation copy and paste example.

Of course, there are many other features you do not look for in twitter bootstrap this project has. A great amount of different sliders, counters, bars, chars, pricing table and so on.


To highlight one of the columns with another color it’s necessary to add some of classes:

  • .bg-info;
  • .bg-primary;
  • .bg-default;
  • or use standart bootstrap helper class.

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

You can add a padding as a one-pixel separator between two vertical blocks. To do it you need to add a <hr/> tag:


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.

                    284 : hr {
                      border-color: #E5E5E5;
                      max-width: 1000px;


To adjust the content inside a structural element it’s necessary to add the classes text-left,text-center or text-right.

To align by vertical you should use like-table structure with divtable and divcell classes, here an example (or in the error404 page):


Vertical aligned Text with any height

Also class equal sets up the same height to all inserted blocks, but with some paddings and feature. In the Pricing page you can see an example.


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

The slider occupies the whole section by adding a special class slider or oneslider (for one-image gallery) to the parent block and some additional markup in it. In each of them there can be 12-columns system with various elements. For every sliders we use carouFredSel slider. jQuery.carouFredSel is a plugin that turns any kind of HTML element into a carousel. It can scroll one or multiple items simultaneously, horizontal or vertical, infinite and circular, automatically or by user interaction. And it's responsive too.

One-image Gallery

A responsive one-image gallery has a markup:

  1. We add class oneslider into a div block;
  2. you can add/change 3 data-attribute parameters in this div:
    • data-fx - the slider flip effect, crossfade slide, directscroll, fade;
    • data-auto - autoscroll, true or false;
    • data-circular - circular or not, true or false.
  3. create a familiar Section structure;
  4. ul – an marked list with slides;
  5. Sliders li elements can contain align classes;
  6. There is a content with a 12-column markup and a random set of elements in the slider;
  7. Also the div .slidebar can contain two links – switching slides back and slider pagination with the class .nav-pages.

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.

                    6 : sliderInterval: 6000,
                    7 : sliderSpeed: 600,

Ribbon carousel

Restricting the number of visible items to a minimum and maximum amount. You should just add obligatory class ribbon to use this type of slider. Markup and an an example you can see in Start Agency page.

Slider with Masonry effect

In the About page you may see slider with Masonry effect. Masonry is a JavaScript grid layout library. It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. You’ve probably seen it in use all over the Internet. Masonry works on a container element with a group of similar child items. All sizing of items is handled by your CSS. Let's have a look an example:

  1. We add class oneslider into a div block and add obligatory class msnr-container;
  2. ul – an marked list with slides;
  3. Sliders li elements can contain align classes and every li element has obligatory class masonry-wrap;
  4. Every block in masonry-wrap wrapper has additional but also obligatory class msnr, which says us, that this block will have needed position on parent div.
  5. Also the div .slidebar can contain slider pagination with the class .nav-pages.

Logotypes carousel

In general we can use slider with logotypes or some another custom blocks. The simpliest way to add this:



We have page with prices. There we use also unique slider with obligatory class pricing for slider and some custom markup. Let's look on it:


    Some Content

    most popular

    Some Content


    Some Content


    Some Content


Each li element has data-attribute period, which may be any text. This text will write after slider in pagination bar.

After all of this slider examples you can use yourself or something new for each types.


Our template contains all needed pages to create fully-worked and oriented for blog pages. Over 8 pages for blog were html-coded and represented for using. Were considered 7 types of posts, standart blog.

  1. Single Post Photo;
  2. Single Post Text;
  3. Single Post Audio;
  4. Single Post Gallery;
  5. Single Post Link;
  6. Single Post Quote;
  7. Single Post Video.

Inside blog pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.

Post with Sidebar

To add sidebar for post pages for widgets you have to look at the Post Sidebar page. Fixed button, which always visible on screen, when click sidebar will open. Into sidebar you may use and write what you want. In example we added a few standart wordpress markup for widgets.

Audio Player

For posts with audio we use powerfull MediaElement plugin. HTML5 audio players in pure HTML and CSS.


To stylize audio player, you can change styles in css/style.css file in appopriate section [ 22. AUDIO PLAYER ].

Video Player

For posts with video we use responsive embeded from Twitter Bootstrap Framework. Rules are directly applied to iframe elements; optionally use an explicit descendant class .embed-responsive-item when you want to match the styling for other attributes.



About 13 pages marked up specifically for the ecommerce catalog. For catalog were created 6 variants:

  1. Catalog Grid;
  2. Catalog Grid Sidebar Right;
  3. Catalog Grid Sidebar Left;
  4. Catalog List;
  5. Catalog List Sidebar Right;
  6. Catalog List Sidebar Left.

All of this pages contain maincontent with products and 4 pages has filtering sidebar with additional settings. Also project has product.html page with more detail fully information about single product with rating, comments, description, tables and gallery. When you choose needed product you should order him. For this purposes were created additional 4 pages:

  1. Cart;
  2. Cart Empty;
  3. Checkout;
  4. Confirmation.

Inside ecommerce pages markup for articles similar as another pages and, of course, you can use all bootstrap styles too.


In this project we use a great jQuery plugin - jQuery Raty - it's A Star Rating Plugin. Very simple to use, and here you can see an example:


We use star icons from wonderfull FontAwesome service, and you can change 3 types of statements in custom.js file:

                     half: true, // to add half stars
                     starType: 'i', // tag element for star
                     starOff: 'fa fa-star-o', // class for empty-star
                     starOn: 'fa fa-star', // class for fill-star
                     starHalf: 'fa fa-star-half-o' // class for half-star

Product Quantity

For counting items in cart, change amount for more/less you may use like this structure:



Team page contain persons with modal description. Modal window using by Bootstrap Modal plugin. At first, add link for opening modal window. Obligatory data-attribute data-toggle and data-target where you should write id modal window.

MIKE Jhonson Founder

Modal window uses general structure for 12-columns and has close link, for hiding modal:


Magnific Gallery

Here we use brilliant plugin Magnific Popup. Magnific Popup is a responsive lightbox & dialog script with focus on performance and providing best experience for user with any device. You may put any HTML content in each gallery item and mix content types.

The easiest way to create popup media gallery, is add class magnific-wrap for parent block and add class magnific to every link, which you need to show. Attribute href has url to big image. Have a look an example:




Jack Kerouac


There are many examples in this project you may find inside some pages, like gallery or sliders or blog pages. Popup may contain not only static images, but also youtube or vimeo video, or gallery inside another gallery, have a look:

                   Video LinkGallery

As you can see for create single gallery for every independent link you have to use data-gallery attribute, where you write array of images, separate by commas.


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


For more examples, look at the Services page. Create the div block with the class countup, after 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.
                    1364 : .countup {
                      font-size: 70px;
                      line-height: 1.3;
                      color: #cccaca;


In About page we added interactive historical events. Thanks for it, you can add new year and new event for it.

  1. At first add new date: add new li with needed year. Date period in the beginning will automatically change;
  2. Add event for this year, using section tag and needed markup into it. For each year appropriate single section;
  3. And now you may click on new year, and appropriate content will show.

Google Maps


In HTML file you should write only single line, with unique id attribute.

To set Google map you need to edit the js/custom.js file. To get the longitude and latitude you can use the following service. Click a map and replace a marker into the place you need after switching to a link. Then insert the received coordinates into the js/custom.js file:

                    10 : locations: [51.5134476, -0.1159143]
                    11 : mapZoom: 11

You can also use multiple markers for Google Maps. Enter necessary coordinates into a locationsMarkers variable array.

                    685 : locationsMarkers = [
                       [51.483571, -0.120335],
                       [51.506656, -0.197239],
                       [51.511784, -0.107288]

In Contact page you may click on Full Screen button, and map will open in full screen.


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 mix-list.


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 or new page or modal window will open.

Error Pages

For special pages, like 404 or 505 use a few another markup. At first, you should add class error404 for HTML tag. This pages do not contain header and footer like in another pages. For more details information look at 404. By analogy of this pages you may create suitable and needed for your purposes pages.



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 -


Мessage 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.

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. If areas are filled in the incorrect way or aren’t filled at all, the class has-error is added to the area that hasn’t been validated. The invalid area style can be changed.

                    1534 : .has-error input[type=text],
                        .has-error input[type=email],
                        .has-error input[type=password],
                        .has-error input[type=search],
                        .has-error textarea,
                          box-shadow: none;

                    1612 : .succs-msg {
                      margin-left: 29px;

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', 'admin@gmail.com'); - 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 Yokko'); - the topic of a letter for the administrator template;
  • define('EMAIL_CLIENT_SUBJECT', 'Feedback letter from Yokko'); - 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@Yokko.local\r\n";. \r\n obligatory to save at the end of the line.

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:


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.

                    2156 : .scrolltop {
                      border-radius: .5rem;
                      width: 60px;
                      height: 60px;
                      left: 65px;
                      bottom: 65px;

                    932 : .scrolltop:before {
                      background-color: #808080;
                      opacity: .1;
                      border-radius: 3px;

Font Settings

To change the font-family you will have to edit the file css/style.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. "Helvetica")

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

  1. Go to http://www.google.com/fonts.
  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(http://fonts.googleapis.com/css?family=Open+Sans);
  8. At last, copy font-family name from Google Fonts website and paste on css/style.css:
                                html { font-family: 'Open Sans', sans-serif;  }